When Create React App first launched 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).
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:
I get dizzy just looking at this.
Immediately, you are greeted with two separate folders:
public folder, you see
manifest.json in addition to our
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.
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
Maybe from this point-of-view, we can start to see why Create React App might not always be the best default option.
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.
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?!
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.
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 was created.
This was built on top of Parcel, 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.
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.
Aside from no ejecting:
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.
To use Nano React App, simply run:
npx nano-react-app my-app
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 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
yarn.lock file. This was done on purpose since we don’t want to be opinionated on whether you should use
Thanks for reading!