开始新的 React 项目 – React 中文网

如果你想完全使用 React 构建一个新的应用程序或一个新的网站，我们建议你选择社区中流行的 React 支持的框架之一。 框架提供了大多数应用程序和网站最终需要的功能，包括路由、数据获取和生成 HTML。

本地开发需要安装 Node.js。 你也可以选择在生产环境中使用 Node.js，但这不是必须的。 许多 React 框架支持导出到静态 HTML/CSS/JS 文件夹。

Next.js 是一个全栈 React 框架。 它用途广泛，可让你创建任何规模的 React 应用程序 - 从大部分静态博客到复杂的动态应用程序。 要创建一个新的 Next.js 项目，请在你的终端中运行：

如果你是 Next.js 的新手，请查看 Next.js 教程。

Next.js 由 Vercel 维护。 你可以 部署 Next.js 应用程序 到任何 Node.js 或无服务器主机，或者到你自己的服务器。 完全静态的 Next.js 应用程序 可以部署到任何静态主机。

Remix 是一个使用嵌套路由的全栈 React 框架。 它允许你将应用程序分解为嵌套部分，这些部分可以并行加载数据并响应用户操作进行刷新。 要创建新的 Remix 项目，请运行：

如果你是 Remix 新手，请查看 Remix 博客教程（短）和 应用教程（长）。

Remix 由 Shopify 维护。 创建 Remix 项目时，需要 选择你的部署目标。 你可以使用或编写 适配器 将 Remix 应用程序部署到任何 Node.js 或无服务器主机。

Gatsby 是一个用于快速 CMS 支持的网站的 React 框架。 其丰富的插件生态系统和 GraphQL 数据层简化了将内容、API 和服务集成到一个网站中的过程。 要创建一个新的 Gatsby 项目，请运行：

如果你是 Gatsby 的新手，请查看 Gatsby 教程。

Gatsby 由 Netlify 维护。 你可以 部署一个完全静态的 Gatsby 站点 到任何静态主机。 如果你选择使用仅限服务器的功能，请确保你的托管服务提供商支持 Gatsby。

Expo 是一个 React 框架，可让你创建具有真正原生 UI 的通用 Android、iOS 和 Web 应用程序。 它为 React Native 提供了一个 SDK，使原生部分更易于使用。 要创建一个新的 Expo 项目，请运行：

如果你不熟悉 Expo，请查看 Expo 教程。

Expo 由 Expo（公司） 维护。 使用 Expo 构建应用程序是免费的，你可以无限制地将它们提交到 Google 和 Apple 应用程序商店。 Expo 还提供可选的付费云服务。

你绝对可以在没有框架的情况下使用 React - 这就是你 将 React 用于页面的一部分 的方式。 但是，如果你要完全使用 React 构建新应用程序或网站，我们建议你使用框架。

这就是为什么。

即使你一开始不需要路由或数据获取，你也可能希望为它们添加一些库。 随着你的 JavaScript 包随着每一个新特性而增长，你可能必须弄清楚如何为每个路由单独拆分代码。 随着你的数据获取需求变得越来越复杂，你可能会遇到服务器-客户端网络瀑布，这会让你的应用感觉非常慢。 由于你的受众包括更多网络条件差和低端设备的用户，你可能需要从组件生成 HTML 以尽早显示内容 - 在服务器上或在构建期间。 更改设置以在服务器上或构建期间运行某些代码可能非常棘手。

这些问题不是 React 特有的。 这就是为什么 Svelte 有 SvelteKit，Vue 有 Nuxt 等等。 要自己解决这些问题，你需要将打包器与路由和数据获取库集成。 使初始设置正常工作并不难，但是要使应用程序即使随着时间的推移而增长也能快速加载，这涉及到很多微妙之处。 你需要发送最少量的应用程序代码，但在一次客户端-服务器往返中发送，同时发送页面所需的任何数据。 你可能希望页面在你的 JavaScript 代码运行之前就具有交互性，以支持渐进式增强。 你可能希望为你的营销页面生成一个包含完全静态 HTML 文件的文件夹，这些页面可以托管在任何地方并且仍然可以在禁用 JavaScript 的情况下工作。 自己构建这些能力需要真正的工作。

此页面上的 React 框架默认解决此类问题，你无需额外工作。 它们让你从非常精益开始，然后根据你的需要扩展你的应用程序。 每个 React 框架都有一个社区，因此更容易找到问题的答案和升级工具。 框架还为你的代码提供结构，帮助你和其他人保留不同项目之间的上下文和技能。 而是，使用自定义设置更容易卡在不受支持的依赖版本上，你最终将创建自己的框架—尽管它没有社区或升级路径（如果它与我们过去制作的那些一样，则设计得更加随意）。

如果你仍然不相信，或者你的应用程序具有这些框架无法很好地满足的异常限制，并且你想推出自己的自定义设置，我们无法阻止你 - 去吧！ 从 npm 获取 react 和 react-dom，使用 Vite 或 Parcel 等打包器设置自定义构建过程，并根据需要添加其他工具以进行路由、静态生成或服务器端渲染等。

当我们探索如何继续改进 React 时，我们意识到将 React 与框架（特别是路由、打包和服务器技术）更紧密地集成是我们帮助 React 用户构建更好应用程序的最大机会。 Next.js 团队已同意与我们合作研究、开发、集成和测试与框架无关的尖端 React 功能，例如 React 服务器组件。

这些功能每天都越来越接近生产就绪，我们一直在与其他打包器和框架开发人员讨论如何集成它们。 我们希望在一两年内，此页面上列出的所有框架都将完全支持这些功能。 （如果你是有兴趣与我们合作试验这些功能的框架作者，请告诉我们！）

Next.js 的应用路由 是对 Next.js API 的重新设计，旨在实现 React 团队的全栈架构愿景。 它允许你在服务器上运行甚至在构建期间运行的异步组件中获取数据。

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

Next.js 的应用路由是 目前处于测试阶段，尚不推荐用于生产（截至 2023 年 3 月）。 要在现有的 Next.js 项目中试验它，遵循此增量迁移指南。

Next.js 的应用路由打包器完全实现了官方的 React 服务器组件规范。 这使你可以在单个 React 树中混合构建时、仅服务器、以及交互式组件。

例如，你可以将仅用于服务器的 React 组件编写为从数据库或文件读取的 async 函数。 然后你可以将数据从它向下传递到你的交互式组件：

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

服务器组件和 Suspense 是 React 特性而不是 Next.js 特性。 然而，在框架级别采用它们需要认同和不平凡的实现工作。 目前，Next.js 应用路由是最完整的实现。 React 团队正在与打包器开发人员合作，使这些功能更容易在下一代框架中实现。