JSFiddle - React, Tailwind, and code Playground

by also

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 */

function log(s) {
    // keep track of how many times a method has been called and log it
    return function () {
        var n = this[s + '_calls'] || 1;
        console.log(this.props.name, s, n);
        this[s + '_calls'] = n + 1;
    }
}

function createClass() {
return React.createClass({
    render: function() {
        log('render').apply(this);
        return this.state.component;
    },
    getInitialState: function() {
        log('getInitialState').apply(this);
        return {component: <div>Hello {this.props.name}</div>};
    },
    componentWillMount: log('componentWillMount'),
    componentDidMount: log('componentDidMount'),
    componentWillReceiveProps: function (nextProps) {
        log('componentWillReceiveProps').apply(this);
        var changed = this.props.name !== nextProps.name;
        console.log(this.props.name, nextProps.name, changed);
        return changed;
    },
    componentWillUpdate: log('componentWillUpdate'),
    componentDidUpdate: log('componentDidUpdate'),
    componentWillUnmount: log('componentWillUnmount')
});
}

var A = createClass();
var B = createClass();
var C = createClass();
var D = createClass();

var a = <A name="A" key="a"/>
var b = <B name="B" key="b"/>
var c = <C name="C" key="c"/>
var d = <D name="D" key="d"/>

// this doesn't work if the same instance is used more than once,
// like <div>{a}{a}</div>, which makes sense because the instance is
// used as the "mounted component" or whatever it's called.
// it can't be mounted in more than one place

var List = React.createClass({
    render: function () {
        return <div>{this.props.components}</div>
    }
});

var components = [a, b, c, d];
var outer = List({components: []});

React.renderComponent(outer, document.body);

function render() {
    console.log('rendering...');
    outer.setProps({components: components.slice(1)});
    components.reverse();
    console.log('done');
    console.log(' ');
}
setInterval(render, 1000);