React的正确开发方式（React-howto 译）

如果你是一个React新手（或是一个中规中矩的前端），你会发现React的生态系统很混乱，有几个原因可以解释这个问题。

• React以前是面对老用户和专家们的
• Facebook只将它用的那部分开源出来了，所以它对那些比Fackbook小的项目没兴趣
• 很多糟糕的营销伪装成React指南

这篇文章会建立在你已经用HTML,CSS 和JavaScript搭建好了项目的前提下 。
话有说回来，你干嘛应该听我的？
外面有那么多自相矛盾的React教程，你说你为啥听我的？
我曾经是开发并开源React的Facebook原始团队里面的一员，不过现在不在Facebook了，我现在一个创业小公司，所以我还拥有非Facebook的视角。

怎么解决React生态系统？
所有的软件都是在一大堆的技术之上建立起来的，所以你要开发App就需要了解足够多的栈。React生态系统之所以让人窒息是因为错误的次序。
你应该朝着这个顺序来学习，不要跳级也不要连着所有东西一起学。

• 原生React
• npm
• JavaScript打包
• ES6
• Routing
• Flux

如果你遇到需要解决的问题就跳过进入到下一步，不需要把这些全都糅合到React里面去。
除此之外，有几个经常在React社区提及被成为”技术前沿“的要点，这些要点都很有意思，但是很难懂，也不受欢迎甚至大部分的app都没有用到。

• 内联样式
• 服务器渲染
• Immutable.js
• Relay,Falcor,等等

原生React的学习
学习React需要浪费很多的时间去安装工具是一个很常见的误解，在官方的文档中你会找到可以复制粘贴的HTML模版，保存好这个html文件你就可以马上开始啦，这一步根本不需要任何的工具，直到你熟悉了React的基础之前也不要开始学习额外的工具。
我仍然觉得学习Reat最简单的方法就是看官方的教程。

npm的学习
npm 是Node.js前端程序猿和开发者分享js代码最受欢迎的包管理工具，涵括了CommonJS的模块化系统允许你用js书写命令行工具来安装。阅读这篇关于为什么说CommonJs对浏览器来说是必要的背景，或在CommonJs Spec Wiki上面了解更多的CommonJs API
在React生态系统中大多数可重复使用的组件，类库和工具都可作为CommonJs模块，用npm来安装。

JavaScript打包工具的学习
出于很多良好的技术原因，ComomJs模块（即npm里面的所有东西）不能直接在浏览器里使用，你需要一个JavaScript “打包工具”来‘捆扎’这些模块到.js文件上再通过<script>标签引用到你的网页当中。JavaScript的打包工具有：webpack 和browserify，两个都是非常好的选择，不过我更喜欢webpack多一点，因为它拥有很多功能使得大型的app开发更加容易。由于它的文档比较混乱，我有一个即插即用的模版作为入门，然后还写了一个webpack使用指南作为更复杂的用例。
React现在还提供了一个官方支持CLI的工具叫Create React App，它可以让你用webpack作为技术支持无需任何配置地建立React的项目，它虽然也有限制，却可以作为一个很好的起点，之后的更新也会加入越来越多的功能。webpack提供了一个叫‘抛出’的功能，它可以复制所有的配置和依赖到你的项目中，让你完全掌控它们。
有一点需要注意的是：ConmonJs使用的是require()方法导入到模块中，所以很多人会困惑，觉得它跟require.js相关。鉴于一些技术原因，我个人建议你避免require.js，而且它在React生态系统中也不受欢迎。

ES6的学习
在JSX(React教程中可以学习到)中，你会在React的例子中发现一些些有趣的语法，这些就是ES6。ES6是js的最新版本，所以你也有可能还没学到。这项技术还很新以至于浏览器现在还没有支持，不过配置相应的打包工具可以翻译它。如果你只想完成React或想以后再把它捡起来，可以跳过ES6。
你或许看到过一些ES6的class被当作是React开发组件首选的言论，这其实是不对的，大多数人（包括Facebook）都还在使用React.createClass()。

