创建React App：快速获取React项目

Create React App (CRA) 速览

Facebook 推出的命令行工具 Create React App (CRA) 简化了 React 项目的创建过程。它预配置了 webpack 构建流程，免去了搭建复杂构建管线的麻烦。

CRA 可通过 npm 或 Yarn 运行，它会设置一个包含 react-scripts 包的项目结构，其中包含所有配置和构建脚本。该工具还包括一个本地开发服务器，并支持 ES6 和 ES7 特性、CSS 模块、Jest 单元测试和 ESLint。

使用 npm run build 可以创建生产环境包，生成一个优化后的应用程序版本，准备部署。它还支持环境变量、代码分割、TypeScript、渐进式 Web 应用以及使用 web vitals 进行性能衡量。

如果 CRA 提供的功能不足，用户可以选择运行 npm run eject，这会将 webpack 配置和构建脚本复制到项目中，允许进行自定义。或者，用户可以 fork react-scripts 包并维护自己的分支，添加所需的功能。

Create React App 的工作原理

Create React App 是一个独立工具，可以使用 npm 或 Yarn 运行。只需几条命令即可在一个新文件夹中生成并运行一个新的 React 应用：

使用 npm：

<code class="language-bash">npx create-react-app new-app
cd new-app
npm start</code>

使用 Yarn：

<code class="language-bash">yarn create react-app new-app
cd new-app
yarn start</code>

Create React App 将设置以下项目结构：

<code>new-app
├── .gitignore
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock</code>

它还会向您的项目添加一个 react-scripts 包，其中包含所有配置和构建脚本。换句话说，您的项目依赖于 react-scripts 包，而不是 create-react-app 本身。安装完成后，您可以启动开发服务器并开始处理您的项目。

主要功能

• 本地开发服务器: npm start 将启动一个 webpack 开发服务器，包含一个观察程序，会在您更改内容后自动重新加载应用程序。从 v4 开始，Create React App 支持 React 的快速刷新作为热模块替换的替代方案。

• ES6 和 ES7 支持: 使用 babel-preset-react-app 预设支持 ES6 和 ES7 特性，例如 async/await、对象 rest/spread 属性、动态 import() 等。

• 资源导入: 可以从 JavaScript 模块导入 CSS 文件、图像或字体。构建应用程序后，Create React App 会将这些文件复制到构建文件夹。

• 样式: 支持导入 CSS 文件，构建时会将所有 CSS 文件合并到一个包中。支持 CSS 模块（*.module.css）和 Sass（.scss 文件，需要单独安装 node-sass）。

• 单元测试: npm test 使用 Jest 运行测试，并启动一个观察程序，以便在您更改内容时重新运行测试。

• ESLint: 在开发过程中，代码将通过 ESLint 进行静态代码分析。

• 创建生产环境包: npm run build 创建一个优化的生产环境包。

• 部署: 生成的构建结果是静态文件，可以方便地部署到各种环境。

• 环境变量: 支持使用以 REACT_APP_ 开头的环境变量。

• 反向代理: 可以通过在 package.json 中配置 proxy 字段来代理请求。

• 代码分割: 支持使用动态 import() 进行代码分割。

• TypeScript 支持: 可以使用 --template typescript 选项创建 TypeScript 项目。

• 渐进式 Web 应用 (PWA) 支持: 可以使用 --template cra-template-pwa 或 --template cra-template-pwa-typescript 选项创建 PWA 项目。

• Web Vitals: 使用 web-vitals 库跟踪 Web Vitals 指标。

放弃使用 CRA

如果 CRA 的功能不足，可以使用 npm run eject 将 webpack 配置和构建脚本复制到项目中，以便自定义。或者，可以 fork react-scripts 包并维护自己的分支。

总结

Create React App 是开始新 React 项目的便捷工具，它简化了构建流程，并提供了丰富的功能。无论是快速原型还是大型项目，它都能节省大量开发时间。

(FAQs 部分略去，因为与文章内容重复，且篇幅过长。)

以上是创建React App：快速获取React项目的详细内容。更多信息请关注PHP中文网其他相关文章！