React
v16.4.1GitHub

创建一个新的 React APP

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

本页面接到了一些热门的React工具链，它们可以帮助完成如下任务：

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

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

带 <script> 标签的 HTML

如果您没有遇到上述问题，或者不习惯使用 JavaScript 工具， 那么考虑 在HTML页面上使用简单的 <script> 标记来添加 React ， 可选 与 JSX 结合使用。

这也是将 React 集成到现有网站的最佳方式。 如果您觉得有帮助，您可以随时添加更大的工具链！

推荐的工具链

React团队主要推荐以下解决方案：

Create React App

Create React App 是 学习React 最舒适的环境，并且是构建 新的单页 应用程序 的最佳方式。

它设置了您的开发环境，以便您可以使用最新的 JavaScript 功能，提供良好的开发人员体验，并优化您的应用程序的生产代码。 你需要在你的机器上安装 Node >= 6 和 npm >= 5.2。 要创建项目，请运行：

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

注意

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

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 。

更灵活的工具链

以下工具链提供了更多的灵活性和选择性。我们建议更有经验的用户的可以尝试他们：

从零开始创建工具链

JavaScript 构建工具链通常由以下部分组成：

  • 一个 包管理器 ，如 Yarn 或 npm 。 它可让您充分利用第三方软件包的庞大生态系统，并轻松安装或更新它们。

  • 一个 打包器，例如 webpack 或 Parcel。 它允许您编写模块化代码，并将它们组合在一起成为小的包，以优化加载时间。

  • 一个 编译器，例如Babel。 它可以让你编写的现代 JavaScript 代码在旧版浏览器中仍然可用。

如果您更喜欢从头开始创建自己的 JavaScript 工具链，请查看本指南 ，以重新创建一些 Create React App 功能。

不要忘记确保您自定义的工具链 正确设置以用于生产 。

Edit this page