想让您的 React 网站尽可能快速且易于访问?你来对地方了!
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,接下来请通过此学习路线中的所有指南,了解如何提升应用的性能和无障碍性: