开始:优化 React 应用

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

Houssein Djirdeh
Houssein Djirdeh

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

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

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

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

您将学到什么?

此学习路线中的教程不侧重于:

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

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

创建 React 应用

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,接下来请通过此学习路线中的所有指南,了解如何提升应用的性能和无障碍性: