如果你想用 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 的 Pages 路由器 是一个全栈 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 Server Components。
这些功能每天都在越来越接近生产就绪状态，我们一直在与其他捆绑器和框架开发人员讨论如何集成它们。我们希望在一两年内，本页列出的所有框架都将完全支持这些功能。（如果您是框架作者，有兴趣与我们合作试验这些功能，请告诉我们！）
Next.js（App Router）
Next.js 的 App Router 是对 Next.js API 的重新设计，旨在实现 React 团队的全栈架构愿景。它允许您在服务器上或甚至在构建过程中异步运行的组件中获取数据。
Next.js 由 Vercel 维护。您可以 将 Next.js 应用部署 到任何 Node.js 或无服务器托管，或部署到您自己的服务器。Next.js 还支持 静态导出，它不需要服务器。
深入探讨
Next.js 的 App Router 捆绑器完全实现了官方的 React Server Components 规范。这使您能够在一个 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 的 App 路由器还集成了 Suspense 数据获取。这使你可以在 React 树中直接为用户界面的不同部分指定加载状态（例如骨架占位符）。
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>服务器组件和 Suspense 是 React 特性，而不是 Next.js 特性。然而，在框架级别采用它们需要得到认可并进行非凡的实施工作。目前，Next.js App 路由器是最完整的实现。React 团队正在与打包器开发人员合作，以便在下一代框架中更容易实现这些功能。