react 从入门到删库跑路
简单点，学react的方式简单点儿，递进的废话请请省略，看react怎么写。
说人话不墨迹。
1.为啥学react
a)学好了在涨工资
b)学不好也可以装B
从技术上说，两字好用，用的多，为啥好用，
react的优点：
1.组件化 组件化利于分工协作，降低程序复杂度，如果一个大型程序你还用传统方式去做，你那么基本上你头发会掉的很快
2.虚拟DOM ，性能高
3.跨平台，兼容移动端
recat的缺点：
1.成熟案例少，中文资料少，基本上你学完了头发掉的也跟你广坤似的了。
2.不按套路出牌，跟我们传统MVC不太一样。
3.JSX写起来跟js有点区别，以前在js里面看起来像错误的玩意在jsx里面跑的爽爽的，让你怀疑人生。
4.陌生单词多，什么redux了，什么route了，什么Flex了，这都什么J8玩意。
先告诉大家一个结论，react不难学，你不会的东西就是你用不到的东西，你用到了也就会了。比如JSX语法简单的让人发指。
直接开整技术
2.了解JSX
react 用了很多ES6语法，然后JSX也没法直接运行，需要用babel编译成js才能运行，我们使用babel，就是一个工具把JSX和ES6编译成浏览器能够跑起来的ES5的东西。
安装babel，我是很讨厌为了学一个东西去学另外一个东西的，比如为了学react要去学JSX，为了学JSX要学babel，为了学babel要使用npm或者bower，本身技术的进步是为了解决问题，而解决问题的方式是引进新的问题，本身思路就是个悖论。简单的说你会为了喝一杯纯牛奶去种草么？不过因为我们是学习阶段，而不是去设计react所以多学点东西总不是坏事儿，学习就像吃猪蹄，什么味儿的都该尝尝，我们今天就不用NPM去安装babel，而是用bower。你就把它当成npm去用换个单词儿的事儿，我就不安利了，毕竟bower也不是什么好鸟儿。
安装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>
这个能说明问题，但是你能懂，写项目费劲，为啥，你不会多组件嵌套，下个教程我们就撸它。
