使用React有好多种方法。

1. 通过<script>标记添加的html页面中(不适用工具链，也是引入React最简单的方法)
2. 通过Create React App创建单页应用
3. 官方文档还推荐了其他的方式，我没尝试过，在此引入

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

Create React App

npx create-react-app my-app # my-app是项目名称
cd my-app  # 进入my-app项目
npm start  # 或者是yarn start

npx 是npm5.2+附带的package运行工具。

在我理解是，在项目中安装的包，你无法通过igt-bash命令行工具直接运行，但可以通过npx webpack(这里以项目中安装webpack为例)运行。

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 的功能。

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

参考链接

React官方文档

如有侵权，请联系删除。

本文主要是整理记录，自己写的内容相对不多。

注意文章编写时间，一切以官方文档为主。

如果某处写的有问题，欢迎发邮件，一起交流讨论，共同进步。