The goal of this post is to create a very straightforward and short guide to read just the key concepts to start developing a React app using Nextjs framework without experience in React. For me, starting with a complete boilerplate like the react boilerplate feels to heavy to start from zero.
Nextjs: how to start
Create a Nextjs app following the guided tutorial: this will introduce you to the basics and render simple pages. As Nextjs is a framework for react you will be already creating stateless components without knowing it (you will learn about that later).
Concepts to retain: nextjs automatic router based on /pages/ dir, styling components.
Nextjs will let you almost forget about the server and router, it just works.
Using pre-rendering you can request data at build time from a server. For dynamic data you can use data fetching to request it from client side.
You can also develop easily APIs using API routes.
React key concepts
Create and render components: Components are parametrized with properties, you can create bigger components by composing them.
State and lifecycle: Components can be stateless or stateful. A rule of thumb is to try to have most components stateless, so they’re static. For stateful (or dynamic) components, understanding the lifecycle and how updating state works is the key for developing reactive apps.
Events in React: In the end, we need to let the user manipulate the application, using events is important for letting users interact with the application.
Jest for react: you can test snapshots which are static renders of a page (or a DOM section) to find out if any page is broken after new changes or to be aware of changes.
Nextjs is a react framework for simplifying the server.
React is a way to create modular components written in JSX that have properties and states. Those components describe the user interface and the interactions.
These are the basics to get started. There are many features that we have left behind, probably you will need them in later stages but you already tackled the basics which is usually the hardest part.
Did you find this guide useful? Any suggestion? Feel free to comment below or send a tweet.
This guide was redacted in April 2020, using React 16, Jest 25 and Nextjs 9.
This guide appeared first in https://en.jorgeacortes.com