What are React scripts? A developer’s guide

If you’ve ever created a React app using Create React App (CRA), you’ve used react-scripts. But what exactly are these scripts doing behind the scenes? In this guide, we’ll break down what react-scripts is, what each script does, and when you might need to customize or replace it.

What is react-scripts?

react-scripts is an NPM package that ships with Create React App (CRA). It contains the configuration and scripts needed to run, build, test, and lint a React application. Rather than writing and maintaining Webpack, Babel, or ESLint config files yourself, CRA relies on react-scripts to handle that complexity under the hood.

When you create a new React app using CRA:

npx create-react-app my-app

CRA installs react-scripts and wires up the default scripts in your package.json:

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

What do the commands do?

npm start

• Runs the development server using Webpack Dev Server
• Enables hot module replacement (HMR)
• Uses Babel and environment variables (from .env)
• Opens your app in the default browser

npm run build

• Compiles your app for production
• Minifies JavaScript and CSS
• Generates static files in the build/ directory
• Optimizes performance (tree-shaking, compression)

npm test

• Runs tests using Jest
• Watches files by default
• Supports coverage reports and mock testing

npm run eject

• Copies all configurations and dependencies into your project
• Gives full control over Webpack, Babel, ESLint, etc.
• Irreversible — there’s no “undo”

Where does react-scripts fit in CRA?

Create React App scaffolds the project structure. But it’s react-scripts that runs the app, builds the bundle, and handles all the heavy lifting.

CRA without react-scripts wouldn’t work unless you manually replaced every underlying configuration — which is exactly what happens when you eject.

When to override or replace react-scripts

Sometimes, the abstraction is limiting. You might need to:

• Customize Webpack loaders or aliases
• Use different Babel plugins
• Change ESLint behavior

You have three options:

1. Eject

npm run eject

• Full control, but complex and irreversible

2. Override without ejecting

• Use libraries like:
  • craco (Create React App Configuration Override)
  • react-app-rewired
• These wrap react-scripts and let you inject custom config

3. Replace entirely

• If CRA no longer fits your needs, consider:
  • Vite
  • Next.js
  • Parcel

Common errors and how to fix them

'react-scripts' is not recognized as a command

• Usually caused by a missing node_modules
• Fix:

rm -rf node_modules
rm package-lock.json
npm install

Build fails after package update

• Check if your react-scripts version matches your React version
• Avoid manually upgrading react-scripts without reviewing the changelog

Is Create React App and react-scripts still relevant?

Yes — for beginners, learning projects, and quick prototypes, CRA + react-scripts offers a zero-config way to build with React. But modern alternatives like Vite and Next.js are faster, more flexible, and more future-proof for larger applications.

Conclusion

react-scripts is what powers every CRA-based React app. It handles bundling, testing, linting, and more without exposing complex tooling. If you’re just starting, it’s a great way to focus on learning React itself. As your app grows, you can choose to override or move beyond it.

FAQs