Create React App Scripts

5.0.1 · maintenance · verified Sun Apr 19

react-scripts is the core package underpinning Create React App (CRA), providing the fundamental configuration and scripts (start, build, test, eject) for React applications without requiring manual Webpack, Babel, ESLint, or Jest setup. The current stable version is 5.0.1, released in April 2022. Historically, major versions were released approximately annually, with maintenance patches in between. Key differentiators include its 'zero-configuration' approach, abstracting away complex build tooling, and offering a consistent development experience. While highly popular for rapid prototyping and learning, Create React App, and by extension `react-scripts`, is now in a maintenance state and is no longer recommended for new projects, which are encouraged to use alternative build tools like Vite or Next.js.

Common errors

Warnings

Install

Quickstart

Demonstrates how to initialize a new Create React App project using `npx create-react-app` and how to use the `react-scripts` CLI commands (`start`, `build`, `test`) for common development workflows, along with a minimal TypeScript React component example.

// Create a new React project using Create React App (this installs react-scripts)
// This command initializes a new project with react-scripts as a dependency.
// react-scripts itself is not typically imported into application code directly.
// The primary interaction is via CLI commands managed by npm/yarn scripts.

// 1. Initialize a new project with TypeScript template (recommended for new CRA projects)
// npx create-react-app my-new-app --template typescript

// (Alternatively, for JavaScript projects:)
// npx create-react-app my-new-app

// 2. Navigate into the newly created project directory
// cd my-new-app

// 3. Start the development server
// npm start
// (or yarn start)

// 4. Build the project for production deployment
// npm run build
// (or yarn build)

// 5. Run tests
// npm test
// (or yarn test)

// Example of a minimal component inside src/App.tsx after project creation:
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App(): JSX.Element {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://react.dev"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

view raw JSON →