Create React App

项目简介

Create React App（简称 CRA）是 React 官方维护的零配置脚手架。执行一条命令即可生成一个可直接运行的 React 单页应用工程，webpack、Babel、ESLint 等构建工具全部预配置并隐藏，让开发者专注于业务代码。

注意：仓库 README 已明确标注 Deprecated。CRA 目前处于长期停滞状态，官方建议新项目迁移到 Start a New React Project 中列出的框架。学习教程或维护存量项目时仍可使用。

快速开始

需要本地 Node 14 及以上版本（推荐最新 LTS）。

npx create-react-app my-app
cd my-app
npm start

也可以使用 npm init react-app my-app 或 yarn create react-app my-app。启动后访问 http://localhost:3000 即可看到页面。

内置命令

• npm start：启动开发服务器，修改代码后页面自动刷新，控制台提示构建错误与 lint 警告
• npm test：以交互模式运行测试监听器，默认只跑与改动相关的用例
• npm run build：产出压缩、带 hash 与 sourcemap 的生产构建到 build 目录

生成的项目结构

my-app
├── public
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.js
    ├── App.css
    ├── index.js
    └── setupTests.js

没有复杂目录约定，只保留构建应用所需的文件。

设计理念

• 单一依赖：构建相关依赖收敛为一个包，内部整合 webpack、Babel、ESLint 等
• 无需配置：开发与生产构建都有合理默认值
• 不锁定：执行 npm run eject 可将全部配置与依赖释放到项目中，之后自行维护

开箱能力

• React、JSX、ES6、TypeScript 与 Flow 语法支持
• 对象展开等 ES6+ 语法特性
• CSS 自动加前缀
• 带覆盖率报告的交互式单元测试
• 开发服务器实时提示常见错误
• 可选的 service worker 与 web app manifest，满足 PWA 要求

适用与取舍

CRA 适合学习 React、跟随教程实践以及维护早期项目。代价是工具链按固定方式预配置，深度定制需要 eject 并自行维护配置；同时其 webpack 构建在大型项目中启动与热更新速度不及新一代工具。新项目建议优先考虑官方推荐的框架方案。