What exactly is the 'react-scripts start' command?

Question

I've been working with a React project using create-react-app and I have two options to start the project:

First way:

npm run start with the definition at the package.json like this:

"start": "react-scripts start",

Second way:

npm start

What is the difference between these two commands? And, what is the purpose of the react-scripts start?

I tried to find the definition, but I just found a package with this name. I still don't know what is the use of this command?

Answer 1

create-react-app and react-scripts

react-scripts is a set of scripts from the create-react-app starter pack. create-react-app helps you kick off projects without configuring, so you do not have to setup your project by yourself.

react-scripts start sets up the development environment and starts a server, as well as hot module reloading. You can read here to see what everything it does for you.

with create-react-app you have following features out of the box.

• React, JSX, ES6, and Flow syntax support.
• Language extras beyond ES6 like the object spread operator.
• Autoprefixed CSS, so you don’t need -webkit- or other prefixes.
• A fast interactive unit test runner with built-in support for coverage reporting.
• A live development server that warns about common mistakes.
• A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
• An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.
• Hassle-free updates for the above tools with a single dependency.

npm scripts

npm start is a shortcut for npm run start.

npm run is used to run scripts that you define in the scripts object of your package.json

if there is no start key in the scripts object, it will default to node server.js

Sometimes you want to do more than the react scripts gives you, in this case you can do react-scripts eject. This will transform your project from a "managed" state into a not managed state, where you have full control over dependencies, build scripts and other configurations.