2015-06-26 12:08:32 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2015-07-12 09:54:54 +08:00
|
|
|
<meta charset="utf-8">
|
2015-06-30 18:43:44 +08:00
|
|
|
<title>Basic Example with Click Counter</title>
|
2015-06-26 12:34:20 +08:00
|
|
|
<script src="../../build/react.js"></script>
|
2015-09-19 08:46:50 +08:00
|
|
|
<script src="../../build/react-dom.js"></script>
|
2015-09-19 08:04:43 +08:00
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
|
2015-06-26 12:08:32 +08:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="message" align="center"></div>
|
|
|
|
|
|
2015-09-19 08:04:43 +08:00
|
|
|
<script type="text/babel">
|
|
|
|
|
var Counter = React.createClass({
|
|
|
|
|
getInitialState: function () {
|
|
|
|
|
return { clickCount: 0 };
|
|
|
|
|
},
|
|
|
|
|
handleClick: function () {
|
|
|
|
|
this.setState(function(state) {
|
|
|
|
|
return {clickCount: state.clickCount + 1};
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
render: function () {
|
|
|
|
|
return (<h2 onClick={this.handleClick}>Click me! Number of clicks: {this.state.clickCount}</h2>);
|
|
|
|
|
}
|
|
|
|
|
});
|
2015-09-19 08:46:50 +08:00
|
|
|
ReactDOM.render(
|
|
|
|
|
<Counter />,
|
2015-06-26 12:08:32 +08:00
|
|
|
document.getElementById('message')
|
|
|
|
|
);
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
2015-06-26 12:50:43 +08:00
|
|
|
</html>
|
