<!DOCTYPE html>
<html>
<head>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<!--LikeButton组件，getInitialstate方法用于定义初始状态，这个对象可以通过this.state属性读取当用户点击组件，导致状态变化，this.setState方法就修改状态值
React组件支持很多事件，除了Click KeyDown copy scroll事件
-->
<div id="example"></div>
<script type="text/babel">
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‘ : ‘have\‘t liked‘;
return(
<div>
<p onClick={this.handleClick}>
Click to toggle.
</p>
<p>
You {text} this.
</p>
</div>
)
}
});
ReactDOM.render(
<LikeButton/>,
document.getElementById(‘example‘)
);
</script>
</body>
</html>