创建 React 应用

如果你想使用 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.

注意

全栈框架不需要服务器。

¥Full-stack frameworks do not require a server.

本页上的所有框架都支持客户端渲染（CSR）、单页应用（SPA）和静态站点生成（SSG）。这些应用可以部署到没有服务器的 CDN 或静态托管服务。此外，这些框架允许你在每个路由的基础上添加服务器端渲染，当它对你的用例有意义时。

¥All the frameworks on this page support client-side rendering (CSR), single-page apps (SPA), and static-site generation (SSG). These apps can be deployed to a CDN or static hosting service without a server. Additionally, these frameworks allow you to add server-side rendering on a per-route basis, when it makes sense for your use case.

这允许你从仅限客户端的应用开始，如果你的需求稍后发生变化，你可以选择在各个路由上使用服务器功能，而无需重写应用。查看框架的文档以配置渲染策略。

¥This allows you to start with a client-only app, and if your needs change later, you can opt-in to using server features on individual routes without rewriting your app. See your framework’s documentation for configuring the rendering strategy.

Next.js（应用路由）

¥Next.js (App Router)

Next.js 的应用路由是一个 React 框架，它充分利用了 React 的架构来实现全栈 React 应用。

¥**Next.js’s App Router is a React framework that takes full advantage of React’s architecture to enable full-stack React apps.**

Terminal

npx create-next-app@latest

Next.js 由 Vercel 维护。你可以部署 Next.js 应用到任何 Node.js 或无服务器主机，或者到你自己的服务器。Next.js 还支持不需要服务器的静态导出。Vercel 还提供可选付费云服务。

¥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. Vercel additionally provides opt-in paid cloud services.

React Router (v7)

React Router 是 React 最流行的路由库，可以与 Vite 配对以创建全栈 React 框架。它强调标准 Web API，并为各种 JavaScript 运行时和平台提供了多个准备部署模板。

¥**React Router is the most popular routing library for React and can be paired with Vite to create a full-stack React framework**. It emphasizes standard Web APIs and has several ready to deploy templates for various JavaScript runtimes and platforms.

要创建一个新的 React Router 框架项目，请运行：

¥To create a new React Router framework project, run:

Terminal

npx create-react-router@latest

React Router 由 Shopify 维护。

¥React Router is maintained by Shopify.

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:

Terminal

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、流式传输、服务器功能、打包等。

¥TanStack Start (Beta): TanStack Start is a full-stack React framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, bundling, and more using tools like Nitro and Vite.
RedwoodJS：Redwood 是一个全栈 React 框架，具有大量预安装的软件包和配置，可轻松构建全栈 Web 应用。

¥RedwoodJS: Redwood is a full stack React framework with lots of pre-installed packages and configuration that makes it easy to build full-stack web applications.

深入研究

哪些特性构成了 React 团队的全栈架构愿景？

¥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.

从头开始

¥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 built tool like Vite, Parcel, or RSbuild.

如果你是框架作者并有兴趣包含在此页面中，请告诉我们。

¥If you’re a framework author interested in being included on this page, please let us know.

上一章安装

下一章从头开始构建 React 应用