React is an incredibly popular library for building user interfaces.
Equally ubiquitous is Create React App, the tool which provides you with a fully functioning React application from a single command. Create React App is great for tutorials and hobby projects because it gives you a huge amount of configuration and functionality for very little effort.
However, CRA's greatest strength is also its greatest weakness: it obscures far too much complexity.
This is fine, so long as you are happy to treat CRA as a slightly magic black box. If you want to understand what's going on inside or configure something slightly differently then you're going to need to need to eject.
CRA eject is not for the faint-hearted; it results it a significant amount of additional complexity in your repository. Try it yourself, instructions below, or here is one I made earlier.
npx create-react-app my-app
cd my-app
npm run eject
A quick glance through the config folder, the scripts folder, or even just package.json will quickly demonstrate just how much has been set up for you. Do you understand it? Do you need it? I don't think I do, but not knowing is a bit barrier to ejecting.
Fortunately, there are alternatives.
The core functionality I want for a build tool is to make the process of turning the code I write into code that can run really, really, easy. This means I want it to handle: running a local dev server and making a production build.
At the moment I prefer to scaffold new React projects using Vite. It is a much more focused build tool, and it is just as easy and quick as CRA:
hereward@manticore:~/code$ npm create vite@latest ✔ Project name: … vite-project ✔ Select a framework: › react ✔ Select a variant: › react-ts Scaffolding project in /home/hereward/code/vite-project... Done. Now run: cd vite-project npm install npm run dev
That's it. Vite sets up three scripts in your package.json: dev to local development, build to create a production build, and preview to build for production but serve locally. Notably, it's not set up linting or testing. It's also not expressing any opinion about how you apply styles to your application.
Vite itself does hide the complexity of how it does this, so is technically a "magical black box", but a far smaller one that CRA, which I think is helpful.
Vite is by far from the only tool you can use to build a React app. There are alternative approaches you can take:
- ParcelJS adopts a zero-config approach to build set-up, it should Just Work.
- If it you want go one to level deeper then under-the-hood Vite uses rollup.js and esbuild, which you can configure directly.
- You can also stick to more traditional tools like webpack, using something like Create App to help generate the required configuration.
// Versions used when writing this article
"vite": "2.8.0"
"react-scripts": "5.0.0"
With thanks to @CheshireSwift and @fildon_dev for their feedback ♥. @fildon_dev also writes as Rupert 'fildon' McKay.