<main></main>
body {
background:gray;
}
.counter {
margin-top: 2rem;
}
var Counter = React.createClass({
getInitialState: function() {
return { clicks: 0 };
},
onClick: function(e) {
this.setState({ clicks: this.state.clicks + 1 });
},
render: function() {
return (<div className="counter">
<button onClick={this.onClick}>Clicks: {this.state.clicks}</button>
</div>);
}
});
var App = React.createClass({
render: function render() {
return (
<div>
<Counter />
<Counter />
<Counter />
</div>
);
}
});
ReactDOM.render(<App name="ynon" />, document.querySelector('main'));
View Compiled
This Pen doesn't use any external CSS resources.