前言
我之前喜欢玩一款游戏：全民飞机大战，而且有点痴迷其中，如果你想站在游戏的第一阶梯，便需要不断的练技术练装备，但是腾讯的游戏一般而言是有点恶心的，他会不断的出新飞机、新装备、新宠物，所以，很多时候你一个飞机以及装备还没满级，新的装备就又出来了，并且一定是更强！
于是很多人便直接抛弃当前的飞机与装备，追求更好的，这个时候如果是人民币玩家或者骨灰级大神玩家的话，基本可以很快站在世界的顶端，一者是装备好，一者是技术好，但是我不愿意投入太多钱，也不愿意投入过多精力，于是在一套极品装备满级后会积累资源，因为一代之间变化不会太大，到第二代甚至第三代才开始换飞机换装备，也基本处于了第一阶梯，一直到一次游戏大更新，直接导致我当前的飞机与装备完全二逼了，我当时一时脑热投入了所有资源去刷新的极品装备，最后闹的血本无归，于是便删除了该游戏，一年时间付诸东流！！！
再回过头来看最近两年前端的变化，单是一个前端工程化工具就变了几次，而且新出来的总是叫嚷着要替换之前的，grunt->gulp->webpack->es6
再看前端框架的一些产量：backbone、angularJS、react、canJS、vueJS……
真有点乱花渐欲迷人眼的意思，似乎前端技术也开始想要坑前端玩家，因为人家会了新技能，你就落后了，于是很多技术沉淀已经足够的大神便直接在团队使用某一技术，带领团队组员深入了解了该技术的好，并大势宣传新技术。
很多人在这种情况下就中招了！他们可能会抛弃现有技术栈，直接跟风新的技术，在现有装备都没满级的情况下又去刷新装备，如果哪天一次游戏玩法大更新，大神依旧一套极品装备在那风骚，而炮灰仓库中积累着一箩筐低等级的极品装备，却没有可用的，不可谓不悲哀！
一门技术从入门到精通，是需要时间的，在有限的时间中要学习那么多的新技术，还得落地到实际工作中，而每一次新技术的落地都是对曾经架构的否定与推翻，这个成本不可谓不高，对一些创业团队甚至是致命的。工作中也没那么多时间让你折腾新东西，所以一定是了解清楚了一门再去学习其它的，不要半途而废也不要盲目选型。
我最近回顾了这几年所学，可以说技术栈没有怎么更新，但是我对我所习的每一个技术基本上进入了深入的了解：
① 在MVVM还不太火的时候使用了MVC框架一直到最近，对为什么要使用这种模式，这种模式的好处有了比较深入的了解，并且已经碰到了更复杂的业务逻辑
② 当一个页面过于复杂时（比如1000多行代码的订单填写页），我能通过几年沉淀，将之拆分为多个业务组件模块，保持主控制器的业务清晰，代码量维护在500行之内，并且各子模块业务也清晰，根据model进行通信
③ 使用Grunt完成前端工程化，从构建项目，到打包压缩项目，到优化项目，总的来说无往不利
④ ……
就编程方法，思维习惯，解决问题的方法来说，与两年前有了很大的变化，而且感觉很难提高了。于是我认识到，就现有的装备下，可能已经玩到极限了，可能到了跟风的时候了，而时下热门的ReactJS似乎是一个很好的切入点，React一端代码多端运行的噱头也足够。
初识ReactJS
我最初接触ReactJS的时候，最火的好像是angular，React Native也没有出现，看了他的demo，对其局部刷新的实现很感兴趣。结果，翻看源码一看洋洋洒洒一万多行代码，于是马上便退却了。却不想现在火成了这般模样，身边学习的人多，用于生产的少，我想幕后必然有黑手在推动！也可以预测的是，1,2年后会有更好的框架会取代他，可能是原团队的自我推翻，也有可能是Google公司又新出了什么框架，毕竟前端最近几年才开始真正富客户端，还有很长的路要走。当然，这不是我们关心的重点，我们这里的重点是Hello world。
ReactJS的Hello World是这样写的：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <script src="build/react.js" type="text/javascript"></script> <script src="build/JSXTransformer.js" type="text/javascript"></script> </head> <body> <div id="example"> </div> <script type="text/jsx"> React.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html> |
|
1 |
<div id="example"><h1 data-reactid=".0">Hello, world!</h1></div> |
React一来就搞了一个标新立异的地方：jsx（js扩展），说实话，这种做法真的有点大手笔，最初的这种声明式标签写法，在我脑中基本可以追溯到5年前的.net控件了，比如gridview与datalist组件。
在text/jsx中的代码最初不会被浏览器理会，他会被react的JSXTransformer编译为常规的JS，然后浏览器才能解析。这里与html模板会转换为js函数是一个道理，我们有一种优化方案是模板预编译，即：
在打包时候便将模板转换为js函数，免去在线解析的过程，react当然也可以这样做，这里如果要解析的话，会是这个样子：
|
1 2 3 4 |
React.render( React.createElement("h1", null, "Hello, world!"), document.getElementById('example') ); |
因为render中的代码可以很复杂，render中的代码写法就是一种语法糖，帮助我们更好的写表现层代码：render方法中可以写html与js混杂的代码：
|
1 2 3 4 5 |
var data = [1,2,3]; React.render( <h1>Hello, {data.toString(',')}!</h1>, document.getElementById('example') ); |
|
1 2 3 4 5 6 7 8 9 |
var data = [1,2,3]; React.render( <h1>{ data.map(function(v, i) { return <div>{i}-{v}</div> }) }</h1>, document.getElementById('example') ); |
所以，react提供了很多类JS的语法，JSXTransformer相当于一个语言解释器，而解析逻辑长达10000多行代码，这个可不是一般屌丝可以碰的，react从这里便走出了不平常的路，而他这样做的意义是什么，我们还不知道。
标签化View
react提供了一个方法，将代码组装成一个组件，然后像HTML标签一样插入网页：
|
1 2 3 4 5 6 7 8 9 10 |
var Pili = React.createClass({ renderass="crayon-v">Pili = React.createClass({ render又出来了，并且一定是更强！
于是很多人便直接抛弃当前的飞机与装备，追求更好的，这个时候如果是人民币玩家或者骨灰级大神玩家的话，基本可以很快站在世界的顶端，一者是装备好，一者是技术好，但是我不愿意投入太多钱，也不愿意投入过多精力，于是在一套极品装备满级后会积累资源，因为一代之间变化不会太大，到第二代甚至第三代才开始换飞机换装备，也基本处于了第一阶梯，一直到一次游戏大更新，直接导致我当前的飞机与装备完全二逼了，我当时一时脑热投入了所有资源去刷新的极品装备，最后闹的血本无归，于是便删除了该游戏，一年时间付诸东流！！！ 再回过头来看最近两年前端的变化，单是一个前端工程化工具就变了几次，而且新出来的总是叫嚷着要替换之前的，grunt->gulp->webpack->es6 再看前端框架的一些产量：backbone、angularJS、react、canJS、vueJS…… 真有点乱花渐欲迷人眼的意思，似乎前端技术也开始想要坑前端玩家，因为人家会了新技能，你就落后了，于是很多技术沉淀已经足够的大神便直接在团队使用某一技术，带领团队组员深入了解了该技术的好，并大势宣传新技术。 很多人在这种情况下就中招了！他们可能会抛弃现有技术栈，直接跟风新的技术，在现有装备都没满级的情况下又去刷新装备，如果哪天一次游戏玩法大更新，大神依旧一套极品装备在那风骚，而炮灰仓库中积累着一箩筐低等级的极品装备，却没有可用的，不可谓不悲哀！ 一门技术从入门到精通，是需要时间的，在有限的时间中要学习那么多的新技术，还得落地到实际工作中，而每一次新技术的落地都是对曾经架构的否定与推翻，这个成本不可谓不高，对一些创业团队甚至是致命的。工作中也没那么多时间让你折腾新东西，所以一定是了解清楚了一门再去学习其它的，不要半途而废也不要盲目选型。 我最近回顾了这几年所学，可以说技术栈没有怎么更新，但是我对我所习的每一个技术基本上进入了深入的了解： ① 在MVVM还不太火的时候使用了MVC框架一直到最近，对为什么要使用这种模式，这种模式的好处有了比较深入的了解，并且已经碰到了更复杂的业务逻辑 ② 当一个页面过于复杂时（比如1000多行代码的订单填写页），我能通过几年沉淀，将之拆分为多个业务组件模块，保持主控制器的业务清晰，代码量维护在500行之内，并且各子模块业务也清晰，根据model进行通信 ③ 使用Grunt完成前端工程化，从构建项目，到打包压缩项目，到优化项目，总的来说无往不利 ④ …… 就编程方法，思维习惯，解决问题的方法来说，与两年前有了很大的变化，而且感觉很难提高了。于是我认识到，就现有的装备下，可能已经玩到极限了，可能到了跟风的时候了，而时下热门的ReactJS似乎是一个很好的切入点，React一端代码多端运行的噱头也足够。 初识ReactJS我最初接触ReactJS的时候，最火的好像是angular，React Native也没有出现，看了他的demo，对其局部刷新的实现很感兴趣。结果，翻看源码一看洋洋洒洒一万多行代码，于是马上便退却了。却不想现在火成了这般模样，身边学习的人多，用于生产的少，我想幕后必然有黑手在推动！也可以预测的是，1,2年后会有更好的框架会取代他，可能是原团队的自我推翻，也有可能是Google公司又新出了什么框架，毕竟前端最近几年才开始真正富客户端，还有很长的路要走。当然，这不是我们关心的重点，我们这里的重点是Hello world。 ReactJS的Hello World是这样写的：
React一来就搞了一个标新立异的地方：jsx（js扩展），说实话，这种做法真的有点大手笔，最初的这种声明式标签写法，在我脑中基本可以追溯到5年前的.net控件了，比如gridview与datalist组件。 在text/jsx中的代码最初不会被浏览器理会，他会被react的JSXTransformer编译为常规的JS，然后浏览器才能解析。这里与html模板会转换为js函数是一个道理，我们有一种优化方案是模板预编译，即： 在打包时候便将模板转换为js函数，免去在线解析的过程，react当然也可以这样做，这里如果要解析的话，会是这个样子：
因为render中的代码可以很复杂，render中的代码写法就是一种语法糖，帮助我们更好的写表现层代码：render方法中可以写html与js混杂的代码：
所以，react提供了很多类JS的语法，JSXTransformer相当于一个语言解释器，而解析逻辑长达10000多行代码，这个可不是一般屌丝可以碰的，react从这里便走出了不平常的路，而他这样做的意义是什么，我们还不知道。 标签化Viewreact提供了一个方法，将代码组装成一个组件，然后像HTML标签一样插入网页： |
