<a href="http://www.ruanyifeng.com/blog/2015/03/react.html">React 入门实例教程</a>
1、Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
<!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">
var LikeButton = React.createClass({
//验证props
propTypes: {
name: React.PropTypes.string.isRequired,
},
//默认初始值
getInitialState: function() {
return {liked: false,value: 'Hello!'};
},
btclick: function() {
//ref获取真实dom
this.refs.myTextInput.focus();
},
handleClick: function(event) {
//设置默认初始值的内容,设置完后重新渲染
this.setState({liked: !this.state.liked});
},
inputchange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
console.log(this.props.name);//获取name属性
var text = this.state.liked ? 'like' : 'haven\'t liked';
var value = this.state.value;
return (
<div>
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
<input type="text" ref="myTextInput" value={value} onChange={this.inputchange}/>
<input type="button" value="Focus the text input" onClick={this.btclick} />
<p>{value}</p>
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
</div>
);
}
});
ReactDOM.render(
<LikeButton name="this.props获取">
<span>hello</span>
<span>world</span>
</LikeButton>,
document.getElementById('example')
);
</script>
</body>
</html>
