<main></main>
// add component
var Helper = function(props) {
return <p>{props.hero} can help</p>
}
Helper.propTypes = {
hero: React.PropTypes.string.isRequired
};
var AppComponent = React.createClass({
getInitialState: function() {
return { clicks: 0 };
},
inc: function() {
this.setState({ clicks: this.state.clicks+1 });
},
render: function() {
return <div className="clicker">
<Helper hero={this.state.clicks > 10 ? "bob" : "jane"} />
<p>Clicks: {this.state.clicks}</p>
<button onClick={this.inc}>Click Me</button>
</div>
}
});
React.render(<AppComponent />, document.querySelector('main'));
View Compiled
This Pen doesn't use any external CSS resources.