JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
JavaScript 1.7
var Item = React.createClass({
render: function() {
console.log("rendering");
return <li>{this.props.text}</li>;
}
});
var List = React.createClass({
render: function() {
if (this.props.ordered) {
return <ol>{this.props.children}</ol>;
} else {
return <ul>{this.props.children}</ul>;
}
}
})
var Container = React.createClass({
getInitialState: function() {
return {ordered: true};
},
render: function() {
return (
<div>
<List ordered={this.state.ordered}>
<Item text="apple" />
<Item text="orange" />
<Item text="banana" />
</List>
<button onClick={this.toggleOrdered}>
Click Me
</button>
</div>
);
},
toggleOrdered: function() {
this.setState({ordered: !this.state.ordered});
}
});
React.render(<Container />, document.body);