使用集成的工具链,以实现最佳的用户和开发人员体验。

本页将介绍一些流行的 React 工具链,它们有助于完成如下任务:

  • 扩展文件和组件的规模。
  • 使用来自 npm 的第三方库。
  • 尽早发现常见错误。
  • 在开发中实时编辑 CSS 和 JS。
  • 优化生产输出。

本页推荐的工具链无需配置即可开始使用

你可能不需要工具链

如果你没有碰到上述的问题,或者还不习惯使用 JavaScript 工具,可以考虑把 React 作为普通的 <script> 标记添加到 HTML 页面上,以及使用可选的 JSX

这也是将 React 集成到现有网站最简单的方式。如果你认为更大的工具链有所帮助,可以随时添加!

推荐的工具链

React 团队主要推荐这些解决方案:

  • 如果你是在学习 React 或创建一个新的单页应用,请使用 Create React App
  • 如果你是在用 Node.js 构建服务端渲染的网站,试试 Next.js
  • 如果你是在构建内容主导的静态网站,试试 Gatsby
  • 如果你是在打造组件库将 React 集成到现有代码仓库,尝试更灵活的工具链

Create React App

Create React App 是一个用于学习 React 的舒适环境,也是用 React 创建新的单页应用的最佳方式。

它会配置你的开发环境,以便使你能够使用最新的 JavaScript 特性,提供良好的开发体验,并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 14.0.0 和 npm >= 5.6。要创建项目,请执行:

npx create-react-app my-app cd my-app npm start

注意

第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具

Create React App 不会处理后端逻辑或操纵数据库;它只是创建一个前端构建流水线(build pipeline),所以你可以使用它来配合任何你想使用的后端。它在内部使用 Babel 和 webpack,但你无需了解它们的任何细节。

当你准备好部署到生产环境时,执行 npm run build 会在 build 文件夹内生成你应用的优化版本。你能从它的 README 和用户指南了解 Create React App 的更多信息。

Next.js

Next.js 是一个流行的、轻量级的框架,用于配合 React 打造静态化和服务端渲染应用。它包括开箱即用的样式和路由方案,并且假定你使用 Node.js 作为服务器环境。

从 Next.js 的官方指南了解更多。

Gatsby

Gatsby 是用 React 创建静态网站的最佳方式。它让你能使用 React 组件,但输出预渲染的 HTML 和 CSS 以保证最快的加载速度。

从 Gatsby 的官方指南入门示例集了解更多。

更灵活的工具链

以下工具链为 React 提供更多更具灵活性的方案。推荐给更有经验的使用者:

  • Neutrino 把 webpack 的强大功能和简单预设结合在一起。并且包括了 React 应用和 React 组件的预设。
  • Nx 是针对全栈 monorepo 的开发工具包,其内置了 React,Next.js,Express 等。
  • Parcel 是一个快速的、零配置的网页应用打包器,并且可以搭配 React 一起工作
  • Razzle 是一个无需配置的服务端渲染框架,但它提供了比 Next.js 更多的灵活性。

从头开始打造工具链

一组 JavaScript 构建工具链通常由这些组成:

  • 一个 package 管理器,比如 Yarn 或 npm。它能让你充分利用庞大的第三方 package 的生态系统,并且轻松地安装或更新它们。
  • 一个打包器,比如 webpack 或 Parcel。它能让你编写模块化代码,并将它们组合在一起成为小的 package,以优化加载时间。
  • 一个编译器,例如 Babel。它能让你编写的新版本 JavaScript 代码,在旧版浏览器中依然能够工作。

如果你倾向于从头开始打造你自己的 JavaScript 工具链,可以查看这个指南,它重新创建了一些 Create React App 的功能。

别忘了确保你自定义的工具链针对生产环境进行了正确配置