React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by sairion

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>
<div id="logger">
    
</div>

CSS

#logger {
   font-family: "Source Code Pro", monaco, inconsolata, monospace; 
}
.log-command {
    background-color: #eee;
    color: #555;
    padding: 10px;
}
.log-lifecycle {
    color: green;
    padding: 5px;
    padding-left: 40px
}

JavaScript 1.7

// This fiddle is made to demonstrate how lifecycle methods gets called.
// by @sairion
// ref: https://gist.github.com/jaceju/ae6e90362f6b8c472b11
//
var logger = document.querySelector('#logger');
var container = document.querySelector('#container');
var test; 

function log(className, text) {
    var log;
    if (className && text) {
        log = document.createElement('div');
        log.classList.add(className);
        log.textContent = text;
    } else {
        log = document.createElement('br');
    }

    logger.appendChild(log);
}

function logCommand (text) {
    log('log-command', text);
}

function logLifecycleMethodCall (text) {
    log('log-lifecycle', text);
}

var TestComponent = React.createClass({
    getInitialState: function () {
        logLifecycleMethodCall('getInitialState()');
        return { user: 'sairion' };
    },

    componentWillMount: function () {
        logLifecycleMethodCall('componentWillMount()');
    },

    componentDidMount: function () {
        logLifecycleMethodCall('componentDidMount()');
    },

    componentWillReceiveProps: function (nextProps) {
        logLifecycleMethodCall('componentWillReceiveProps(nextProps)');
    },

    handleChange: function (e) {
        logLifecycleMethodCall(e.target.value);
        this.setState({user: e.target.value});
    },

    shouldComponentUpdate: function (nextProps, nextState) {
        logLifecycleMethodCall('shouldComponentUpdate(nextProps, nextState)');
        return true;
    },
    componentWillUpdate: function (nextProps, nextState) {
        logLifecycleMethodCall('componentWillUpdate(nextProps, nextState)');
    },
    
    componentDidUpdate: function (prevProps, prevState) {
        logLifecycleMethodCall('componentDidUpdate(prevProps, prevState)');
    },
    
    componentWillUnmount: function () {
        logLifecycleMethodCall('componentWillUnmount()');
    },
    render: function () {
        return (
            <div>
                <div>Title:...