创建新的 React 应用

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

本页将介绍一些流行的 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 >= 10.16 和 npm >= 5.6。要创建项目,请执行:

  1. npx create-react-app my-app
  2. cd my-app
  3. npm start

注意

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

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

当你准备好部署到生产环境时,执行 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 提供更多更具灵活性的方案。推荐给更有经验的使用者:

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

从头开始打造工具链

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

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

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

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