Everything you need to know about react-scripts

Written by Ibrahima Ndaw✏️

In the past, creating a React app was a painful process. You had to slog through a lot of configuration before you could get your hands dirty and develop something meaningful.

Fortunately, today we have Create React App, a handy module that comes with an outstanding configuration and a scripts command that makes it much easier to build React applications.

In this guide, we’ll give an overview of react-scripts, compare a few different types of scripts, and describe how create-react-app dramatically streamlines the React development process. Let’s dive in!

What is a script?

In programming, a script is basically a list of instructions that dictates to another program what to do. React is no exception; it has scripts to do things.

create-react-app ships with four main scripts, each of which we’ll explore later. But for now, we’ll focus on where to find these scripts.

In React apps, scripts are located in the package.json file. This file has some default scripts, but it’s still possible to edit them.

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

As you can see, a fresh React app comes with four scripts that use the package react-scripts.

Now that we know what a script is and where to find them, let’s dive into each one and explain what it does to a React app.

start

React uses Node.js on development to open the app on http://localhost:3000, thus the start script enables you to start the server.

You can run the start script command on the terminal with either npm or yarn.

    yarn start

Or, if you’re using npm:

    npm start

This command will not only start the server, but it will also react and display the latest version each time a change occurs. In addition, it will show lint errors on the terminal (console) when it fails to start the server in the form of meaningful error messages.

test

create-react-app uses Jest as a test runner. The test script enables you to launch the test runner in interactive watch mode. I won’t dive too deep into testing React apps, but keep in mind that any file with .test.js or .spec.js extensions will be executed when the script is launched.

The test script can be run on the terminal with the following commands.

    yarn test

npm:

    npm test

build

React is modular, which is why you can create several files or components if you want to. These separate files need to be merged or bundled to be precise in one single file.

That’s one of the major benefits of the build script. The other is performance; as you know, a development mode is not optimized. And React uses the build script to ensures that the finished project is bundled, minified and optimized with best practices.

The script can be run with the following commands.

    yarn build

npm:

    npm run build

There are some additional options that can be passed to the script. See the docs for a deeper dive on how to enhance your build script.

eject

The create-react-app documentation characterizes this script as a “one-way operation” and warns that “once you eject, you can’t go back!”

create-react-app comes with an excellent configuration and helps you build your React app with the best practices in mind to optimize it. However, running the eject script will remove the single build dependency from your project. That means it will copy the configuration files and the transitive dependencies (e.g.,Webpack, Babel, etc.) as dependencies in the package.json file. If you do that, you’ll have to ensure that the dependencies are installed before building your project.

After running the eject command, it won’t be possible to run it again since all scripts will be available except the eject one. Use this command only if you need to. Otherwise, stick with the default configuration. It’s better, anyway.

To run the command on the terminal, type the following command.

    yarn eject

npm:

    npm run build

Conclusion

I hope this guide shed some light on the amazing configuration of Create React App. Not only does it come with useful scripts that can help make any developer’s life easier, but some commands come with flexible options that enable you to fit the scripts to the unique needs of your project.

---

Full visibility into production React apps

Debugging React applications can be difficult, especially when users experience issues that are difficult to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket is like a DVR for web apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — start monitoring for free.

---

The post Everything you need to know about react-scripts appeared first on LogRocket Blog.