开始使用:优化你的 React 应用

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

React 是一个开源库,可以更轻松地构建 UI。本学习路径将涵盖生态系统内不同的 API 和工具,你应该考虑使用它们来提高应用程序的性能和可用性。

本指南将向你展示如何启动并运行 React 应用程序。本节中的每个其他指南都将涵盖优化 React 应用的速度或无障碍性的主题。

为什么这很有用?

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

你将学到什么?

本学习路径中的教程侧重于

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

尽管在需要时会涉及这两个概念,但本节中的所有指南和代码实验室都将侧重于如何构建快速且易于访问的 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,请通过本学习路径中的所有指南了解如何提高应用程序的性能和无障碍性