从零搭建 React 应用

React开始-简介

从零搭建 React 应用

如果现有的框架无法满足你应用的需求，或者你更喜欢自己掌控构建过程，又或者你只是想学习 React 应用的基础知识，那么从零开始构建 React 应用是一个不错的选择。

考虑使用框架 {/consider-using-a-framework/}

从零开始使用 React 是一种简单的入门方式，但需要注意的是，这通常相当于构建自己的临时框架。随着需求的变化，你可能会遇到一些框架层面的问题，而我们推荐的框架已经为这些问题提供了成熟且受支持的解决方案。

例如，如果将来你的应用需要支持服务端渲染（SSR）、静态站点生成（SSG）或 React 服务端组件（RSC），你将需要自行实现这些能力。同样，如果你希望使用未来 React 的新特性，而这些特性需要在框架层面进行集成，你也必须自己动手实现。

我们推荐的框架还能帮助你构建性能更好的应用。例如，减少或消除网络请求中的瀑布效应可以显著提升用户体验。在构建小型项目时，这可能不是首要考虑的事项，但如果你的应用获得了用户，性能优化就会变得重要起来。

选择从零搭建的方式可能会让获取社区支持变得困难，因为你开发路由、数据获取和其他功能的方式是独一无二的。只有当你能够独立解决这些问题，或者你确信自己永远不需要这些功能时，才应该选择这个选项。

查看推荐框架列表，请参见创建一个 React 应用。

步骤 1：安装构建工具 {/step-1-install-a-build-tool/}

第一步是安装一个构建工具，例如 Vite、Parcel 或 Rsbuild。这些构建工具负责打包和运行你的源代码，提供用于本地开发的开发服务器，并生成可用于生产环境部署的构建命令。

Vite {/vite/}

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

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

Vite 采用约定优先的设计，开箱即用，提供了合理的默认配置。它拥有丰富的插件生态系统，能够支持快速热更新（HMR）、JSX、Babel/SWC 等常见功能。你可以查看 Vite 的 React 插件、React SWC 插件以及 React 服务端渲染示例项目来开始使用。

Vite 已经作为构建工具被我们推荐的框架之一 React Router 所使用。

Parcel {/parcel/}

Parcel 结合了出色的开箱即用开发体验与可扩展的架构，可以助力你的项目从初期阶段走向大规模的生产应用。

npm install --save-dev parcel

Parcel 支持快速刷新、JSX、TypeScript、Flow 以及开箱即用的样式处理。请查看 Parcel 的 React 教程以开始使用。

Rsbuild {/rsbuild/}

Rsbuild 是一个基于 Rspack 的构建工具，旨为 React 应用提供无缝的开发体验。它配备了精心调优的默认设置和现成的性能优化方案。

npx create-rsbuild --template react

Rsbuild 内置了对 React 特性（如快速刷新、JSX、TypeScript 和样式）的支持。请查看 Rsbuild 的 React 指南以开始使用。

React Native 的 Metro {/react-native/}

如果你正在从零开始进行 React Native 开发，你需要使用 Metro，这是 React Native 的 JavaScript 打包工具。Metro 支持打包用于 iOS 和 Android 等平台的代码，但与这里提到的其他工具相比，它缺少许多功能。除非你的项目明确需要 React Native 支持，否则我们建议从 Vite、Parcel 或 Rsbuild 开始。

步骤 2：构建常见的应用模式 {/step-2-build-common-application-patterns/}

上面列出的构建工具以客户端单页应用（SPA）为起点，但并不包含路由、数据获取或样式等常见功能的进一步解决方案。

React 生态系统中包含许多用于解决这些问题的工具。我们列举了一些被广泛使用的工具作为起点，但如果其他工具更适合你的项目，也欢迎选用。

路由 {/routing/}

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

路由是现代应用的核心部分，通常与数据获取（包括为整个页面预取数据以加快加载速度）、代码拆分（用于最小化客户端包体积）以及页面渲染方式（决定每个页面的生成方式）等能力集成。

我们建议使用：

数据获取 {/data-fetching/}

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

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

请注意，直接在组件中获取数据可能会导致加载时间变慢，因为会产生网络请求的瀑布效应。因此，我们建议尽可能在路由加载器或服务器上预取数据！这样可以在页面显示时一次性获取整个页面所需的数据。

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

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

Apollo
Relay

代码拆分 {/code-splitting/}

代码拆分是将应用分解为多个可以按需加载的小型包的过程。随着每个新功能和额外依赖的加入，应用的代码体积会不断增大。应用可能会因为需要在用户使用前发送整个应用的代码而变得加载缓慢。缓存、减少功能或依赖，以及将部分代码移至服务器端运行，这些方法都有助于缓解加载缓慢的问题，但如果过度使用，这些方案并不完整，且可能损害功能。

同样，如果你依赖基于框架的应用进行代码拆分，可能会遇到加载速度反而慢于不进行代码拆分的情况。例如，懒加载图表组件会延迟发送渲染图表所需的代码，将图表代码与应用其余部分分离。Parcel 支持使用 React.lazy 进行代码拆分。然而，如果图表在初始渲染后才加载其数据，你就需要等待两次网络请求。这就是所谓的瀑布效应：与其同时获取图表的数据和发送渲染代码，你必须等待每个步骤依次完成。

通过结合打包和数据获取过程，在路由级别进行代码拆分，可以减少应用的初始加载时间，以及渲染应用最大可见内容所需的时间（最大内容绘制（LCP））。

有关代码拆分的详细说明，请参阅你的构建工具文档：

提升应用性能 {/improving-application-performance/}

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

单页应用（SPA） 加载一个单一的 HTML 页面，并在用户与应用交互时动态更新页面。SPA 易于入门，但初始加载时间可能较慢。SPA 是大多数构建工具的默认架构。
流式服务端渲染（SSR） 在服务器上渲染页面，并将完全渲染好的页面发送到客户端。SSR 可以提高性能，但其设置和维护比单页应用更复杂。随着流式处理的加入，SSR 的设置和维护可能会变得更加复杂。请参阅 Vite 的 SSR 指南。
静态站点生成（SSG） 在构建时为你的应用生成静态 HTML 文件。SSG 可以提高性能，但设置和维护可能比 SSR 更复杂。请参阅 Vite 的 SSG 指南。
React 服务端组件（RSC） 允许你在同一个 React 组件树中混合使用构建时、仅限服务器和交互式组件。RSC 可以提高性能，但目前需要深入的专业知识进行设置和维护。请参阅 Parcel 的 RSC 示例。

你的渲染策略需要与路由集成，这样使用你的框架构建的应用就可以在每个路由级别选择不同的渲染策略。这将让你在不重写整个应用的前提下，为不同页面采用不同的渲染方式。例如，你的应用落地页可能会从静态生成（SSG）中受益，而带有内容信息流的页面在服务端渲染（SSR）下可能表现最佳。

针对合适的路由使用合适的渲染策略，可以减少下载第一个内容字节的时间（首字节时间（TTFB））、渲染第一个内容元素的时间（首次内容绘制（FCP）），以及渲染应用最大可见内容所需的时间（最大内容绘制（LCP））。

还有更多... {/and-more/}

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

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

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。