创建一个 React 应用

如果你想用 React 构建一个新的应用或网站，我们推荐从一个框架开始。

其它选项

还有一些新兴的框架正在努力实现我们的全栈 React 愿景：

TanStack Start (Beta): TanStack Start 是一个由 TanStack Router 驱动的全栈 React 框架。它使用 Nitro 和 Vite 等工具提供完整的文档服务端渲染、流式传输、服务器函数、打包等功能。
RedwoodJS: Redwood 是一个全栈 React 框架，带有许多预装的包和配置，方便构建全栈 Web 应用。

深入探讨

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

Next.js 的 App Router 打包器完全实现了官方的 React Server Components 规范. 这让你可以在同一个 React 树中混合使用构建时、仅服务器端和交互式组件。

例如，你可以编写一个仅在服务器端运行（或在构建期间运行）的服务器端 React 组件，作为 async 函数从数据库或文件中读取数据。然后，你可以将数据传递给将在浏览器中运行的交互式组件：

// 该组件**仅**在服务器端运行（或在构建期间运行）。
async function Talks({ confId }) {
  // 1. 你在服务器端，因此可以直接与数据层交互。无需 API 端点。
  const talks = await db.Talks.findAll({ confId });

  // 2. 添加任意渲染逻辑。这不会使你的 JavaScript bundle 变大。
  const videos = talks.map(talk => talk.video);

  // 3. 将数据传递给将在浏览器中运行的组件。
  return <SearchableVideoList videos={videos} />;
}

Next.js 的 App Router 还集成了使用 Suspense 的数据获取. 这让你可以直接在 React 树中为用户界面的不同部分指定加载状态（例如骨架占位符）：

<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>

服务器组件和 Suspense 是 React 的特性，而不是 Next.js 的特性。然而，在框架层面采用它们需要开发者的支持和大量的实现工作。目前，Next.js App Router 是最完整的实现。React 团队正在与打包工具开发者合作，以便在下一代框架中更容易实现这些特性。

注意

我们推荐了一些基于 Vite 的选择。

React Router v7 是一个基于 Vite 的框架，允许你使用 Vite 的快速开发服务器和构建工具，同时提供路由和数据获取功能。与其他推荐的框架一样，你可以用 React Router v7 构建单页应用。

我们也推荐在将 React 添加到现有项目中，或者构建一个 React 框架时使用 Vite。

就像 Svelte 有 Sveltekit、Vue 有 Nuxt、Solid 有 SolidStart 一样，React 推荐使用集成了 Vite 等构建工具的框架来创建新项目。

如果你是一个框架开发者，希望在本页面被推荐，请告知我们。

上一页安装

下一页构建一个 React 框架

创建一个 React 应用

推荐的 React 框架

注意

React 框架不需要服务器。

Next.js (App Router)

React Router (v7)

Expo (for native apps)

其它选项

深入探讨

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

注意

创建一个 React 应用

推荐的 React 框架

注意

React 框架不需要服务器。

Next.js (App Router)

React Router (v7)

Expo (for native apps)

其它选项

深入探讨

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

注意

你推荐使用 Vite 吗？