JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript 1.7

/** @jsx React.DOM */

var Button = React.createClass({
    render: function() {
        if (this.props.disabled){
            return React.DOM.span(this.props, this.props.children);
        }else{
            return React.DOM.button(this.props, this.props.children);
        }
    },
    componentDidMount: function(){
        $(this.getDOMNode()).css({outline: '5px dotted purple'});
    },
    componentWillUnmount: function(){
				alert("hi");
    }
});

var ColorToggler = React.createClass({
    getInitialState: function(){
        return {color: 'salmon'};
    },
    render: function(){
        style = {background: this.state.color}

        changeColorTo = function(color){
            return this.changeColorTo.bind(null, color);
        }.bind(this);


        return (
            <div style={style}>
                <strong>
                    The purple dotted outline on the two elements below was placed there via
                    the componentDidMount hook. This serves only as an example. In the real 
                    world this would be an event binding.
                    <br/>
                    <br/>
                    When you click the button below the React Button class renders a different 
                    base dom node. The React component does not unmount and remount but its
                    base dom node is destroyed and recreated
                    <br/>
                    <br/>
                    When this heppens componentWillUnmount and componentDidMount are not fired
                    and they should be
                </strong>
                <p>
                    <Button disabled={this.state.color == 'salmon' } onClick={changeColorTo('salmon')}>Red</Button>
                </p>
                <p>
                    <Button disabled={this.state.color == 'teal'}    onClick={changeColorTo('teal')}>Blue</Button>
                </p>
            </div>
        )
    },
    changeColorTo: function(color){
       ...