# Create React App — Zero-Config React Project Scaffolding

> The official scaffolding tool for React applications. Generates a pre-configured project with Webpack, Babel, ESLint, and a dev server so you can start coding immediately without touching build config.

## Install

Save as a script file and run:

# Create React App — Zero-Config React Project Scaffolding

## Quick Use
```bash
npx create-react-app my-app
cd my-app
npm start
```

## Introduction
Create React App (CRA) is an officially supported way to create single-page React applications. It offers a zero-configuration setup that bundles Webpack, Babel, ESLint, and a development server into a single dependency, letting developers focus on writing React code instead of managing build tooling.

## What Create React App Does
- Generates a complete React project structure with a single command
- Bundles Webpack, Babel, and PostCSS behind a single `react-scripts` dependency
- Provides a fast-refresh development server with hot module replacement
- Includes a production build pipeline that minifies, hashes, and code-splits automatically
- Supports TypeScript, CSS Modules, environment variables, and service workers out of the box

## Architecture Overview
CRA wraps all build configuration inside the `react-scripts` package. Running `npm start` launches a Webpack dev server with Babel transpilation and Fast Refresh enabled. Running `npm run build` produces an optimized static bundle in the `build/` directory. The design hides config files from the project root; running `npm run eject` copies all configuration into the project for manual control, but this is a one-way operation.

## Self-Hosting & Configuration
- No installation beyond Node.js 14+ is required; `npx` fetches the latest version on-the-fly
- Environment variables prefixed with `REACT_APP_` are embedded at build time via Webpack DefinePlugin
- Proxy API requests during development by adding a `proxy` field to `package.json`
- TypeScript support is activated by passing `--template typescript` during project creation
- Custom configuration without ejecting is possible through tools like CRACO or react-app-rewired

## Key Features
- True zero-config: no Webpack, Babel, or ESLint files to maintain
- Fast Refresh for near-instant feedback during development
- Automatic code splitting via dynamic `import()` statements
- Built-in testing setup with Jest and React Testing Library
- PWA support with a generated service worker and web app manifest

## Comparison with Similar Tools
- **Vite** — significantly faster dev server using native ES modules; CRA relies on Webpack bundling
- **Next.js** — adds server-side rendering, API routes, and file-based routing; CRA is client-side only
- **Parcel** — zero-config bundler that can scaffold React projects with less tooling opinion
- **Turbopack** — Webpack successor promising faster builds; still maturing compared to CRA's stable ecosystem

## FAQ
**Q: Is Create React App still maintained?**
A: The repository is in maintenance mode. The React team recommends frameworks like Next.js or Remix for new projects, but CRA remains functional for client-only SPAs.

**Q: Can I add server-side rendering to a CRA project?**
A: CRA does not support SSR natively. You would need to eject or migrate to a framework like Next.js for SSR capabilities.

**Q: What does ejecting do?**
A: Ejecting copies all hidden Webpack, Babel, and ESLint configuration files into your project, giving you full control but removing the ability to receive future react-scripts updates.

**Q: How do I customize the build without ejecting?**
A: Tools like CRACO and react-app-rewired let you override CRA's internal Webpack and Babel config without ejecting.

## Sources
- https://github.com/facebook/create-react-app
- https://create-react-app.dev/

---
Source: https://tokrepo.com/en/workflows/asset-a4c1ed13
Author: Script Depot