React component lifycycle

part 1

by rupesx

HTML

<script src=" https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js"></script>
<p>Whenever a componenet render to the DOM, certain things happend before rendering and something after rendering all this process call "component lifecycle" </p>
<br />
<div id="app"></div>

Babel + JSX

var LifecycleComponent = React.createClass({
	increment: function(){
  	this.setState({
    	count: this.state.count + 1
    })
  },
  //1 called Once
  //Before component is rendered
  getDefaultProps: function(){
  	console.log("Getting our default props");
  },
  //2 called Once
  //Before component is rendered
  getInitialState: function(){
    console.log("Getting initial state");
   return({
     count: 0
   })
  },
  //3 called once
  //Before component is rendered
  componentWillMount: function(){
    console.log(this.state);
    console.log(this.props);
    console.log("component is mounting");
  },
  //4 
  //Happen whenever our component changes
	render: function(){
    console.log("component is rendered")
    return(
    	<button onClick={this.increment}>{this.state.count}</button>
    )
  },
  // 5 only once
  //afer component has rendered
  componentDidMount: function(){
    console.log("component has rendered");
   // console.log(this.state);
   // console.log(this.state);
   // console.log(ReactDOM.findDOMNode(this));
    this.interval = setInterval(this.increment, 1000);
  }
});

ReactDOM.render(
	<LifecycleComponent/>,
  document.getElementById('app')
)