React的学习路径——从菜鸟到大牛

如果你之前从未接触过React，你可能会对它的生态感到一头雾水。这可以理解，因为：

1、React针对的是接受能力强的开发者和行业专家；

2、Facebook仅将它实际生产中应用的框架开源了出来，因此它没有关注比Facebook量级小的项目；

3、现在网上的React教程鱼龙混杂、良莠不齐。

别太担心，如果你想开始学习React又不知道该从何学起的话，你不妨看看本文。当然，要学习React，你必须具备基本的HTML、CSS和JavaScript的知识，如果你之前从未接触过前端开发，那么我建议你先学习基础知识。

“凭什么听你的？”

React教程那么多，为什么要听听我的建议呢？我曾是Facebook团队的一员并参与创建和开源React，对React有着较深的理解。现在我已经出来创业，因此我同时还有着不同于Facebook的一些观点。

如果看待React的生态？

每个软件都是基于一个技术栈来实现的，因此如果想要创建你自己的应用，你就必须充分理解自己的技术栈。React的生态看上去很复杂的原因便是人们通常没有按照正确的顺序来去学习。

你需要按照下面的顺序一步一步地学习，不要跳着学或者同时学习多个内容，否则你会感到非常混乱。

基本内容：

1、React

2、npm

3、JavaScript 打包工具

4、ES6

5、路由

6、Flux

当然，并不是要把这些内容全部学完你才能开始使用React，你完全可以先学一步并着手做一点东西，当你发现这一步的知识不足以解决你现在遇到的问题时你再开始下一步的学习。

下面我还额外列出了一些在社区里非常热门的话题技术。它们非常有意思，但是理解起来比较困难。你不一定要将它们应用到你的项目里，但是如果你熟悉了上面列出的这些基本技术并且有了一定的项目经验之后，你不妨了解一下下面这些内容。

进阶话题：

1、内联样式

2、服务端渲染

3、Immutable.js

4、Relay, Falcor等

下面我会一一介绍每一个技术的学习要领，大家根据自己的需要来看就好。

基础部分

学习React

开始学习React并不需要大量的准备工作。在官网的文档里你可以发现一个可以直接复制的HTML模板，将它粘贴到你的本地html文件中就可以开始学习啦。在这一步你不要去管什么工具，你只需要理解React的基础知识就好，当你熟悉了基础知识之后再去学习各种工具的用法。

学习npm

npm是Node.js的包管理工具，也是目前前端开发者和设计师们共享代码的最热门的工具。它集成了一个模块系统CommonJS，可以让开发者安装一些命令行工具。建议大家看看 这篇 文章来了解一下为什么CommonJS对于浏览器来说是必要的，如果想进一步了解CommonJS的API的话可以看看 这篇 。 

学习JavaScript打包工具

出于一些技术的原因，浏览器并不原生支持CommonJS模块。你需要一个JavaScript打包工具来将这些模块打包成一个.js文件，在网页中引入这个打包后的文件就可以在浏览器中运行了。

典型的打包工具有Webpack和browerify。二者都是个不错的选择，但是我更推荐Webpack，因为它具备很多简化大型项目开发的特性。由于Webpack的文档比较晦涩难懂，我针对React设计了一个 Webpack模板 ，如果你想进一步了解Webpack的进阶用法的话，你可以看看 这篇 文章。

有一个误区需要避免：CommonJS利用require()方法来加载模块，因此很多人会下意识地认为他们需要一个require.js来完成这项工作。事实上由于一些技术上的问题我并不推荐你使用require.js，更何况不引入这个库你也可以使用require()方法。

学习ES6

除了JSX（你在React基础部分会学到）以外，你会在React的示例中看到一些陌生的符号。它们便是ES6（ECMAScript第6版，JavaScript最新的语法标准）的新语法，在你学习基础JavaScript的时候不曾遇到过。由于它太新了（2015年颁布），因此还没有得到很好地浏览器支持，但是你的打包工具可以在打包的同时将ES6转成ES5的语法以获得更好的浏览器支持。

当然，使用React不代表一定要使用ES6，你大可以跳过ES6，将重点放在React本身。但是ES6的一些概念解决了很多以往JavaScript的语法问题，建议不打算学习ES6的朋友有精力的时候也了解一下。

