InterviewHubPRO
Section Overview
Q378

Question 378 of 445

Part 11: Legacy Architecture, Migration Patterns & Historical Internals (354 - 445)

85%
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