Setting up a React Project, when to use create-react-app, vs. a DIY approach.

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 start

By 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@latest

Therefore 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.

Still so much to learn? Scared of not keeping up?

It's often really hard to know what to learn next in the React world, where to spend your limited time as a developer, and how to keep up with all the tech changes and fads out there.

However it doesn't really have to be like that.

Focus on the core things that you really need to succeed, and build your satisfaction and career. Keep on top of it, by knowing what "it" really is.

Sign up for updates and you will get well researched and thoughtful articles that solve your problems, guide you and are based on real experience.

Sounds good? Sign up now. Just fill in your name and email below and click Subscribe:

.

Leave a Reply

Your email address will not be published. Required fields are marked *