使用入门：优化您的 React 应用

想要让您的 React 网站尽可能快速且易于访问？您来对地方了！

Houssein Djirdeh

React 是一个开源库，可让您更轻松地构建界面。本学习路径将介绍该生态系统中您应考虑使用的一些不同 API 和工具，以便提升应用的性能和易用性。

本指南将为您介绍如何设置和运行 React 应用。本部分的所有其他指南都将介绍有关优化 React 应用速度或无障碍功能的主题。

为什么搜索渠道报告非常实用？

有很多内容介绍了如何构建快速可靠的应用，但介绍如何构建快速可靠的 React 应用的内容并不多。这些指南从 React 应用的角度涵盖了所有这些内容，其中仅提及了特定于 React 生态系统的库、API 和功能。

您将学到什么？

本学习路线中的教程不会重点介绍以下内容：

• 如何使用 React
• React 的后台运作方式

虽然我们会在需要时提及这两个概念，但本部分中的所有指南和 Codelab 都将重点介绍如何构建快速且易于访问的 React 网站。因此，必须具备 React 基础知识。

Create React App

创建 React 应用 (CRA) 是开始构建 React 应用的最简单方法。它提供了一个默认设置，其中包含许多内置的核心功能，包括包含模块捆绑器 (webpack) 和转译器 (Babel) 的构建系统。

在命令行 Shell 中，您只需运行以下命令即可创建新应用：

npx create-react-app app-name

注意：npx 是一个软件包运行程序，会随 npm 5.2.0 或更高版本自动安装。它简化了与管理软件包相关的许多流程（包括运行 create-react-app 等 CLI 命令），而无需在您的机器上全局安装这些软件包。如需了解详情，请参阅介绍 npx：npm 软件包运行程序。

命令执行完毕后，您可以使用以下命令前往并运行应用：

cd new-app
npm start

以下嵌入显示了新启动的 CRA 应用的目录结构和实际网页。

注意 ：尽管 CRA 让构建 React 应用变得简单，但仍可以通过许多不同的方法开始使用 React 构建网站。README 中的“热门替代方案”部分介绍了不同的用例和选项。

CRA 使用多个配置文件和构建脚本来设置 webpack 和 Babel 构建流程，其中包括用于测试的基本 Jest 设置。为方便用户，这些文件会处于隐藏状态，除非您从 CRA 中弹出，否则无法访问。最好尽可能避免弹出，因为这意味着将所有这些配置文件视为自己的源代码，这可能会很难管理。

新 CRA 应用的目录结构仅包含您实际需要修改才能使用该应用的文件。CRA 文档详细介绍了这一点。

后续操作

现在，您已经了解了如何开始构建 Create React App。接下来，请通过此学习路径中的所有指南了解如何提升应用的性能和无障碍功能：

• 使用 React.lazy 和 Suspense 进行代码分块
• 使用 react-window 虚拟化大型列表
• 使用 Workbox 在 Create React App 中预缓存
• 使用 response-snap 预渲染路由
• 使用 Create React App 添加 Web 应用清单
• 使用 response-axe 和 eslint-plugin-jsx-a11y 审核无障碍功能审核