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

想要尽可能提高 React 网站的速度并让其更易于访问？您来对地方了！

Houssein Djirdeh

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

本指南将介绍如何快速上手使用 React 应用。 本部分的所有其他指南都将介绍有关优化 React 应用速度或无障碍功能的主题。

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

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

您将学到什么？

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

  • 如何使用 React
  • React 的底层工作原理

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

Create React App

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

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

npx create-react-app app-name

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

cd new-app
npm start

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

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

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

后续操作

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