<main></main>
var Clicker = React.createClass({
getInitialState: function() {
return { clicks: 0 };
},
handleClick: function() {
this.setState({ clicks: this.state.clicks+1 });
},
render: function() {
return (<div class="clicker">
<p>You clicked <span class="panel">{this.state.clicks}</span> times</p>
<button onClick={this.handleClick}>Click Me</button>
</div>);
}
});
var App = React.createClass({
render: function() {
return <div>
<Clicker />
<Clicker />
<Clicker />
<Clicker />
<Clicker />
<Clicker />
</div>
}
});
ReactDOM.render(<App />, document.querySelector('main'));
View Compiled
This Pen doesn't use any external CSS resources.