# Opinion: You don't need Create React App

[React](https://reactjs.org/) is an incredibly popular library for building user interfaces.

Equally ubiquitous is [Create React App](https://create-react-app.dev/docs/getting-started/), 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](https://create-react-app.dev/docs/available-scripts/#npm-run-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](https://github.com/thehereward/my-ejected-cra).

```
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](https://vitejs.dev/). It is a much more focused build tool, and it is just as easy and quick as CRA:

<pre><font color="#4E9A06"><b>hereward@manticore</b></font>:<font color="#3465A4"><b>~/code</b></font>$ npm create vite@latest
<font color="#4E9A06">✔</font> Project name: <font color="#555753">…</font> vite-project
<font color="#4E9A06">✔</font> Select a framework: <font color="#555753">›</font> <font color="#06989A">react</font>
<font color="#4E9A06">✔</font> Select a variant: <font color="#555753">›</font> <font color="#3465A4">react-ts</font>

Scaffolding project in /home/hereward/code/vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

</pre>

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.

<hr />

Vite is by far from the only tool you can use to build a React app. There are alternative approaches you can take:

- [ParcelJS](https://parceljs.org/) 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](https://rollupjs.org/guide/en/) and [esbuild](https://esbuild.github.io/), which you can configure directly.
- You can also stick to more traditional tools like [webpack](https://webpack.js.org/), using something like [Create App](https://createapp.dev/) to help generate the required configuration.

<hr />

```
// Versions used when writing this article
"vite": "2.8.0"
"react-scripts": "5.0.0"
```

<hr />

With thanks to [@CheshireSwift](https://twitter.com/CheshireSwift) and [@fildon_dev](https://twitter.com/fildon_dev) for their feedback ♥. `@fildon_dev` also writes as @[Rupert 'fildon' McKay](@fildon).