Building a Modern React App From Scratch in 2021

A step-by-step tutorial on setting up a modern React app with no boilerplate

➡️ You can access this entire article and all the related code on GitHub.

Motivation

The main objective of this tutorial was to get myself to better understand the multiple moving parts that make a React app work rather than just accepting the “magic” of the many templates/boilerplates out there (e.g. create-react-app and react-boilerplate).

It was very much inspired by Jedai Saboteur’s extremely well-written Creating a React App… From Scratch. The article is so good it is referenced in the official React docs.

However, times change, and I wanted to build a modern React app from scratch in 2021. As such, I had a few more “essentials” to include in the toolchain and wanted to work with the latest versions of core libraries. In some ways, I see this as the latest version of the tutorial mentioned above.

Objective

My goal here is simple: Build a React app from “scratch.” “From scratch” here doesn’t mean building the supporting tools myself but rather taking responsibility for their setup instead of outsourcing it to something like create-react-app.