从零开始构建 React 应用

如果你的应用存在现有框架无法很好满足的约束条件，你倾向于构建自己的框架，或者你只是想学习 React 应用的基础知识，你可以从零开始构建一个 React 应用。

步骤 1：安装构建工具

第一步是安装一个构建工具，例如vite、parcel 或 rsbuild。这些构建工具提供了打包和运行源代码的功能，提供了用于本地开发的开发服务器以及用于将应用部署到生产服务器的构建命令。

Vite

Vite是一个构建工具，旨在为现代 Web 项目提供更快、更精简的开发体验。

npm create vite@latest my-app -- --template react-ts

Vite 是固执己见的，并提供了开箱即用的合理默认值。Vite 拥有丰富的插件生态系统，支持快速刷新、JSX、Babel/SWC 和其他常见功能。请参阅 Vite 的React 插件 或 React SWC 插件以及React SSR 示例项目以开始使用。

Vite 已经在我们其中一个 推荐框架中被用作构建工具：React Router。

Parcel

Parcel 将出色的开箱即用开发体验与可扩展的架构相结合，可以将你的项目从刚刚起步带到大规模生产应用。

npm install --save-dev parcel

Parcel 开箱即用地支持快速刷新、JSX、TypeScript、Flow 和样式。请参阅Parcel 的 React 配方以开始使用。

Rsbuild

Rsbuild是一个由 Rspack 驱动的构建工具，为 React 应用程序提供无缝的开发体验。它配备了精心调校的默认值和性能优化，开箱即用。

npx create-rsbuild --template react

Rsbuild 内置支持 React 功能，如快速刷新、JSX、TypeScript 和样式。请参阅Rsbuild 的 React 指南以开始使用。

步骤 2：构建常见的应用模式

上面列出的构建工具最初只提供一个仅限客户端的单页应用（SPA），但不包含针对路由、数据获取或样式等常见功能的任何进一步解决方案。

React 生态系统包含许多解决这些问题的工具。我们列出了一些广泛使用的工具作为起点，但如果其他工具更适合你，请随意选择。

路由

路由决定了当用户访问特定 URL 时显示什么内容或页面。你需要设置一个路由器来将 URL 映射到应用的不同部分。你还需要处理嵌套路由、路由参数和查询参数。路由器可以在你的代码中配置，也可以根据你的组件文件夹和文件结构来定义。

路由器是现代应用的核心部分，通常与数据获取（包括为整个页面预取数据以实现更快加载）、代码分割（以最小化客户端包大小）和页面渲染方法（以决定每个页面如何生成）集成。

我们建议使用：

• React Router
• Tanstack Router

数据获取

从服务器或其他数据源获取数据是大多数应用程序的关键部分。正确地执行此操作需要处理加载状态、错误状态以及缓存获取的数据，这可能很复杂。

专门构建的数据获取库为您完成了获取和缓存数据的繁重工作，让您可以专注于应用程序需要什么数据以及如何显示它。这些库通常直接在您的组件中使用，但也可以集成到路由加载器中，以实现更快的预获取和更好的性能，也可以在服务器渲染中使用。

请注意，直接在组件中获取数据可能会导致由于网络请求瀑布流而加载时间变慢，因此我们建议尽可能在路由器加载器或服务器上预取数据！这允许在页面显示时一次性获取页面的所有数据。

如果您从大多数后端或 REST 风格 API 获取数据，我们建议使用：

• TanStack Query
• SWR
• RTK Query

如果您从 GraphQL API 获取数据，我们建议使用：

• Apollo
• Relay

代码分割

代码分割是将您的应用程序分解成可以按需加载的较小捆绑包的过程。应用程序的代码大小随着每个新功能和附加依赖项而增加。应用程序的加载速度可能会变慢，因为整个应用程序的所有代码都需要在可以使用之前发送。缓存、减少功能/依赖项以及将部分代码移至服务器运行有助于缓解加载缓慢的问题，但这些是不完整的解决方案，如果过度使用可能会牺牲功能。

同样，如果您依赖使用您框架的应用程序来分割代码，您可能会遇到加载速度比根本不进行代码分割还要慢的情况。例如，延迟加载图表会延迟发送渲染图表所需的代码，将图表代码与应用程序的其余部分分开。Parcel 支持使用 React.lazy 进行代码分割。然而，如果图表在初始渲染之后才加载其数据，那么您现在需要等待两次。这是一个瀑布流：您必须等待每个步骤依次完成，而不是同时获取图表数据并发送渲染它的代码。

按路由分割代码，当与打包和数据获取集成时，可以减少应用程序的初始加载时间以及应用程序最大可见内容渲染所需的时间（最大内容绘制）。

有关代码分割的说明，请参阅您的构建工具文档：

• Vite 构建优化
• Parcel 代码分割
• Rsbuild 代码分割

提升应用程序性能

由于您选择的构建工具仅支持单页应用程序（SPA），您将需要实现其他渲染模式，如服务器端渲染（SSR）、静态站点生成（SSG）和/或 React 服务器组件（RSC）。即使您最初不需要这些功能，将来也可能会有一些路由受益于 SSR、SSG 或 RSC。

• 单页应用 (SPA)加载单个 HTML 页面，并在用户与应用交互时动态更新页面。SPA 更容易上手，但初始加载时间可能较慢。SPA 是大多数构建工具的默认架构。
• 流式服务器端渲染 (SSR)在服务器上渲染页面，并将完全渲染好的页面发送给客户端。SSR 可以提升性能，但比单页应用更复杂，设置和维护也更困难。加上流式传输后，SSR 的设置和维护会变得非常复杂。请参阅Vite 的 SSR 指南。
• 静态站点生成 (SSG)在构建时为你的应用生成静态 HTML 文件。SSG 可以提升性能，但比服务器端渲染更复杂，设置和维护也更困难。请参阅Vite 的 SSG 指南。
• React 服务器组件 (RSC)允许你在单个 React 树中混合构建时组件、仅服务器组件和交互式组件。RSC 可以提升性能，但目前需要深厚的专业知识来设置和维护。请参阅Parcel 的 RSC 示例。

你的渲染策略需要与你的路由器集成，这样使用你的框架构建的应用就可以在每条路由级别上选择渲染策略。这将实现不同的渲染策略，而无需重写整个应用。例如，你的应用着陆页可能受益于静态生成 (SSG)，而包含内容流的页面可能最适合使用服务器端渲染。

为正确的路由使用正确的渲染策略可以减少加载第一个字节内容所需的时间 (首字节时间)、渲染第一块内容所需的时间 (首次内容绘制) 以及渲染应用中最大可见内容所需的时间 (最大内容绘制)。

还有更多…

这些只是新应用从零开始构建时需要考虑的功能的几个例子。你将会遇到的许多限制可能很难解决，因为每个问题都与其他问题相互关联，并且可能需要你在可能不熟悉的领域具备深厚的专业知识。

如果你不想自己解决这些问题，你可以 从框架开始，这些框架开箱即用地提供了这些功能。