Hello React - component lifecycle - mounting and unmounting. JsFiddle: http://jsfiddle.net/gh/gist/library/pure/9b4f8fe0de2fe7ecee52

fiddle.html

<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
 
<div id="view"/>

fiddle.js

var HelloMessage = React.createClass({
    componentWillMount: function() {
        console.log('componentWillMount');
    },
    componentDidMount: function() {
        console.log('componentDidMount');
    },
    componentWillUnmount: function() {
        console.log('componentWillUnmount');
    },
    render: function() {
        console.log('render');
        return <h2>{this.props.message}</h2>;
    }
});

var Button = React.createClass({
   render: function() {
       return <button onClick={this.props.onClick}>{this.props.children}</button>
   }
});

var GlyphIcon = React.createClass({
   render: function() {
       return <span className={'glyphicon glyphicon-' + this.props.icon}></span>
   }
});

var TextBox = React.createClass({
    getInitialState: function() {
        return { isEditing: false, text: this.props.label }
    },
    update: function() {
        var value = React.findDOMNode(this.refs.messageTextBox).value;
        this.setState(
            {
                isEditing: false
            });
        this.props.update(value);
    },
    edit: function() {
        this.setState({ isEditing: true});
    },
    render: function() {
        return (
            <div>
              {this.props.label}<br/>
                <input type='text' ref='messageTextBox' disabled={!this.state.isEditing}/>
                {
                    this.state.isEditing ?
                        <Button onClick={this.update}><GlyphIcon icon='ok'/> Update</Button>
                        :
                        <Button onClick={this.edit}><GlyphIcon icon='pencil'/> Edit</Button>
                    }
            </div>
        );
    }
});

var HelloReact = React.createClass({
    getInitialState: function () {
        return { firstName: '', lastName: ''}
    },
    update: function(key, value) {
        var newState = {};
        newState[key] = value;
        this.setState(newState);
    },
    reload: function() {
        ReactDOM.unmountComponentAtNode(document.getElementById('view'));
        ReactDOM.render(
            <HelloReact/>,
            document.getElementById('view'));
    },
    render: function() {
        return (
            <div>
                <HelloMessage
                    message={'Hello ' + this.state.firstName + ' ' + this.state.lastName}>
                </HelloMessage>
                <TextBox label='First Name' 
                	update={this.update.bind(null, 'firstName')}>
                </TextBox>
                <TextBox label='Last Name'
                    update={this.update.bind(null, 'lastName')}>
                </TextBox>
                <button onClick={this.reload}>Reload</button>
            </div>
        );
    }
});

ReactDOM.render(
    <HelloReact/>,
    document.getElementById('view'));

fiddle.manifest

name: ReactJs example by Ryan Vice - www.ViceSoftware.com
description: Hello React - component lifecycle - mounting and unmounting.
authors:
  - Ryan Vice
resources:
normalize_css: no
wrap: h
panel_js: 3
panel_css: 0