React-Scripts Start in React

Building a React application from scratch is technically possible, but you have to create all the files and adjust the configuration, which can be time-consuming. So instead, you can use create-react-app, which provides a friendly environment for developing your React app. It also includes scripts and configurations that you can use to start the development server, enable hot reloading, and other essential features.

react-scripts in create-react-app

Installing the create-react-app package allows you to set up a fully capable React application with one command. As a developer, you only have to type npm run start into the command line to create a live application on your localhost server. The basic create-react-app configuration also includes a whole set of scripts necessary to run an application. It is configured this way to save beginners the trouble of configuring projects themselves. However, react-scripts can be customized in the package.json file.

react-scripts start

To execute this script, run npm run start in your command line. You can also use the shorthand command npm start. It tells create-react-app to set up a development environment, start a local server, and a hot module reloading.

Your package.json file should include a scripts object, with key-value pairs that reference the script name and a reference for execution. This is merely an easier way to tell React to execute the npm-run-all -p watch-css start-js command, which performs multiple actions. In this case, npm run start triggers the execution of two scripts: watch-css and start-js. The former ensures that .scss files are translated to regular .css files, and your style changes are automatically reflected in your application. The latter tells React to set up the application in development mode and use localhost:3000 to host it.

Customization

npm start is simply a command. You can customize its actions if needed. For instance, you can configure the localhost port for hosting the application. Here’s an example:

'scripts': {
  'start': 'set PORT=8000 && react-scripts start',
  'build': 'react-scripts build',
  'test': 'react-scripts test',
  'eject': 'react-scripts eject'
}

Here we explicitly tell the script to use the localhost:8000 port instead of the default port.

You can also run other scripts by entering npm run scriptName into the command line. If you’re running a create-react-app application and can’t figure out what a script does, look into the package.json file.