react 创建新页面_创建新的 React 应用

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

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

扩展文件和组件的规模。

使用来自 npm 的第三方库。

尽早发现常见错误。

在开发中实时编辑 CSS 和 JS。

优化生产输出。

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

你可能不需要工具链

如果你没有碰到上述的问题，或者还不习惯使用 JavaScript 工具，可以考虑把 React 作为普通的

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

推荐的工具链

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

如果你是在学习 React 或创建一个新的单页应用，请使用 Create React App。

如果你是在用 Node.js 构建服务端渲染的网站，试试 Next.js。

如果你是在构建面向内容的静态网站，试试 Gatsby。

如果你是在打造组件库或将 React 集成到现有代码仓库，尝试更灵活的工具链。

Create React App

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

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

npx create-react-app my-app

cd my-app

npm start

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

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

Next.js

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

Gatsby

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

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

更灵活的工具链

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

Express 等。

搭配 React 一起工作。

从头开始打造工具链

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

一个 package 管理器，比如 Yarn 或 npm。它能让你充分利用庞大的第三方 package 的生态系统，并且轻松地安装或更新它们。

一个打包器，比如 webpack 或 Parcel。它能让你编写模块化代码，并将它们组合在一起成为小的 package，以优化加载时间。

一个编译器，例如 Babel。它能让你编写的新版本 JavaScript 代码，在旧版浏览器中依然能够工作。

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

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