JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fb.me/react-with-addons-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
JavaScript 1.7
/** @jsx React.DOM */
var ActionButton = React.createClass({
render: function() {
return (
<button class="ActionButton" onClick={this.props.onAction}>
<span>{this.props.text}</span>
</button>
);
}
});
var Counter = React.createClass({
getInitialState: function() {
return {count: this.props.initialCount};
},
addToCount: function(delta) {
this.setState({count: this.state.count + delta})
},
render: function() {
return (
<div>
<h3>Count: {this.state.count}</h3>
<ActionButton text="+1" onAction={this.addToCount.bind(this, 1)} />
<ActionButton text="-1" onAction={this.addToCount.bind(this, -1)} />
</div>
);
}
});
React.renderComponent(
<Counter initialCount={4} />,
document.body
);