如果您想使用 React 完全构建一个新的应用程序或网站，我们建议您选择社区中流行的基于 React 的框架之一。
您可以不使用框架而直接使用 React，但是我们发现大多数应用程序和网站最终都会构建解决方案来解决一些常见问题，例如代码分割、路由、数据获取和生成 HTML。这些问题是所有 UI 库都面临的常见问题，而不仅仅是 React。
从框架开始，您可以快速入门 React，并避免以后基本上构建您自己的框架。
深入探讨
您绝对可以不使用框架而直接使用 React——这就是您将 React 用于页面的一部分的方式。但是，如果您要使用 React 完全构建一个新的应用程序或网站，我们建议您使用框架。
原因如下。
即使您一开始不需要路由或数据获取，您也可能希望为它们添加一些库。随着每个新功能的添加，您的 JavaScript 包会越来越大，您可能需要弄清楚如何为每个路由单独分割代码。随着数据获取需求变得越来越复杂，您可能会遇到服务器-客户端网络级联问题，这会使您的应用程序运行速度非常慢。当您的受众包括更多网络条件较差和低端设备的用户时，您可能需要从组件生成 HTML 以尽早显示内容——无论是在服务器上，还是在构建时。更改设置以在服务器上或构建期间运行部分代码可能非常棘手。
这些问题并非 React 特有的。这就是 Svelte 有 SvelteKit、Vue 有 Nuxt 等等的原因。要自行解决这些问题，您需要将捆绑器与路由器和数据获取库集成。获得初始设置很容易，但是要使应用程序即使随着时间的推移而增长也能快速加载，其中涉及许多细微之处。您需要发送最少的应用程序代码，但要通过一次客户端-服务器往返来完成，同时并行进行页面所需的所有数据。您可能希望在 JavaScript 代码运行之前页面即可交互，以支持渐进增强。您可能希望为营销页面生成一个完整的静态 HTML 文件夹，这些文件可以托管在任何地方，并且在禁用 JavaScript 时仍然可以工作。自己构建这些功能需要真正的努力。
此页面上的 React 框架默认情况下解决了这些问题，无需您额外的工作。它们让您可以从精简的开始，然后根据您的需求扩展应用程序。每个 React 框架都有一个社区，因此查找问题的答案和升级工具更容易。框架还会为您的代码提供结构，帮助您和其他人保留不同项目之间的上下文和技能。相反，使用自定义设置更容易卡在不受支持的依赖项版本上，您最终将创建自己的框架——尽管它没有社区或升级路径（如果它与我们过去创建的框架类似，那么设计将更加随意）。
如果您的应用程序具有这些框架无法很好地满足的特殊约束，或者您更愿意自己解决这些问题，您可以使用 React 创建自己的自定义设置。从 npm 获取react和react-dom，使用 Vite或Parcel之类的捆绑器设置自定义构建过程，并根据需要添加其他工具用于路由、静态生成或服务器端渲染等等。
生产级 React 框架
这些框架支持您在生产环境中部署和扩展应用程序所需的所有功能，并且正在努力支持我们的全栈架构愿景。我们推荐的所有框架都是开源的，并拥有活跃的社区支持，可以部署到您自己的服务器或托管提供商。如果您是框架作者，有兴趣将您的框架添加到此列表中，请告知我们。
Next.js
Next.js 的页面路由器是一个全栈 React 框架。它用途广泛，可以创建任何规模的 React 应用程序——从大部分静态的博客到复杂的动态应用程序。要创建一个新的 Next.js 项目，请在您的终端中运行
如果您是 Next.js 新手，请查看学习 Next.js 课程。
Next.js 由Vercel维护。您可以部署 Next.js 应用程序到任何 Node.js 或无服务器托管，或到您自己的服务器。Next.js 还支持静态导出，不需要服务器。
Remix
Remix是一个具有嵌套路由的全栈 React 框架。它允许您将应用程序分解成可以并行加载数据并响应用户操作而刷新的嵌套部分。要创建一个新的 Remix 项目，请运行
如果您是 Remix 新手，请查看 Remix 的博客教程（简短版）和应用程序教程（详细版）。
Remix 由Shopify维护。创建 Remix 项目时，您需要选择您的部署目标。您可以通过使用或编写适配器将 Remix 应用程序部署到任何 Node.js 或无服务器托管。
Gatsby
Gatsby是一个用于快速构建基于 CMS 的网站的 React 框架。它丰富的插件生态系统和 GraphQL 数据层简化了将内容、API 和服务集成到一个网站中的过程。要创建一个新的 Gatsby 项目，请运行
如果您是 Gatsby 新手，请查看Gatsby 教程。
Gatsby 由Netlify维护。您可以将完全静态的 Gatsby 网站部署到任何静态托管。如果您选择使用仅服务器端功能，请确保您的托管提供商支持 Gatsby 的这些功能。
Expo（用于原生应用）
Expo是一个 React 框架，允许您创建具有真正原生 UI 的通用 Android、iOS 和 Web 应用程序。它提供了一个用于React Native的 SDK，使原生部分更容易使用。要创建一个新的 Expo 项目，请运行
如果您是 Expo 新手，请查看Expo 教程。
Expo 由Expo（公司）维护。使用 Expo 构建应用程序是免费的，您可以将它们提交到 Google 和 Apple 应用商店，没有任何限制。Expo 还提供可选付费云服务。
前沿 React 框架
在我们探索如何继续改进 React 的过程中，我们意识到将 React 与框架（特别是与路由、打包和服务器技术）更紧密地集成是帮助 React 用户构建更好应用程序的最大机会。Next.js 团队已同意与我们合作研究、开发、集成和测试与框架无关的前沿 React 功能，例如React 服务器组件。
这些功能每天都在越来越接近生产就绪状态，我们一直在与其他打包器和框架开发者讨论集成这些功能。我们希望在一两年内，此页面上列出的所有框架都将完全支持这些功能。（如果您是框架作者，有兴趣与我们合作试用这些功能，请告知我们！）
Next.js (应用路由器)
Next.js 的应用路由器是对 Next.js API 的重新设计，旨在实现 React 团队的全栈架构愿景。 它允许您在服务器端或甚至构建期间运行的异步组件中获取数据。
Next.js 由 Vercel维护。您可以将 Next.js 应用部署到任何 Node.js 或无服务器托管平台，或者您自己的服务器。Next.js 也支持 静态导出，这不需要服务器。
深入探讨
Next.js 的应用路由器打包器完全实现了官方的 React 服务器组件规范。这允许您在一个 React 树中混合使用构建时、仅服务器端和交互式组件。
例如，您可以将仅服务器端的 React 组件编写为一个 async 函数，该函数从数据库或文件中读取数据。然后，您可以将数据从该组件传递到您的交互式组件。
// This component runs *only* on the server (or during the build).
async function Talks({ confId }) {
// 1. You're on the server, so you can talk to your data layer. API endpoint not required.
const talks = await db.Talks.findAll({ confId });
// 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.
const videos = talks.map(talk => talk.video);
// 3. Pass the data down to the components that will run in the browser.
return <SearchableVideoList videos={videos} />;
}Next.js 的应用路由器还集成了 带有 Suspense 的数据获取。这允许您直接在 React 树中为用户界面的不同部分指定加载状态（例如骨架占位符）。
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>服务器组件和 Suspense 是 React 的特性，而不是 Next.js 的特性。但是，在框架级别采用它们需要认同并进行非平凡的实现工作。目前，Next.js 应用路由器是最完整的实现。React 团队正在与打包器开发者合作，以便在下一代框架中更轻松地实现这些特性。