<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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js