react_lifecycle.jsx

var App = React.createClass({

  getDefaultProps: function() {
    console.log("PARENT GETTING DEFAULT PROPS");
    return {
      foo: "bar"
    };
  },

  getInitialState: function() {
    console.log("PARENT GETTING INITIAL STATE!");
    return {
      txt: "awef"
    };
  },

  componentWillMount: function() {
    console.log("PARENT WILL MOUNT!")
    // debugger;
  },

  componentDidMount: function() {
    console.log("PARENT DID MOUNT!")
    // debugger;
    ReactDOM.findDOMNode(this.refs.nameInput).focus();
  },

  componentWillUnmount: function() {
    console.log("PARENT WILL UNMOUNT!");
  },

  update: function(e) {
    console.log("PARENT UPDATING!!!!");
    this.setState({txt: e.target.value});
  },

  remove: function() {
    ReactDOM.unmountComponentAtNode(document.getElementById('container'));
    debugger;
    console.log("PARENT REMOVED");
  },

  render: function() {
    console.log("PARENT RENDERING...")

    return (
      <div>
        <input 
          ref="nameInput" 
          onChange={this.update}
          value={this.state.txt}
        />
        <h1>{this.state.txt}</h1>
        <Summary len={this.state.txt.length} />
        <button onClick={this.remove}>GET OUT OF HERE PARENT!</button>
      </div>
    );
  }

});

var Summary = React.createClass({

  componentWillMount: function() {
    console.log("CHILD WILL MOUNT!");
  },

  componentDidMount: function() {
    console.log("CHILD DID MOUNT!");
  },

  render: function() {
    console.log("CHILD RENDERING!");
    return <p>Your input is this long: {this.props.len}</p>
  }

})

ReactDOM.render(<App/>, document.getElementById('container'));