如果你想使用 React 构建新应用或网站，我们建议从框架开始。
🌐 If you want to build a new app or website with React, we recommend starting with a framework.
如果你的应用有现有框架无法很好满足的限制，你更倾向于自己构建框架，或者你只是想学习 React 应用的基础知识，你可以从零构建 React 应用。
🌐 If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, you can build a React app from scratch.
全栈框架
🌐 Full-stack frameworks
这些推荐的框架支持你在生产环境中部署和扩展应用所需的所有功能。它们已经整合了最新的 React 功能，并利用了 React 的架构优势。
🌐 These recommended frameworks support all the features you need to deploy and scale your app in production. They have integrated the latest React features and take advantage of React’s architecture.
Next.js（应用路由）
🌐 Next.js (App Router)
Next.js 的应用路由 是一个 React 框架，充分利用 React 的架构来实现全栈 React 应用。
npx create-next-app@latestNext.js 由 Vercel 维护。你可以将 Next.js 应用部署 到任何支持 Node.js 或 Docker 容器的托管服务提供商，或者部署到你自己的服务器。Next.js 还支持 静态导出，无需服务器。
🌐 Next.js is maintained by Vercel. You can deploy a Next.js app to any hosting provider that supports Node.js or Docker containers, or to your own server. Next.js also supports static export which doesn’t require a server.
React Router (v7)
React Router 是 React 中最受欢迎的路由库，可以与 Vite 配合使用来创建一个全栈 React 框架。它强调标准的 Web API，并为各种 JavaScript 运行时和平台提供了多个 可立即部署的模板 。
要创建一个新的 React Router 框架项目，请运行：
🌐 To create a new React Router framework project, run:
npx create-react-router@latestReact Router 由 Shopify 维护。
🌐 React Router is maintained by Shopify.
Expo（用于原生应用）
🌐 Expo (for native apps)
Expo 是一个 React 框架，它让你可以创建具有真正原生用户界面的通用 Android、iOS 和网页应用。 它提供了一个用于 React Native 的 SDK，使原生部分更易于使用。要创建一个新的 Expo 项目，请运行：
npx create-expo-app@latest如果你是 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.
其他框架
🌐 Other frameworks
还有其他新兴框架正在努力实现我们的全栈 React 愿景：
🌐 There are other up-and-coming frameworks that are working towards our full stack React vision:
- TanStack Start（测试版）：TanStack Start 是一个由 TanStack Router 驱动的全栈 React 框架。它使用 Nitro 和 Vite 等工具提供完整文档的 SSR、流式传输、服务器功能、打包等功能。
- RedwoodSDK：Redwood 是一个全栈 React 框架，带有许多预安装的包和配置，使构建全栈 Web 应用变得容易。
深入研究
🌐 Which features make up the React team’s full-stack architecture vision?
Next.js 的 App Router 打包器完全实现了官方的 React Server Components 规范。这让你可以在单个 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 的 App Router 还集成了 使用 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 的 App Router 是最完整的实现。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.
从头开始
🌐 Start From Scratch
如果你的应用具有现有框架无法很好地满足的约束，你更愿意构建自己的框架，或者你只是想学习 React 应用的基础知识，还有其他选项可用于从头开始启动 React 项目。
🌐 If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, there are other options available for starting a React project from scratch.
从零开始会给你更多的灵活性，但确实需要你在路由、数据获取以及其他常见用法模式上做出选择。这很像是自己构建一个框架，而不是使用已经存在的框架。我们推荐的 框架 对这些问题有内置的解决方案。
🌐 Starting from scratch gives you more flexibility, but does require that you make choices on which tools to use for routing, data fetching, and other common usage patterns. It’s a lot like building your own framework, instead of using a framework that already exists. The frameworks we recommend have built-in solutions for these problems.
如果你想自己构建解决方案，请参阅我们的指南 从零开始构建 React 应用，了解如何使用诸如 Vite、Parcel 或 RSbuild 这样的构建工具来设置新的 React 项目。
🌐 If you want to build your own solutions, see our guide to build a React app from Scratch for instructions on how to set up a new React project starting with a build tool like Vite, Parcel, or RSbuild.
如果你是有兴趣被列在此页面上的框架作者，请告诉我们。
🌐 If you’re a framework author interested in being included on this page, please let us know.