强调一点：有些人会推荐你用ES6中新的类来定义React组件，而我建议你不要这么做。事实上多数人（包括Facebook的开发者）在创建React组件时使用的是React.createClass()方法。

学习路由

单页应用是当今的主流。单页的应用只加载一次网页，当用户点击链接或按钮的时候，JavaScript代码会更新页面的内容和地址栏内容，但是网页并没有刷新。地址栏的管理器就被称为路由。React的生态中最受欢迎的且最好用的路由是react-router，创建单页应用的朋友一定要尝试一下。

学习Flux

你可能听说过Flux，而且很多关于Flux的误解你可能也听说过。

很多人在创建应用的使用需要定义一个数据模型，然后他们认为他们需要Flux来实现它。 这不是Flux的正确使用方法 。Flux应该在很多组件加载之后加载。

React组件通常会构成一个层级结构。多数情况下，你项目的数据模型也需要构成一个层级结构。这时Flux并不适合你的项目。然而有时候你的数据模型并没有构成层级关系。当你的React组件开始接收无关联的props值，或者你的一些组件开始变得非常复杂的时候，你可能才需要使用Flux。

你会清楚你什么时候需要Flux的。如果你不确定你是否需要使用它，那就不要用。

如果你确定需要使用Flux的话，那么我建议你使用目前最受欢迎且文档齐全的Flux库——Redux。当然Flux的框架不止这一个，但是我建议大家去用最热门的那一个。

以上便是React技术栈中的基础部分，大部分开发者了解到这一步就可以了。如果你已经熟悉了React的用法并有了一定的项目经验，你可以接着学习下面这些进阶技术。

进阶部分

学习内联样式

在React诞生之前，很多开发者通过SASS这样的预编译器来重用非常复杂的样式表。因为React简化了重用组件的方法，因此你的样式表也可以被简化了。社区里的很多人（包括我）甚至都开始尝试不写样式表。这是一个非常疯狂的想法，它使得媒体查询变得复杂，而且还会对性能产生潜在的影响。因此，建议各位刚接触React的时候， 用你最常用的方法来编写样式 。

如果你已经习惯了React的用法，你可以尝试使用其他技术来写样式。最热门的技术便是 BEM。 逐步放弃使用那些CSS预编译器吧，React给你提供了一个更加强大的方法来重用样式，你的JavaScript打包工具会生成更加高效的样式表。

你也可以尝试一下CSS模块，如 react-css-modules 。你仍可以编写纯CSS或SASS/LESS/Stylus，但是你可以像React的内联样式那样管理、组织你的CSS文件。你不需要像BEM那样再为管理类的名称而费心，因为模块系统都帮你完成了。

学习服务端渲染

服务器渲染通常又称为“全局”或“同构”JS，是指将React组件在服务端渲染成静态HTML文件。这会加快首次加载的速度，因为用户不需要等待浏览器下载JS即可看到初始的UI，而且React可以重用服务端渲染的HTML，因此不需要在客户端创建。

如果你发现你的首次渲染速度太慢或者你想提升你的搜索引擎排名的话，你可以尝试一下服务端渲染。尽管谷歌以客户端渲染的内容为索引，但是在2016年1月份开发者通过实际测试发现：由于客户端渲染有潜在的性能问题，它对排名是有负面影响的。

要想正确使用服务端渲染还需要很多工具。即便你在编写时没有考虑到服务端渲染的问题，它也可以很好地支持React组件。因此你应该先创建好你的应用，之后再考虑服务端渲染的问题。你不需要为了支持服务端渲染而去把你的所有组件重写一遍。

学习Immutable.js

Immutable.js 提供了很多可以解决React性能问题的数据结构。如果你想改进你的应用的性能，你不妨尝试一下它。

学习Relay和Falcor

这些技术可以帮助你减少AJAX请求的次数。它们是非常前沿的技术，如果你的AJAX请求并不是很多，那么你就不需要使用它们。

结语

说了这么多，你可能还是会觉得要学的东西好多。为什么说你的技术储备是一个技术栈？因为你会根据需要不断地去push进去新的东西。这个push的过程不是无脑的。优先将基础的东西push进去并不断消化。当你的技术栈的基础稳固了，出现了更多的需要时，再去push新的东西。如果一股脑的没有顺序的push进太多东西，你的技术栈会瞬间崩塌，你也会变得不知所措。因此，记住一点：

根据你的需要来学习，从基础开始

via petehunt/react-howto(github)