I am trying out Next.js with React and here is my experience.
Introduction
Let's start by saying that I didn't know anything about Next.js.
The documentation is very nice and it starts with a good introduction that explains well where Next.js is positioned.
Next.js is a React framework that gives you building blocks to create web applications.
These building blocks include stuff like data fetching and routing that you would need to otherwise import in React.
The FOUNDATIONS part of the documentation is a pleasant read that walks you through some basic but important concepts of web development.
From JavaScript to React
Here is a quick summary of what you can get in the section From JavaScript to React
Fundamentals of web development
What is the DOM? An object representation of the HTML elements.
Imperative vs Declarative Programming - Step-by-step instructions on how to make a pizza vs just ordering a pizza.
What is JSX? A syntax extension for JavaScript.
What's Babel? An interpreter to compile JSX into JavaScript so browsers can understand the code.
Fundamentals of JavaScript
- Important JavaScript concepts you should know.
Fundamentals of React
- React Core Concepts 1: Components. Components are small building blocks of code. In React, components are functions that return UI elements. Use React components in JSX by writing the capitalized component name inside tags. You can nest components into each other.
- React Core Concepts 2: Props. Props (e.g. properties) allow you to pass pieces of information as properties to React components. Think of props as passing a string to the src
attribute of an img
element in HTML.
- React Core Concepts 3: State. State is "any information in your UI that changes over time". React uses functions called hooks to manipulate the state and make some other operations.
More info on learning React.
List of resources to learn React:
https://dev.to/lorenzojkrl/best-free-react-resources-49nk
In the next few days, I will go through From React to Next.js, but for the moment, this is it!
My Two Cents
Best documentation I have seen so far, have a look!
I loved the quick quizzes in the documentation
While the introduction is great, it doesn't substitute learning JavaScript and React (which are warmly suggested).