现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我。
React的基础很简单，极易上手。
React全都是围绕着组件的， 所以React基础也就是：写组件的jsx、组件的生命周期以及组件的属性和状态。
- jsx，只要是用过html模板的分分钟就能写了；
- 生命周期就是组件在创建、销毁、更新阶段的那几个回调函数，让你有机会再这几个关键点上对组件和环境做点手脚；
- 属性就像html标签里的属性一样决定了这个组件是什么样的；
- 状态，像是属性很像也和属性很不同，它是可变的， 是控制组件的唯一入口，这个以后可得细说。
- redux，其实就是在鼓捣状态。
React一个标新立异的地方：jsx（js扩展）
JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。
在text/jsx中的代码最初不会被浏览器理会，他会被react的JSXTransformer编译为常规的JS，然后浏览器才能解析。
<script src="react/build/react.js"></script> <script src="react/build/JSXTransformer.js"></script>
或者
<script src="react/build/react.js"></script> <script src="babel/browser.js"></script>
前者对应的type="text/jsx"，后面对应的type="text/babel"
推荐使用text/babel，因为它支持ES6语法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React学习</title>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>
<script src="./js/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
react.js 是 React 的核心库
react-dom.js 是提供与 DOM 相关的功能
Browser.js 的作用是将 JSX 语法转为 JavaScript 语法
ReactDOM.render()
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。
React.createClass()
React.createClass 方法就用于生成一个组件类
var Myfirst = React.createClass({
render : function(){
return <div>我的第一个组件</div>;
}
})
ReactDOM.render(
<Myfirst />,
document.getElementById('example')
);
ReactJS有一些奇怪的地方：
1 ： 组件首字母必须大写
2 ： render 是表达的意思，它的匿名函数必须有一个return
组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
);
组件嵌套(component)：组件的高复合应用
一个页面我们可以认为是一个组件集合，它是由多个组件嵌套而成
<script type="text/babel">
var Myfirst = React.createClass({
render : function(){
return (
<div>我的第一个组件</div>
<MySecond />
);
}
})
var MySecond = React.createClass({
render : function(){
return (
<h3>我的第二个组件</h3>
<MyThird />
);
}
})
var MyThird = React.createClass({
render : function(){
return (<h6>我的第六个组件</h6>)
}
})
ReactDOM.render(
<Myfirst />,
document.getElementById('example')
);
</script>
上面的代码会报错：Uncaught SyntaxError: embedded: Adjacent JSX elements must be wrapped in an enclosing tag
提示我们，嵌套的组件(component),必须要用一个标签包含，修改如下：
<script type="text/babel">
var Myfirst = React.createClass({
render : function(){
return (
<div> {/* 添加的包含标签 */}
<div>我的第一个组件</div>
<MySecond />
</div>
);
}
})
var MySecond = React.createClass({
render : function(){
return (
<div> {/* 添加的包含标签 */}
<h3>我的第二个组件</h3>
<MyThird />
</div>
);
}
})
var MyThird = React.createClass({
render : function(){
return (<h6>我的第六个组件</h6>)
}
})
ReactDOM.render(
<Myfirst />,
document.getElementById('example')
);
</script>