路由的学习
如今的“单页面程序应用”风头正盛，这些页面只加载一次，当用户点击一个链接或者按钮，JavaScript启动更新地址栏，但是页面没有刷新。地址栏的管理是一个叫路由的东西完成的。
在React生态系统使用最广的路由是react-router，在创建单页面程序过程中，除非你有好的理由，不然就用react-router吧。不过，如果你不创建单页面程序就不需要使用路由了，很多大型程序项目都是以小组件开始的。

Flux的学习
你可能听过Flux，外面有关于Flux成千上万的谬论。很多人坐下来开发一个app想要定义他们的数据模型，然后就觉得这需要使用Flux。这是一种错误的使用方式，就算是很多组件已经被建立的前提下Flux也应该只能被添加一次。React组件按照一定的层次排列，多数时候，你的数据模型也会依照一定的结构分层，在这种情况下Flux帮不了你很多。然而有时候，你的数据模型并不是分层的，当你觉得你的React组件接收props（属性）很多余的时候，或者你有一部分组件开始变得复杂，这个时候你可能会想去看看Flux。你会知道你什么时候会需要Flux，如果你不确定是否需要，那就是不需要。如果你已经决定了要用Flux，最受欢迎且文档丰富的Flux类库就是Redux，当然你还有很多其他的选择想要去评估它们，但我的建议是紧跟着最受欢迎的一款。

内联样式学习
React预处理，很多人用像SASS这样的预处理器来创建复杂的样式表复用Css样式。鉴于React使得重复组件容易编写，你的样式表就降低了难度。社区上很多人（包括我自己）正在尝试着摆脱公共样式表。出于很多原因这是个相当疯狂的想法，它使得媒体查询更加困难，还可能在使用这项技术的时候有性能上的限制。当你开始React的时候，样式的问题上你还是使用平时惯用的方法吧。等到你对React的工作机制有所感觉了，再来看看其他可以替代的技术。其中一个比较流行的就是BEM，我建议你放弃使用Css预处理器，因为React给你提供了功能更加强大的方式复用样式（通过复用组件），并且JavaScript打包工具可以给你生成更高效的样式（这方面我再OSCON中谈论过多次）。
也就是说，React，像其他JavaScript库一样，只要使用一个Css预处理就好。或者，你也可以使用Css模块，更具体的说是React-css-modules，使用Css模块的同时你仍然要写Css（或是SASS/LESS/Stylus），但是你可以像React里面的内联样式一样创建和管理Css文件。也不需要担心BEM的命名法则来管理你的类名，底层的模块系统会帮你解决这一切。

服务器渲染的学习
服务端的渲染常常被称为是“万能”或‘“同构”JS,这就意味着你可以将React组件渲染到静态的HTML放到服务器上，这大大地提高了初始化启动性能，因为用户再不需要等待JS下载之后才能看到初始界面，React也可以对服务器已经渲染好的HTML进行再利用，它就不用生成客户端了。如果你发现自己的初始化渲染太慢或者想要提高搜索引擎的排名就需要服务器渲染了。虽然谷歌现在索引了客户端渲染的内容，截止2016年一月份它都是衡量负面影响的证明，可能是对客户端性能上面的惩罚。服务器渲染仍然需要准确使用一大堆的工具，出于它无条件透明地支持没有在服务器渲染的React组件，你首先应该建立app再来考虑服务器渲染，不需要重写所有的组件来支持它。

Immutable.js学习
开发React apps时，Immutable.js提供了一套可解决一定的性能问题的数据结构。这是一个庞大的类库，今后你可能会大量地运用到你的app中，除非你对性能的影响看的比较高否则这个也不是完全必要的。

Relay，Falcor等学习
这些技术可减少Ajax请求次数，技术都比较前沿，所以如果你的Ajax请求不多，就不需要Relay或Falcor了。

欢迎分享本文，转载请保留出处：前端ABC » React的正确开发方式（React-howto 译）