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.

However, beyond setting up a React app that just works, I also had a few more requirements pertaining to what many would deem “essentials” of the modern stack:

1. It must support TypeScript.
2. It should have state management provisioned out of the gate.

Tooling

So what exactly do I need to make this work?

To find the answer, I started with the React docs.

Reading Creating a Toolchain from Scratch tells me the following about what I need:

“A package manager, such as Yarn or npm. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.

A bundler, such as webpack or Parcel. It lets you write modular code and bundle it together into small packages to optimize load time.

A compiler such as Babel. It lets you write…