Create React App

Create React App (CRA) was the official zero-config way to start a React project for years. This lesson explains what CRA provided, how to recognize legacy CRA projects, and why the React team now recommends modern alternatives like Vite.

What Create React App Did

CRA wrapped Webpack, Babel, and a dev server into a single create-react-app command. Running npx create-react-app my-app scaffolded a project with hot reload, Jest testing, and production builds without manual configuration.

As of 2023, the React documentation no longer recommends CRA for new projects. Maintenance slowed, build times were slower than Vite, and the underlying Webpack setup was harder to customize. Existing CRA apps still work, but greenfield projects should use Vite or a meta-framework like Next.js.

# Legacy CRA scaffold (not recommended for new projects)
npx create-react-app my-app
cd my-app
npm start

CRA uses npm start on port 3000. New projects should prefer npm create vite@latest instead.

CRA Project Layout

my-app/
  public/
    index.html
  src/
    App.js
    index.js
  package.json

public/index.html is the HTML shell; %PUBLIC_URL% references public assets.
src/index.js calls ReactDOM.createRoot and renders <App />.
CRA hides Webpack config unless you eject with npm run eject (irreversible).
Migrating to Vite involves changing entry points, env variable prefixes, and build scripts.

CRA vs Modern Tooling

How Create React App compares to Vite for new React projects.

Aspect	CRA (legacy)	Vite (recommended)
Bundler	Webpack	Rollup + esbuild
Dev speed	Slower cold start	Near-instant HMR
Status	Maintenance mode	Actively maintained
Config	Hidden unless ejected	Simple `vite.config.js`
Env vars	`REACT_APP_*`	`VITE_*`
Recommendation	Maintain existing apps	Use for new SPAs

Why CRA Is Considered Legacy

The React docs explicitly list CRA under deprecated tooling for new apps. Build performance, ESM-native tooling, and easier customization drove the community toward Vite, Parcel, and framework-specific CLIs.

Slow dev server startup on large codebases.
Difficult to customize without ejecting.
No first-class support for React Server Components (use Next.js/Remix).
Official recommendation shifted to Vite and meta-frameworks.

Maintaining or Migrating CRA Projects

If you inherit a CRA codebase, you can keep maintaining it or migrate incrementally. Tools like @craco/craco or react-app-rewired customize CRA without ejecting. For long-term projects, a Vite migration guide from the Vite docs is often worth the one-time effort.

Common Mistakes

Starting new projects with CRA because old tutorials still reference it.
Ejecting CRA unnecessarily — it exposes hundreds of config files permanently.
Assuming CRA is required for React — it was always just one scaffolding option.
Confusing CRA deprecation with React itself being deprecated.

Key Takeaways

CRA scaffolded React apps with Webpack but is no longer recommended for new projects.
Existing CRA apps still run; plan migration to Vite for better DX.
Use Vite or Next.js for new React applications in 2024+.
Env variables in CRA use the REACT_APP_ prefix; Vite uses VITE_.

Pro Tip

When reading older blog posts, check the publication date. Anything recommending CRA for new apps after 2023 is outdated.