<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>
a). 注意点最后一个<script>标签的type属性为text/label,这是因为React独有的JSX语法和JS不兼容。凡是使用JSX的地方，都要加上type="text/label";
b). 上面的代码使用了三个库:react.js/react-dom.js/Browser.js,它们都是必须首先加载。其中react.js是React的核心库，react-dom.js是提供与DOM相关的功能，Browser.js的作用是将JSX语法转为javascript语法。（这一步是很耗时间的，在实际上线的时候，应该将它放到服务器完成）
1.ReactDOM.render()
ReactDOM.render是React的最基本的方法，用于将模板转为HTML语言，并插入指定的DOM节点，如：
ReactDOM.render(
<h1>Hello,world</h1>,
document.getElementById('example')
);
//上面代码将一个 h1 标题，插入 example 节点
2.JSX语法
JSX的语法允许HTML语言直接写在JavaScript语言之中，不加任何引号具体点来说：JSX遇到HTML标签(以<开头)，就用HTML规则解析；遇到代码块(以{开头)，就用JavaScript规则解析
3.组件
React运毒将代码封装成组件(Component),然后想插入普通HTML标签一样，在网页中插入这个组件。React.createClass方法就是用于生成一个组件类，如：
var HelloMessage=React.createClass({
render:function(){
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(<HelloMessage name="John" />,
document.getElementById('example')
)
==>组件的属性可以在组件类的this.props对象上获取,
比如name属性就可以通过this.props.name读取补充：this.props.children表示组件的左右子节点；
组件类的PropTypes属性用来验证组件实例的属性是否符合要求
4.获取真实的DOM节点
组件并不是真实的DOM节点，而是存在于内存之中的一种数据结构，叫作虚拟DOM(virtual DOM).只有当它插入文档之后才会变成真实的DOM。更加React的设计，所有的DOM变动都是现在虚拟DOM上发生，然后再将实际发生变动的部分，反应在正式DOM上，
这种算法叫作DOM Diff,它可以极大提高网页的性能表现
如果需要从组件获取真实DOM的节点，要用到ref属性
5.this.state
组件避免不了和用户交互，React将组件看成一个状态机，开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染UI
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven't liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
分析：getInitialState方法用于定义初始状态，它就是一个对象，这个对象可以通过this.state属性读取,当喻户点击组件，导致状态变化。this.setState方法就会修改状态值，每次修改以后，自动调用this.render方法,再次渲染组件
补充：
this.props和this.state都用于描述组件的特性,前者表示那些一旦定义，就不再改变的特性，而后者会随着用户互动而放生变化的特性
6.组件的生命周期
组件的生命周期分为三个状态:
Mounting:已插入真实DOM===>Updating:正在被重新渲染===>Unmounting:已移出真实DOMReact为每个状态都提供了两个处理函数,
will函数再进入状态之间调用,did函数再进入状态之后调用，三种状态攻击五种处理函数：
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()React 还提供两种特殊状态的处理函数：componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用，如：
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},
componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},
render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});
ReactDOM.render(
<Hello name="world"/>,
document.body
);
注意style={{opacity:this.state.opacity}},因为一重大括号表示JavaScript语法，第二重大括号表示样式对象
