React & Modern Frontend (445 Qs)•Part 11: Legacy Architecture, Migration Patterns & Historical Internals (354 - 445)
What is CRA and its benefits?
⚠️ OUTDATED: Create React App (CRA) is no longer actively maintained and is not recommended for new projects as of 2024+.
yaml
**Modern Alternatives:** Use **Vite** (for SPAs) or **Next.js** (for full-stack/SSR) instead. See recommended setup commands at the end of this answer.
---
**Historical Context:**
The `create-react-app` CLI tool allows you to quickly create & run React applications with no configuration step.
Let's create Todo App using _CRA_:
console
# Installation
$ npm install -g create-react-app
# Create new project
$ create-react-app todo-app
$ cd todo-app
# Build, test and run
$ npm run build
$ npm run test
$ npm start
yaml
It includes everything we need to build a React app:
1. React, JSX, ES6, and Flow syntax support.
2. Language extras beyond ES6 like the object spread operator.
3. Autoprefixed CSS, so you don’t need -webkit- or other prefixes.
4. A fast interactive unit test runner with built-in support for coverage reporting.
5. A live development server that warns about common mistakes.
6. A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
---
**Modern Alternatives (Recommended 2026):**
**1. Vite (Best for SPAs):**
console
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev
markdown
- Lightning-fast HMR (Hot Module Replacement)
- Modern ESM-based development
- Optimized production builds with Rollup
**2. Next.js (Best for full-stack/SSR):**
console
npx create-next-app@latest my-app
cd my-app
npm run dev
markdown
- Server-side rendering and App Router
- Server Components and Server Actions
- Built-in routing, API routes, and optimizations
**3. Remix (Alternative for full-stack):**
- Web fundamentals-first approach
- Excellent performance and DX
- Progressive enhancement