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.

You shall have experience coding and know at least JavaScript, HTML, CSS and the basics of Nodejs. If not, w3schools have many tutorials.

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

React focuses on creating modular components and composing them using JSX, a JavaScript extension. You develop components based in properties and states.

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, unit testing for JavaScript

You can follow the getting started example to get an idea on how to unit test JavaScript functions.

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.

Ezyme helps you to test react components. It let’s you simulate user behavior impact in the components. There’s also react-testing-library that is also powerful.

Summary

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.

Jest is a testing suite for JavaScript that allows: unit testing, snapshot testing and with enzyme you can also do react components testing.

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.

Notes

This guide was redacted in April 2020, using React 16, Jest 25 and Nextjs 9.

This guide appeared first in https://cortesja.com