React JS Life Cycle

Now you know what React is !!

var MyComponent = React.createClass({
    getInitialState: function(){
        return {
            count: 5
        }
    },
    render: function(){
        return (
            <h1>{this.state.count}</h1>
        )
    }
});

Initialize State 

Life Cycle

Life Cycle

The getInitialState method enables to set the initial state value, that is accessible
 inside the component via this.state.

getInitialState: function(){
    return { /* something here */};
}
Analogously getDefaultProps can be used to define any default props which can be
 accessed via this.props.

getDefaultProps: function(){
    return { /* something here */};
}

**componentWillMount is called before the render method is executed ***
It is important to note that setting the state in this phase will not trigger a re-rendering

Initialization

State Change

State Change

shouldComponentUpdate: function(nextProps, nextState){
    // return a boolean value
    return true;
}


componentWillUpdate: function(nextProps, nextState){
    // perform any preparations for an upcoming update
}

componentDidUpdate: function(prevProps, prevState){
    // 
}


componentWillReceiveProps: function(nextProps) {
  this.setState({
    // set something 
  });
}

var Counter = React.createClass({
  incrementCount: function(){
    this.setState({
      count: this.state.count + 1
    });
  },
  getInitialState: function(){
     return {
       count: 0
     }
  },
  render: function(){
    return (
      <div class="my-component">
        <h1>Count: {this.state.count}</h1>
        <button type="button" onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
});

ReactDOM.render(<Counter/>, document.getElementById('mount-point'));

Changing State

/** @jsx React.DOM */
console.log('Start')
var App = React.createClass({
    componentWillMount: function(){
      console.log('componentWillMount');
    },
    
    componentDidMount: function(){
      console.log('componentDidMount');
    },
    
    getInitialState: function(){
      return { status: true}
    },

    getDefaultProps: function(){
      return {name: 'John'};
    },

Methods

Life Cycle

Thanks..