使用入门：优化您的 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：一个 npm 软件包运行程序。

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

cd new-app
npm start

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

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

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

新 CRA 应用的目录结构仅包含您实际需要修改才能使用该应用的文件。CRA 文档对此进行了详细说明。

后续操作

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

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