Why you should use create-react-app to Scaffold your Next React App?

Update: This article is written in 2018 where create-react-app didn’t have many alternatives. In 2021 and beyond, I recommend and use vite, for scaffolding React application, it offers almost all functionalities of create-react-app with faster startup time.

Hello folks.

In this article, I am going to share why we should stop building custom webpack config and instead use create-react-app to scaffold our react application.

React is great. Out of the box, it is just a view library. The ecosystem around React is really great and it’s huge.

We have to basically pick the react compatible parts like router, state management library for building our application. This is a really tiring task.

Setting up a modern react app from scratch is not easy and it makes us lost in the process due to a lot of overwhelming choices.

React is evolving really fast. And so the tooling around it.

If you are trying to set up everything from scratch, you need to hassle with lot more things like webpack, babel which is a different world altogether.

The create-react-app helps in avoiding those hassles and enables us to focus on the application rather than the configuration.

Even though create-react-app was available to developers since 2016, I have seen many people still searching for boilerplate and trying to set up the project from scratch even in 2018. This motivated me to write about this topic.

Over the period of 2 years, the create-react-app has matured a lot and provides a lot of cool features out of the box and drop in support for some features.

Scaffolding a React project with create-react-app is super easy. No global installations of CLIs needed. If you use the recent versions on node and npm, then run

npm init react-app

If you are on the yarn team, then run

yarn create react-app

This will create a folder, with the project structure that is specified in documentation. It has some built-in scripts to develop with ease using features like auto reload, linting, error messages and building minified production ready bundle.

Before looking into the pros and cons of using create-react-app, let’s see some of the features that are provided along with it, which can work without any configuration. I will give a small subset of features and the links for the docs.

Features

As you see, create-react-app provides a lot of great features to build. In addition to that, there are a lot of advantages and some disadvantages of using create-react-app to scaffold your application.

Pros

Cons

The choices provided by create-react-app is not enough? You can easily opt-out by running

npm run eject

This will copy all the configuration files like webpack, eslint into your project and gives you choice to customize it.

As you see, using create-react-app provides you with a lot of advantages over building custom webpack config.

Hope I have given an overview of the features of create-react-app and convinced you to choose it for your next React project.

Starting a new React project? Which path are you gonna choose?

With create-react-app or custom config from scratch?

Are you using create-react-app on your existing app? Are you facing any issue with it?

Feel free to share your opinion on comments.