Skip to content
PuglieseWeb Engineering HandbookSystemDox Pages

Create React App (CRA) standards

Create React App (CRA) was React’s official scaffolding tool, maintained by Meta. The React team deprecated it on 14 February 2025; running the command now prints a deprecation notice and points at react.dev. This page documents its conventions for teams maintaining an application that already uses it — not as a starting point for new work.

CRA’s value was that it enforced a set of conventions so that developers could write application code rather than configure build tooling. Those conventions are still worth knowing, because a large number of React codebases were generated from them and still follow them.

Project structure standard

Section titled “Project structure standard”

CRA generates a standardized directory layout:

my-app/
  node_modules/
  public/
    index.html        # Single HTML entry point
    favicon.ico
    manifest.json     # PWA metadata
  src/
    App.css
    App.js            # Root component
    App.test.js       # Co-located test file
    index.css
    index.js          # Application entry point
    reportWebVitals.js
    setupTests.js     # Test framework configuration
  package.json
  README.md

Key conventions:

  • public/ — Static assets served as-is. Only index.html is required. Files here are not processed by Webpack.
  • src/ — All application source code. Only files inside src/ are processed by Webpack and included in the production bundle.
  • src/index.js — The JavaScript entry point. CRA expects this file to exist.

Build and tooling standards

Section titled “Build and tooling standards”

CRA abstracts the build configuration through the react-scripts package, which bundles:

  • Webpack — Module bundler with pre-configured loaders for JS, CSS, images, and fonts
  • Babel — JavaScript compiler with presets for JSX, modern ES syntax, and browser polyfills
  • ESLint — Linter with the eslint-config-react-app ruleset enabled by default
  • Jest — Test runner configured with JSDOM for component testing
  • PostCSS — Autoprefixer for cross-browser CSS compatibility

Script standards

Section titled “Script standards”

CRA provides four predefined npm scripts:

ScriptCommandPurpose
npm startreact-scripts startStarts the development server with hot reloading on port 3000
npm testreact-scripts testRuns Jest in interactive watch mode
npm run buildreact-scripts buildCreates an optimized production build in build/
npm run ejectreact-scripts ejectExposes all configuration files (irreversible)

Environment variable standard

Section titled “Environment variable standard”

CRA supports environment variables with a strict naming convention:

  • Variables must be prefixed with REACT_APP_ to be embedded in the build (e.g., REACT_APP_API_URL)
  • Variables are loaded from .env files, with the first file that defines a name winning. The order depends on the script: npm start reads .env.development.local, .env.local, .env.development, .env; npm run build reads .env.production.local, .env.local, .env.production, .env; npm test reads .env.test.local, .env.test, .env — deliberately skipping .env.local so that tests behave the same on every machine
  • NODE_ENV is set automatically (development, test, or production) and cannot be overridden

Testing standard

Section titled “Testing standard”
  • Test files are co-located with source files using the naming pattern *.test.js or *.spec.js
  • Tests can also be placed in a __tests__/ directory
  • Jest is configured with JSDOM, enabling DOM assertions without a browser
  • setupTests.js is automatically executed before every test suite

Import resolution standards

Section titled “Import resolution standards”
  • Absolute imports are supported by setting "baseUrl": "src" in jsconfig.json or tsconfig.json, allowing import Button from 'components/Button' instead of relative paths
  • CSS, images, SVGs, and fonts can be imported directly into JavaScript files as modules
  • CSS Modules are supported via the *.module.css naming convention

Deprecation, and what replaced it

Section titled “Deprecation, and what replaced it”

CRA v5 shipped in December 2021 and v5.0.1 in April 2022; that was the last substantive release, and react-scripts — the package that holds the build configuration — is still on 5.0.1. The create-react-app command-line package went to 5.1.0 on 15 February 2025, published alongside the deprecation announcement so that existing projects could be generated against React 19. It is not a sign of continued development.

For new projects React recommends a framework, and a build tool otherwise:

ToolDescription
Next.jsFull-stack React framework with SSR and file-based routing
React Router (v7)The routing library, paired with Vite to make a full-stack framework. Remix v2 was folded into it in November 2024 — the bundler and server runtime moved into React Router v7, and the Remix name now belongs to an unreleased, Preact-based rewrite
ExpoReact framework for universal Android, iOS and web applications with native UIs
ViteBuild tool with native ES modules and HMR; also Parcel and RSbuild

React also lists TanStack Start (in beta) and RedwoodSDK as newer full-stack frameworks. A project that only needs a bundler and a dev server — no routing, no server rendering — is the case a build tool covers on its own.

References

Section titled “References”