Running npm install react-scripts adds the official tooling layer for React development, giving you a preconfigured build pipeline, testing utilities, and a clear path from zero to development server in minutes. This package is the easiest way to start a React project with zero manual Webpack or Babel configuration.
Below is a quick reference that outlines what the command does, how it works under the hood, and what you should expect across platforms and team environments.
| Command | Purpose | Default Scripts Added | Typical Environment |
|---|---|---|---|
npm install react-scripts |
Installs the Create React App tooling | react, react-dom, react-scripts | Node.js 16+, npm 8+ |
npx create-react-app my-app |
Bootstraps a new project with react-scripts preset | Full project scaffold, Git init, testing lib | Local or CI with internet access |
npm start |
Runs the development server on port 3000 | Hot module replacement, ESLint integration | Local development |
npm run build |
Creates an optimized production build in build/ | Minified JS, CSS extraction, asset hashing | Staging or production |
npm test |
Runs unit and snapshot tests via Jest | Watch mode, coverage reports, jsdom environment | Local and CI pipelines |
Install React Scripts Basics
The command npm install react-scripts pulls in the minimal dependencies required to compile React JSX, run Babel, and bundle assets with Webpack. It is designed to work out of the box without needing to manage lower-level build tools yourself. This makes onboarding and prototype development fast while keeping the developer experience consistent across teams.
When you run the install, npm adds react-scripts to your dependencies, creates a node_modules entry, and updates package.json. The scripts section of package.json is updated with standard commands such as start, build, and test. These commands read configuration inside the react-scripts package, so you do not need separate webpack configs unless you eject or override with custom setups.
Project Structure After Installation
Once the installation finishes, you get a predictable folder layout that keeps source files, build output, and tests clearly separated. This layout is enforced by react-scripts so teams can move between projects without relearning tooling conventions. Understanding this structure helps you locate configuration overrides and where to place shared utilities.
The public folder holds static assets and the main HTML template, while src contains components, styles, and application logic. The build folder is generated during production builds and should be committed only when publishing. Scripts provides convenient wrappers around Webpack Dev Server and Babel that abstract complexity but remain extensible when needed.
Development Server and Hot Reload
Starting the development server with npm start launches a Webpack Dev Server instance that serves your app over HTTP with fast refresh capabilities. You get live reloading for component changes, useful debugging tooling, and sensible defaults for polyfills and JSX transforms. This local server also provides clear error overlays and warnings in the console to accelerate debugging cycles.
During active development, you can add environment variables prefixed with REACT_APP to customize behavior without editing config files. The hot module replacement feature preserves component state across edits, which improves productivity on larger components and forms. Most teams use this mode daily until they prepare a production bundle.
Production Builds and Performance
Running npm run build triggers a production optimization pipeline that minifies JavaScript and CSS, performs tree shaking, and generates static assets ready for hosting. The output is placed in the build directory and includes hashed filenames to maximize long-term caching. These optimizations reduce payload size and improve load times for end users across diverse network conditions.
Because react-scripts configures Webpack with performance budgets and image optimization, you get Lighthouse-friendly defaults without manual tuning. For most consumer applications, this build step delivers best practices in security, accessibility, and responsiveness out of the box. You can customize the underlying Webpack and Babel settings if advanced optimizations are required.
Best Practices and Maintenance
- Keep react-scripts in dependencies, not devDependencies, to match the runtime environment used by most hosting platforms.
- Pin your version range in package.json to avoid unexpected breaking updates during routine installs.
- Run tests in CI after installing or upgrading react-scripts to catch configuration mismatches early.
- Use environment variables for feature flags and API endpoints to simplify deployments across environments.
- Review release notes before upgrading to assess changes to Webpack and Babel configurations that may affect your build.
FAQ
Reader questions
What happens if I run npm install react-scripts in a project that already has node_modules?
npm will update react-scripts and its dependencies to the latest compatible version based on your package.json version range, while leaving other packages untouched unless they conflict.
Can I use TypeScript with react-scripts without ejecting?
Yes, you can add TypeScript by renaming files to .tsx and installing types, as react-scripts includes built-in TypeScript support without requiring ejection.
How do environment variables work with react-scripts in development and build?
Environment variables prefixed with REACT_APP are embedded at build time, while Node.js-specific variables are available only in development via the dev server, helping keep secrets out of the client bundle.
What should I do if npm start fails on port 3000?
You can either stop the process using port 3000 or update the PORT environment variable to use a different port before starting the development server.