When Create React App first [launched](https://reactjs.org/blog/2016/07/22/create-apps-with-no-configuration.html) in July of 2016, it was considered the best way for beginners to get started with React.

In those days, beginners were encouraged to build a React app with Webpack from scratch, or download one of many boilerplates on the internet. The arrival of Create React App felt like a breath of fresh air.

Years later, we have stalled in our progress of making things simpler and easier to use. Our never-ending desire to optimize and add features has made Create React App awkward to use and intimidating to most beginners (and some experienced users alike).

### The bloated file structure

Ejecting out of Create React App has always been an extremely jarring experience.

If you ever dared to run `npm run eject`, you are probably familiar with the wall of configuration and numerous files that may seem impossibly daunting for beginners everywhere.

But let’s say that we never eject, the following is what you get out of the box:

![](https://hackernoon.com/hn-images/1*11-HEfDJV7STCKMJPQoB8A.png)

I get dizzy just looking at this.

Immediately, you are greeted with two separate folders: `public` and `src`.

In the `public` folder, you see `favicon.ico` and `manifest.json` in addition to our `index.html`.

In the `src` folder, you have two CSS files, four Javascript files, and a `logo.svg` thrown in just for fun.

At this point, you can already imagine what most beginners might be thinking:

> “I thought I was here to learn React and quickly start making components?”

Of course, these files are all very important for the seasoned web developer working on a _production_ application.

Testing is the backbone of any reliable web application, and service workers are absolutely essential when creating a progressive web-app.

But what are the most common use-cases of Create React App? How often do developers start brand new projects that need this level of configurability and optimization?

Not very often.

> The vast majority of the time, we are creating proof-of-concepts, tutorials, example apps, and barebones bug reproduction apps.

I’m not saying Create React App has no purpose, but it is awfully bloated for many of the use-cases that people regularly use it for. We can’t keep seeing Create React App as a one-size-fits-all approach.

### A beginner’s perspective

Let’s think about this from a beginner’s perspective. And let’s assume that we somehow had the insight to ignore the `public` folder, and focus on `src`.

Maybe from this point-of-view, we can start to see why Create React App might not always be the best default option.

#### CSS files

First, you are greeted with two CSS files and your first question might be: “Where should my styles go?”.

After a few moments, you might think that `index.css` is where you put global styles and `App.css` is where you put your component-specific styles. However, this is not actually true since `App.css` is not automatically component-scoped. If you include it, the styles will apply to the whole app.

Why can’t the project just start with one CSS file? Or if we are just making an example app or bug reproduction app, maybe we don’t need a CSS file at all.

#### Javascript files

We can probably figure out that `index.js` is the entry point of our app and `App.js` is our top-level component. That part isn’t hard, but what’s with these other two files?

`App.test.js` sure sounds like a test, but wait, I haven’t even learned React yet! Does React come with a testing framework? Is it using Jest or Mocha? Do I always need to test to use React?

Oh and that’s not all. What’s this `serviceWorker.js`? A quick google search of “service workers” tells me that it has something to do with offline functions and progressive web-apps.

I have barely started making any components, are you telling me that every React app I make should be a progressive web-app?!

#### Frustration

At this point, I think it’s pretty clear that beginners would have a hell of a time using Create React App for learning purposes.

Is it better than rolling your own Webpack config? Sure, but in 2019, I think we have better options.

### A truly minimal solution

![](https://hackernoon.com/hn-images/1*avmiJXf-IieRGyFU170gJg.png)

The file structure of a Nano React App

Sometimes (i.e. oftentimes) you want to jump into React quickly and churn out a few components without all the noise.

> This is why [Nano React App](https://github.com/adrianmcli/nano-react-app) was created.

This was built on top of [Parcel](https://parceljs.org), a web-app bundler (like Webpack) that includes many smart defaults out of the box. It can also be much faster than Webpack if your computer has multiple cores.

And to give you an idea of Parcel’s popularity, at the time of writing: Parcel has [29,753 stars](https://github.com/parcel-bundler/parcel/stargazers) on Github, while Webpack has [46,955 stars](https://github.com/webpack/webpack/stargazers). That is to say, this is not an obscure project by any means.

The generated app has so few lines of code that **_the need for ejecting is no longer necessary_**. There are only two scripts included, a dev server and a production build script.

![](https://hackernoon.com/hn-images/1*iWo_4ELxe5HF5DxHCY6sPA.png)

#### What else does it not have?

Aside from no ejecting:

*   No linting
*   No testing
*   No service workers

Again, let me re-iterate that these are important things for a production app. But for a small tutorial or a simple bug reproduction app, these things will bloat your diffs.

And if you ever decide that you want these things, you can easily integrate them without having to “eject” and radically change the file structure of your project.

#### _Try it out!_

To use [Nano React App](https://github.com/adrianmcli/nano-react-app), simply run:

npx nano-react-app my-app

**Note:** `npx` is a command bundled with modern versions of node that allow you to run a binary without having to do `npm install` first.

This will unpack a [template](https://github.com/adrianmcli/nano-react-app-template) app into the directory of your choice (`my-app` in this case). We support the same Babel transforms you get with Create React App, so feel free to use class properties for your component methods out of the box.

We don’t run `npm install` for you, so the unpacking of the template project is extremely fast. There is also no `package-lock.json` or `yarn.lock` file. This was done on purpose since we don’t want to be opinionated on whether you should use `yarn` or `npm`.

Thanks for reading!

Google

Progressive

Too Long; Didn't Read

Build an AI-based text classifier with Tensorflow & NoSQL

Create React App is Way Too Bloated

Too Long; Didn't Read

Companies Mentioned

@adrianmcli

RELATED STORIES