When Create React App first in July of 2016, it was considered the best way for beginners to get started with React. launched 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 , you are probably familiar with the wall of configuration and numerous files that may seem impossibly daunting for beginners everywhere. npm run eject 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: and . public src In the folder, you see and in addition to our . public favicon.ico manifest.json index.html In the folder, you have two CSS files, four Javascript files, and a thrown in just for fun. src logo.svg 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 application. production 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 folder, and focus on . public 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 is where you put global styles and is where you put your component-specific styles. However, this is not actually true since is not automatically component-scoped. If you include it, the styles will apply to the whole app. index.css App.css App.css 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 is the entry point of our app and is our top-level component. That part isn’t hard, but what’s with these other two files? index.js App.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? App.test.js Oh and that’s not all. What’s this ? A quick google search of “service workers” tells me that it has something to do with offline functions and progressive web-apps. serviceWorker.js 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 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 was created. Nano React App This was built on top of , 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. Parcel And to give you an idea of Parcel’s popularity, at the time of writing: Parcel has on Github, while Webpack has . That is to say, this is not an obscure project by any means. 29,753 stars 46,955 stars The generated app has so few lines of code that . There are only two scripts included, a dev server and a production build script. the need for ejecting is no longer necessary 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 , simply run: Nano React App npx nano-react-app my-app is a command bundled with modern versions of node that allow you to run a binary without having to do first. Note: npx npm install This will unpack a app into the directory of your choice ( 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. template my-app We don’t run for you, so the unpacking of the template project is extremely fast. There is also no or file. This was done on purpose since we don’t want to be opinionated on whether you should use or . npm install package-lock.json yarn.lock yarn npm Thanks for reading!

Google

Progressive

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Create React App is Way Too Bloated

Too Long; Didn't Read

Companies Mentioned

Adrian Li

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Create React App is Way Too Bloated

Too Long; Didn't Read

Companies Mentioned

Adrian Li

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES