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

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

Houssein Djirdeh

React 是一个开源库，可用于构建界面 。此学习路线将涵盖 来提升性能和 应用的易用性

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

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

有很多内容说明了如何构建快速可靠的 但介绍如何构建快速可靠的 React 应用。这些指南从 React 的角度介绍上述内容 其中只有 还提到了 React 生态系统

您将学到什么？

本学习路线中的教程不侧重于：

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

虽然我们会在需要的时候涉及这两个概念， 而本节中的 Codelab 将重点介绍如何快速构建 React 网站。因此，关于 React 的基本知识 必需。

创建 React 应用

Create React App (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 使用多个配置文件和 build 脚本来设置 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 审核无障碍功能审核