If you have used create-react-app to start a React project it is a piece of magic! It will set up everything you need to start you next React Project.
But it does leave some questions. What is it doing behind the scenes. Why does it have 100Mb or more of dependencies? Is it using lot’s of stuff I don’t need? What are these service worker and .map files anyway?
What is create-react-app?
The simplest way to use React is adding React as a plain <script> tag on an HTML page. Facebook recommend this for simple scenarios, however this has limitations, such as it’ll be hard to manage when you want to use other libraries for tables and forms for example. And it might be less performant for large apps because the JSX code will be compiled in the viewer’s browser.
So if you need to go beyond the plain script tag approach, you need tooling. And setting up that tooling is a bad headache for most people, and especially beginners. What if you had a way where building a React App just works? Well that is what create-react-app offers.
create-react-app is a package you can install from Facebook that combines all of the behind-the-scenes tooling you need to start a React app.
By using create-react-app, as a beginner you save yourself time figuring out all of the various bits of tooling you need, such as configuration files. It hides all of that detail from you.
Assuming you have Node and NPM installed. All you have to do is run three commands:
npx create-react-app my-app
cd my-app
npm startBy using create-react-app, as the tooling evolves, the maintainers of create-react-app will keep things up to date, and you won’t need to worry about how. You can just update the scripts using a single command:
npm install react-scripts@latestTherefore create-react-app is ideal for:
- Beginners
- Experienced developers who are happy with the way create-react-app works and don’t need anything more custom.
Where create-react-app fall short is if you want to have a very custom setup.
If this is the case you can either set everything up yourself, or use create-react-app to get started, then use the eject feature to convert the create-react-app based project into a configurable project.
What the heck are all these files?
If you look at the folders created by create-react-app you might be wondering what all the files are for, and why it uses so much space on disk (100Mb or more).
The reason is that is the space required for all the packages you need installed to build React apps on your machine. You’ll notice the majority of file space is in the node_modules folder, which is where install packages live.
If you didn’t use create-react-app then you’d need to install the same kinds of tools, like Webpack, so you wouldn’t save much space anyway.
As for other files that are created outside of node_modueles, there is a very good post on Reddit with some details of what they are if you are curious.
Posted by Martin Capodici
