JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fb.me/react-js-fiddle-integration.js"></script>

<div id="content"></div>
<hr>
<div id="log" style="white-space: pre-line;"></div>

JavaScript 1.7

/** @jsx React.DOM */

var logEl = document.getElementById("log");
function log(message) {
    logEl.textContent += message + "\n";
}

var Expensive = React.createClass({
    componentDidMount: function() {
        log("expensive #" + this.props.i + " mount");
    },

    componentWillUnmount: function() {
        log("expensive #" + this.props.i + " unmount");
    },

    render: function() {
        return <span>(expensive #{this.props.i})</span>
    }
});

var Hello = React.createClass({
    getInitialState: function() {
        return {split: false};
    },

    handleClick: React.autoBind(function() {
        this.setState({split: !this.state.split});
    }),

    render: function() {
        var button = <input type="button" onClick={this.handleClick} value="toggle split" />;

        if (this.state.split) {
            return <div>
                {button}
                <p><Expensive i={1} /></p>
                <p><Expensive i={2} /></p>
            </div>
        } else {
            return <div>
                {button}
                <p><Expensive i={1} /><br />
                <Expensive i={2} /></p>
            </div>;
        }
    }
});
 
React.renderComponent(<Hello name="World" />, document.getElementById("content"));