[译]React安装：建立react应用

原文连接：reactjs.org/docs/create…

使用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功能。

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