There are 100,000 different ways to setup and configure a react app. What I’m going to cover today is the method I think is by far the easiest for getting an app and full development environment up and running in minutes so you get to cranking out actual content.

Creating a new app can be done with this single command:

Replace <appName> with the name of your choice and you have yourself a brand new shiny react app!

Your new app has three npm commands pre-configured for running/building your app

npm start

This command will start up a development server on port 3000 and automatically open a browser tab in your default browser pointed to http:\localhost:3000. The site will be automatically re-compile and refresh your page when you modify and save a file in your project.

npm run build

This command will compile and minimize your project into static scripts which can be deployed to production.

npm test

This command starts the test runner. The test runner will execute tests automatically each time you save a file.

The real benefit of create-react-app is that it installs and pre-configures several tools that are typical in a react application. Some of those tools include

• Babel – javascript transpiler
• Express – for hosing a dev server
• ESLint – linter that nudges you to write clean code
• Webpack – used to build your app into a single static js file
• Jest – testing framework

These are the major packages, but there are several others.

Rather than define each of these packages as individual references, the entire bundle is tied together in a single package named react-scripts. This single package does all the major lifting for your app. It handles all the configuration and execution and tucks it away so you can get to generating content.

For a deeper dive into what’s happening under the hood read “Create-React-App: A Closer Look” by Nitish Dayal.

Since the meat of the application is encapsulated by react-scripts, all you need to do is update the react-scripts package to get newer versions.

The easiest way to update the package is by bumping the version number set in package.json and running npm install. A pretty detailed changelog is maintained on the create-react-app github repo and it is recommended that you consult this before you upgrade. The changelog identifies breaking changes and also details migration paths for each version.

The create-react-app command provides a parameter named –template that allows you to specify a template to use when generating the app.

The template applies additional functionality you may want in your app such as typescript or Redux support. You can find a vast library of templates on npm by searching for cra-template-*.

As your app matures, you will probably reach the point where you want to have more control over all the configurations. create-react-app provides one more command that unpacks everything in react-scripts so you can have full control.

All the documentation and the command itself when you run it make it clear that running eject is a one way street and that you can’t undo it (of course, if your project is complex enough to warrant running eject, I sincerely hope you are using source control!)

• https://create-react-app.dev/
• https://create-react-app.dev/docs/getting-started/
• https://reactjs.org/docs/create-a-new-react-app.html#create-react-app
• https://www.npmjs.com/search?q=cra-template-*&ranking=popularity
• https://github.com/nitishdayal/cra_closer_look
• https://create-react-app.dev/docs/updating-to-new-releases/
• https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md
• https://create-react-app.dev/docs/available-scripts#npm-run-eject`