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

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

Houssein Djirdeh

React 是一个开源库，可让您更轻松地构建界面。此学习路线将介绍生态系统中的不同 API 和工具，您应考虑使用它们来提高应用的性能和易用性。

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

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

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

您将学到什么？

本学习路线中的教程不关注以下内容：

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

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

创建 React 应用

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

在命令行 shell 上，您只需运行以下命令来创建新应用：

npx create-react-app app-name

注意 ：npx 是一个软件包运行程序，使用 npm 5.2.0 或更高版本自动安装。它简化了管理软件包涉及的很多过程（包括运行 create-react-app 等 CLI 命令），而无需在机器上全局安装这些软件包。如需了解详情，请参阅 npx: an npm package runner 简介。

命令执行完毕后，您可以使用以下命令导航到并运行应用：

cd new-app
npm start

以下嵌入内容展示了新引导的 CRA 应用的目录结构和实际网页。

注意 ：虽然 CRA 让构建 React 应用变得轻而易举，但您可以通过许多不同的方式开始使用 React 构建网站。自述文件中的“热门替代方案”涵盖了不同的用例和选项。

CRA 使用多个配置文件和构建脚本来设置 webpack 和 Babel 构建流程，其中包含用于测试的基本 Jest 设置。为了简化用户操作，这些文件处于隐藏状态，在您从 CRA 中弹出之前将无法访问。最好始终尽可能避免移除，因为这意味着所有这些配置文件都是您自己的源代码，这可能会难以管理。

新 CRA 应用的目录结构仅包含您为了运行您的应用而实际上需要修改的文件。CRA 文档详细说明了这一点。

后续操作

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

• 使用 React.lazy 和 Suspense 拆分代码
• 使用 reCAPTCHA 窗口虚拟化大型列表
• 使用 Workbox 创建 React App 中的预缓存
• 使用 reCAPTCHA 预渲染路由
• 使用 Create React App 添加 Web 应用清单
• 使用 reCAPTCHA 和 eslint-plugin-jsx-a11y 进行无障碍功能审核