如果你想完全使用 React 构建一个新的应用或一个新的网站，我们建议你选择社区中流行的 React 支持的框架之一。
¥If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community.
你可以在没有框架的情况下使用 React，但是我们发现大多数应用和网站最终都会构建常见问题的解决方案，例如代码分割、路由、数据获取和生成 HTML。这些问题对于所有 UI 库都很常见，而不仅仅是 React。
¥You can use React without a framework, however we’ve found that most apps and sites eventually build solutions to common problems such as code-splitting, routing, data fetching, and generating HTML. These problems are common to all UI libraries, not just React.
通过从框架开始，你可以快速开始使用 React，并避免稍后构建自己的框架。
¥By starting with a framework, you can get started with React quickly, and avoid essentially building your own framework later.
深入研究
¥Can I use React without a framework?
你绝对可以在没有框架的情况下使用 React - 这就是你的 将 React 用于页面的一部分 但是，如果你完全使用 React 构建新的应用或站点，我们建议使用框架。
¥You can definitely use React without a framework—that’s how you’d use React for a part of your page. However, if you’re building a new app or a site fully with React, we recommend using a framework.
这就是为什么。
¥Here’s why.
即使你一开始不需要路由或数据获取，你也可能希望为它们添加一些库。随着你的 JavaScript 包随着每一个新特性而增长，你可能必须弄清楚如何为每个路由单独拆分代码。随着你的数据获取需求变得越来越复杂，你可能会遇到服务器-客户端网络瀑布，这会让你的应用感觉非常慢。由于你的受众包括更多网络条件差和低端设备的用户，你可能需要从组件生成 HTML 以尽早显示内容 - 在服务器上或在构建期间。更改设置以在服务器上或构建期间运行某些代码可能非常棘手。
¥Even if you don’t need routing or data fetching at first, you’ll likely want to add some libraries for them. As your JavaScript bundle grows with every new feature, you might have to figure out how to split code for every route individually. As your data fetching needs get more complex, you are likely to encounter server-client network waterfalls that make your app feel very slow. As your audience includes more users with poor network conditions and low-end devices, you might need to generate HTML from your components to display content early—either on the server, or during the build time. Changing your setup to run some of your code on the server or during the build can be very tricky.
这些问题不是 React 特有的。这就是为什么 Svelte 有 SvelteKit、Vue 有 Nuxt 等等。要自己解决这些问题，你需要将打包器与路由和数据获取库集成。使初始设置正常工作并不难，但是要使应用即使随着时间的推移而增长也能快速加载，这涉及到很多微妙之处。你需要发送最少量的应用代码，但在一次客户端-服务器往返中发送，同时发送页面所需的任何数据。你可能希望页面在你的 JavaScript 代码运行之前就具有交互性，以支持渐进式增强。你可能希望为你的营销页面生成一个包含完全静态 HTML 文件的文件夹，这些页面可以托管在任何地方并且仍然可以在禁用 JavaScript 的情况下工作。自己构建这些能力需要真正的工作。
¥These problems are not React-specific. This is why Svelte has SvelteKit, Vue has Nuxt, and so on. To solve these problems on your own, you’ll need to integrate your bundler with your router and with your data fetching library. It’s not hard to get an initial setup working, but there are a lot of subtleties involved in making an app that loads quickly even as it grows over time. You’ll want to send down the minimal amount of app code but do so in a single client–server roundtrip, in parallel with any data required for the page. You’ll likely want the page to be interactive before your JavaScript code even runs, to support progressive enhancement. You may want to generate a folder of fully static HTML files for your marketing pages that can be hosted anywhere and still work with JavaScript disabled. Building these capabilities yourself takes real work.
此页面上的 React 框架默认解决此类问题，你无需额外工作。它们让你从非常精益开始，然后根据你的需要扩展你的应用。每个 React 框架都有一个社区，因此更容易找到问题的答案和升级工具。框架还为你的代码提供结构，帮助你和其他人保留不同项目之间的上下文和技能。相反，使用自定义设置更容易陷入不受支持的依赖版本，并且你基本上最终会创建自己的框架 - 尽管没有社区或升级路径（如果它与我们在 过去，设计更加随意）。
¥React frameworks on this page solve problems like these by default, with no extra work from your side. They let you start very lean and then scale your app with your needs. Each React framework has a community, so finding answers to questions and upgrading tooling is easier. Frameworks also give structure to your code, helping you and others retain context and skills between different projects. Conversely, with a custom setup it’s easier to get stuck on unsupported dependency versions, and you’ll essentially end up creating your own framework—albeit one with no community or upgrade path (and if it’s anything like the ones we’ve made in the past, more haphazardly designed).
如果你的应用具有这些框架无法很好地满足的异常约束，或者你更喜欢自己解决这些问题，则可以使用 React 进行自己的自定义设置。从 npm 获取 react 和 react-dom，使用 Vite 或 Parcel 等打包器设置自定义构建过程，并根据需要添加其他工具以进行路由、静态生成或服务器端渲染等。
¥If your app has unusual constraints not served well by these frameworks, or you prefer to solve these problems yourself, you can roll your own custom setup with React. Grab react and react-dom from npm, set up your custom build process with a bundler like Vite or Parcel, and add other tools as you need them for routing, static generation or server-side rendering, and more.
生产级 React 框架
¥Production-grade React frameworks
这些框架支持你在生产中部署和扩展应用所需的所有功能，并正在努力支持我们的 全栈架构愿景。我们推荐的所有框架都是开源的，有活跃的社区支持，并且可以部署到你自己的服务器或托管提供商。如果你是一位框架作者，有兴趣加入此列表，请 请告诉我们。
¥These frameworks support all the features you need to deploy and scale your app in production and are working towards supporting our full-stack architecture vision. All of the frameworks we recommend are open source with active communities for support, and can be deployed to your own server or a hosting provider. If you’re a framework author interested in being included on this list, please let us know.
Next.js
Next.js 的页面路由 是一个全栈 React 框架。它用途广泛，可让你创建任何规模的 React 应用 - 从大部分静态博客到复杂的动态应用。要创建一个新的 Next.js 项目，请在你的终端中运行：
¥**Next.js’ Pages Router is a full-stack React framework.** It’s versatile and lets you create React apps of any size—from a mostly static blog to a complex dynamic application. To create a new Next.js project, run in your terminal:
如果你是 Next.js 的新手，请查看 学习 Next.js 课程。。
¥If you’re new to Next.js, check out the learn Next.js course.
Next.js 由 Vercel 维护。你可以 部署 Next.js 应用 到任何 Node.js 或无服务器主机，或者到你自己的服务器。Next.js 还支持不需要服务器的 静态导出。
¥Next.js is maintained by Vercel. You can deploy a Next.js app to any Node.js or serverless hosting, or to your own server. Next.js also supports a static export which doesn’t require a server.
Remix
Remix 是一个使用嵌套路由的全栈 React 框架。它允许你将应用分解为嵌套部分，这些部分可以并行加载数据并响应用户操作进行刷新。要创建新的 Remix 项目，请运行：
¥**Remix is a full-stack React framework with nested routing.** It lets you break your app into nested parts that can load data in parallel and refresh in response to the user actions. To create a new Remix project, run:
如果你是 Remix 新手，请查看 Remix 博客教程（短）和 应用教程（长）。
¥If you’re new to Remix, check out the Remix blog tutorial (short) and app tutorial (long).
Remix 由 Shopify 维护。创建 Remix 项目时，需要 选择你的部署目标。你可以使用或编写 适配器 将 Remix 应用部署到任何 Node.js 或无服务器主机。
¥Remix is maintained by Shopify. When you create a Remix project, you need to pick your deployment target. You can deploy a Remix app to any Node.js or serverless hosting by using or writing an adapter.
Gatsby
Gatsby 是一个用于快速 CMS 支持的网站的 React 框架。其丰富的插件生态系统和 GraphQL 数据层简化了将内容、API 和服务集成到一个网站中的过程。要创建一个新的 Gatsby 项目，请运行：
¥**Gatsby is a React framework for fast CMS-backed websites.** Its rich plugin ecosystem and its GraphQL data layer simplify integrating content, APIs, and services into one website. To create a new Gatsby project, run:
如果你是 Gatsby 的新手，请查看 Gatsby 教程。
¥If you’re new to Gatsby, check out the Gatsby tutorial.
Gatsby 由 Netlify 维护。你可以 部署一个完全静态的 Gatsby 站点 到任何静态主机。如果你选择使用仅限服务器的功能，请确保你的托管服务提供商支持 Gatsby。
¥Gatsby is maintained by Netlify. You can deploy a fully static Gatsby site to any static hosting. If you opt into using server-only features, make sure your hosting provider supports them for Gatsby.
Expo（用于原生应用）
¥Expo (for native apps)
Expo 是一个 React 框架，可让你创建具有真正原生 UI 的通用 Android、iOS 和 Web 应用。它为 React Native 提供了一个 SDK，使原生部分更易于使用。要创建一个新的 Expo 项目，请运行：
¥**Expo is a React framework that lets you create universal Android, iOS, and web apps with truly native UIs.** It provides an SDK for React Native that makes the native parts easier to use. To create a new Expo project, run:
如果你不熟悉 Expo，请查看 Expo 教程。
¥If you’re new to Expo, check out the Expo tutorial.
Expo 由 Expo（公司） 维护。使用 Expo 构建应用是免费的，你可以无限制地将它们提交到 Google 和 Apple 应用市场。Expo 还提供可选的付费云服务。
¥Expo is maintained by Expo (the company). Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services.
前沿的 React 框架
¥Bleeding-edge React frameworks
当我们探索如何继续改进 React 时，我们意识到将 React 与框架（特别是路由、打包和服务器技术）更紧密地集成是我们帮助 React 用户构建更好应用的最大机会。Next.js 团队已同意与我们合作研究、开发、集成和测试与框架无关的提示 React 功能，例如 React 服务器组件。
¥As we’ve explored how to continue improving React, we realized that integrating React more closely with frameworks (specifically, with routing, bundling, and server technologies) is our biggest opportunity to help React users build better apps. The Next.js team has agreed to collaborate with us in researching, developing, integrating, and testing framework-agnostic bleeding-edge React features like React Server Components.
这些功能每天都越来越接近生产就绪，我们一直在与其他打包器和框架开发者讨论如何集成它们。我们希望在一两年内，此页面上列出的所有框架都将完全支持这些功能。（如果你是有兴趣与我们合作试验这些功能的框架作者，请告诉我们！）
¥These features are getting closer to being production-ready every day, and we’ve been in talks with other bundler and framework developers about integrating them. Our hope is that in a year or two, all frameworks listed on this page will have full support for these features. (If you’re a framework author interested in partnering with us to experiment with these features, please let us know!)
Next.js（应用路由）
¥Next.js (App Router)
Next.js 的应用路由 是对 Next.js API 的重新设计，旨在实现 React 团队的全栈架构愿景。它允许你在服务器上运行甚至在构建期间运行的异步组件中获取数据。
¥**Next.js’s App Router is a redesign of the Next.js APIs aiming to fulfill the React team’s full-stack architecture vision.** It lets you fetch data in asynchronous components that run on the server or even during the build.
Next.js 由 Vercel 维护。你可以 部署 Next.js 应用 到任何 Node.js 或无服务器主机，或者到你自己的服务器。Next.js 还支持不需要服务器的 静态导出。
¥Next.js is maintained by Vercel. You can deploy a Next.js app to any Node.js or serverless hosting, or to your own server. Next.js also supports static export which doesn’t require a server.
深入研究
¥Which features make up the React team’s full-stack architecture vision?
Next.js 的应用路由打包器完全实现了官方的 React 服务器组件规范。这使你可以在单个 React 树中混合构建时、仅服务器、以及交互式组件。
¥Next.js’s App Router bundler fully implements the official React Server Components specification. This lets you mix build-time, server-only, and interactive components in a single React tree.
例如，你可以将仅用于服务器的 React 组件编写为从数据库或文件读取的 async 函数。然后你可以将数据从它向下传递到你的交互式组件：
¥For example, you can write a server-only React component as an async function that reads from a database or from a file. Then you can pass data down from it to your interactive components:
// 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 树中为用户界面的不同部分指定加载状态（如骨架占位符）：
¥Next.js’s App Router also integrates data fetching with Suspense. This lets you specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree:
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>服务器组件和 Suspense 是 React 特性而不是 Next.js 特性。然而，在框架级别采用它们需要认同和不平凡的实现工作。目前，Next.js 应用路由是最完整的实现。React 团队正在与打包器开发者合作，使这些功能更容易在下一代框架中实现。
¥Server Components and Suspense are React features rather than Next.js features. However, adopting them at the framework level requires buy-in and non-trivial implementation work. At the moment, the Next.js App Router is the most complete implementation. The React team is working with bundler developers to make these features easier to implement in the next generation of frameworks.