React安装：创建React应用

上一节：在现有项目上使用React

（本文根据react官网翻译，并加入了部分个人想法，如有遗漏请联系作者）

使用React工具链的好处

1. 扩展文件和组件的范围
2. 使用npm集成第三方库
3. 自动检测语法错误
4. 实时编写CSS和Javascript
5. 优化生成输出

提示：本章所推荐的工具链不需要特定的配置

提示：你可能不需要工具链
如果你没有遇到之前讲述的问题或者觉得使用JavaScript工具十分方便，那么你可以把react作为纯粹的脚本script添加到html中，同时也可以根据需求选择是否使用JSX。

这也是将react集成到现有项目的最简单的方式，当然如果你觉得工具链对你更有帮助的话你也可以使用它。

推荐的工具链

React开发团队推荐以下几种工具链

1. 如果你想学习react或者开发一个单页面应用的话，查看 Create React App
2. 如果你想用Node.js构建服务器端渲染的网站，请查看Next.js
3. 如果你想构建面向内容的静态网站，请查看Gatsby
4. 如果你想创建一个组件库或继承一个已有的代码库，请查看More Flexible Toolchains

Create React App

Create React App 对于学习React来说是一个非常友好的环境，同时这也是使用React创建单页面应用最好的方式。

它帮你搭建了开发环境因此你可以在此环境下使用最新的JavaScript特性，同时它提供了一个良好的开发环境并且会对你的生产输出进行优化。

创建一个React应用，你需要在电脑上安装Node（>=8.10版）和npm（>=5.6版）。使用以下命令即可创建一个React应用

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

提示：npx不是错字，他是npm5.2+自带的package运行工具

Create React App不需要操作后端逻辑或者数据库，它只是创建前端的流水线，所以你可以使用任何你想使用后端框架。尽管它在内部使用Babel和webpack，但是你完全可以不对他们做任何的了解。

当你准备部署你的项目时，在终端运行

npm run build

这段命令将会在build文件夹中生成应用的优化版本。你可以从README和User Guide中了解到更多关于Create React App的内容。

Next.js

Next.js是一个流行的轻量级框架，用于配合React创建的静态服务端渲染应用。它包含了立即可用的样式和路由解决方案，并且假设你使用Node.js作为服务器环境。

从官网了解更多Next.js。

Gatsby

Gatsby是使用React创建静态网页的最好的方法。它能让你在使用React组件的同时输出预渲染的html以及CSS以确保最快的加载速度。

从官网和入门示例集中学习Gatsby。

更灵活的工具链

以下的工具链提供了更多的选择性。我们推荐富有经验的开发者使用它们。

Neutrino 把webpack的强大功能和简单的预设结合在一起，包括了对React app和React 组件的预设。

nwb特别适于将React组件发布到npm上，同样的，它也可用于创建React 应用。

Parcel是一个快速、零配置的web应用打包器，并且可以搭配React一起工作。

Razzle是一个不需要任何配置的服务器渲染框架，而且相比于Next.js，它有着更高的自由度。

从零开始打造工具链

一个JavaScript构建工具链一般由以下几部分组成：

●一个包管理器，就像是yarn和npm。它能够让你利用庞大的第三方package生态系统，并且轻松地安装和更新它们。

●一个打包器，就像是webpack和Parcel。它能把你写好的模块化代码打包进一个小的package，并以此来优化加载时间。

●一个编译器，就像是Babel。它能让你编写的现代JavaScript代码运行在较老的浏览器上。

如果你喜欢从零开始设置你的JavaScript工具链，查看这个指导，它重选创建了一些Create React App功能。

请确认你设置的工具链对生产环境进行了正确的配置。

上一节：在现有项目上使用React
下一节：JSX简介