React component lifecycle

Simple React component that logs every method call to reveal the order methods are invoked and when they are and when they are not invoked.

by Mladen Petrovic

HTML

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

CSS

.container * {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: small;
    font-weight: 200;
}

.container input[type=text],
.container .mirror {
    border: 1px solid #ccc;
    border-radius: 3px;
    margin: 10px 0;
    padding: 3px 5px;
}

.container input[type=text]:focus {
    border: 1px solid #0af;
    outline: none;
}

.container input[type=text][disabled] {
    color: #ccc;
}

.container .mirror {
    background: #eee;
}

Babel + JSX

/** @jsx React.DOM */

var App = React.createClass({
    getInitialState: function () {
        console.log('getInitialState');
        return {
            disabled: false
        }
    },

    getDefaultProps: function () {
        console.log('getDefaultProps');
        return {
            message: 'Hello World'
        };
    },
    
    componentWillUnmount: function () {
        console.log('componentWillUnmount');
    },
    
    componentWillMount: function () {
        console.log('componentWillMount');
    },
    
    componentDidMount: function () {
        console.log('componentDidMount');
    },
    
    componentWillReceiveProps: function () {
        console.log('componentWillReceiveProps');
    },
    
    shouldComponentUpdate: function () {
        console.log('shouldComponentUpdate');
        return true;
    },
    
    componentWillUpdate: function () {
        console.log('componentWillUpdate');
    },
    
    componentDidUpdate: function () {
        console.log('componentDidUpdate');
    },
    
    handleMessageChange: function () {
        console.log('handleMessageChange');
        this.setProps({
            message: this.refs.message.getDOMNode().value
        });
    },
    
    handleDisabledChange: function () {
        console.log('handleDisabledChange');
        this.setState({
            disabled: this.refs.disabled.getDOMNode().checked
        });
    },
    
    render: function () {
        console.log('render');
        return (
            <div className="container">
                <input ref="message"
                        type="text"
                        value={this.props.message}
                        disabled={this.state.disabled}
                        onChange={this.handleMessageChange}/>    
                <input ref="disabled"
                        type="checkbox"
                        checked={this.state.disabled}
                        onChange={this.handleDisabledChange}/>
                <div...