现在最热门的前端框架react，自开源以来受到越来越多的关注和使用，现在带大家用最简单的方式学习react。react 入门 ——真正react开发环境+多组件嵌套实际项目
为什么学习react
a)学好了涨工资
b)从技术上说，两字好用，用的多，为啥好用
react的优缺点
一、react的优点：
1.组件化：组件化有利于分工协作，降低程序复杂度，如果一个大型程序你还用传统方式去做，你那么基本上你头发会掉的很快
2.虚拟DOM，性能高
3.跨平台，兼容移动端
二、recat的缺点：
1.成熟案例少，中文资料少。
2.不按套路出牌，跟我们传统MVC不太一样。
3.JSX写起来跟js有点区别，以前在js里面看起来像错误的玩意在jsx里面跑的爽爽的，让你怀疑人生。
4.陌生单词多，什么redux了，什么route了，什么Flex了，这都什么。
先告诉大家一个结论，react不难学，你不会的东西就是你用不到的东西，你用到了也就会了。比如JSX语法简单的让人发指。
了解JSX
react 用了很多ES6语法，然后JSX也没法直接运行，需要用babel编译成js才能运行，我们使用babel，就是一个工具把JSX和ES6编译成浏览器能够跑起来的ES5的东西。
安装babel，其实很讨厌为了学一个东西去学另外一个东西的，比如为了学react要去学JSX，为了学JSX要学babel，为了学babel要使用npm或者bower，本身技术的进步是为了解决问题，而解决问题的方式是引进新的问题，本身思路就是个悖论。简单的说你会为了喝一杯纯牛奶去种草么？
不过因为我们是学习阶段，而不是去设计react，所以多学点东西总不是坏事儿，我们今天就不用NPM去安装babel，而是用bower。你就把它当成npm去用换个单词儿的事儿
安装babel.
bower install babel下载react
bower install react直接上例子，我这里就不引入bower里面的js而是直接放到单独文件夹了
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="js/react.js" charset="utf-8"></script><script src="js/react-dom.js" charset="utf-8"></script><script src="js/browser.js" charset="utf-8"></script><script type="text/babel"> window.onload = function () { var oDiv = document.getElementById('div1'); ReactDOM.render( <span>111</span>, oDiv ); }; </script></head><body> <div id="div1"></div></body></html>上面这么用是正确的，但是发挥不出react的组件化威力，要用class方式。
重点→敲小黑板划重点了，注意看这个才是正经react用法，老版本还是忘了吧。重点看下面，组件是可以加属性的，属性不怎么好，状态比较好
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="js/react.js" charset="utf-8"></script><script src="js/react-dom.js" charset="utf-8"></script><script src="js/browser.js" charset="utf-8"></script><script type="text/babel"> class Tab extends React.Component{ render(){ return <span>我是{this.props.name}，今年{this.props.age}岁</span>; } } window.onload = function () { ReactDOM.render( <Tab name="leo" age="18"/>, document.body ); };</script></head><body></body></html>
上面是属性的玩法，下面来个状态的。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="js/react.js" charset="utf-8"></script><script src="js/react-dom.js" charset="utf-8"></script><script src="js/browser.js" charset="utf-8"></script><script type="text/babel"> class Tab extends React.Component{ constructor(args){ super(args); this.state ={value:''} } render(){ return <div> <input type="text" onChange={this.fn.bind(this)}/> <span>{this.state.value}</span> </div>; } fn(ev){ this.setState({ value:ev.target.value }); } } window.onload = function () { var oDiv = document.getElementById('div1'); ReactDOM.render( <Tab />, oDiv ); };</script></head><body> <div id="div1"></div></body></html>