Everything you need to know about react-scripts
Tags: react
Published: 2020-05-19 16:28:41

---
title: Everything you need to know about react-scripts
published: true
date: 2020-04-30 13:00:48 UTC
tags: react
canonical_url: https://blog.logrocket.com/everything-you-need-to-know-about-react-scripts/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/10q3h011pnfatyih0q1o.png
---
**Written by [Ibrahima Ndaw](https://blog.logrocket.com/author/ibrahimandaw/)**✏️

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](https://blog.logrocket.com/getting-started-with-create-react-app-d93147444a27/), 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.

```jsx
 "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`](https://www.npmjs.com/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.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## `start`

React uses Node.js on development to open the app on [`http://localhost:3000`](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`.

```jsx
    yarn start
```

Or, if you’re using npm:

```jsx
    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](https://jestjs.io/) 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](https://dev.to/bnevilleoneill/comparing-react-testing-libraries-2oeh), 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.

```jsx
    yarn test
```

npm:

```jsx
    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.

```jsx
    yarn build
```

npm:

```jsx
    npm run build
```

There are some additional options that can be passed to the script. See the [docs](https://create-react-app.dev/docs/production-build/) for a deeper dive on how to enhance your `build` script.

## `eject`

The [`create-react-app` documentation](https://github.com/mdx-js/mdx/tree/master/examples/create-react-app) 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.

```jsx
    yarn eject
```

npm:

```jsx
    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.](https://www2.logrocket.com/react-performance-monitoring)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/eq752g8qhbffxt3hp9t4.png)

[LogRocket](https://www2.logrocket.com/react-performance-monitoring) 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.](https://www2.logrocket.com/react-performance-monitoring)
* * *

The post [Everything you need to know about react-scripts](https://blog.logrocket.com/everything-you-need-to-know-about-react-scripts/) appeared first on [LogRocket Blog](https://blog.logrocket.com).