React Component Lifecycle example

This post will introduce you to React's component lifecycle with a simple example

by meetravi

HTML

<script src="https://fb.me/react-15.2.1.js"></script>
<script src="https://fb.me/react-dom-15.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id='react-container'>
</div>

CSS

.contents {
  margin: 5px 5px 5px 30px;
  width: auto;
}
#message{
  margin: 20px 0px 0px 0px;
}
.light {
  margin: 15px 230px 15px 130px; 
  border-width: 1px;
  border-style: solid;
  border-radius: 50px;
  width:40px;
  height: 40px;
}
.green {
  background-color: #99ff33;
}
.gray {
  background-color: gray;
}
.greenText{
  color: green;
  font-weight: bold;
}

.blueText{
  color: blue;
  font-weight: bold;
}
.redText{
  color: red;
  font-weight: bold;
}
.orangeText{
  color: orange;
  font-weight: bold;
}

.heading{
  margin: 1px 0px 5px 0px;
}

.main {
   margin: 5px 30px;
   width: auto;
   padding: 5px;
}

Babel + JSX

var log = "";
function customLog(methodName,methodColor,props,nextProps,clearLog){
  if(!clearLog && methodName!=""){
    log+="&#x21e8;<strong> Method</strong> = <span class='"+methodColor+"'>"+methodName+"</span>&emsp;<strong>props</strong>="+JSON.stringify(props)+(nextProps==""?"<br>":" <strong>nextProps</strong>="+JSON.stringify(nextProps)+"<br>");
  }else{
    log="<h4>Lifecycle Methods</h4><br>";
  }
  $('#message').html(log);
} 

var Circle = React.createClass({
  componentWillUpdate(nextProps){
    customLog('componentWillUpdate','orangeText',this.props,nextProps,false);    
  },
  componentDidUpdate(prevProps, prevState){
    customLog('componentDidUpdate','greenText',this.props,prevProps,false);
  },  
  shouldComponentUpdate(nextProps){
    customLog('shouldComponentUpdate','orangeText',this.props,nextProps,false);    
    return true;
  },
  componentWillMount(){
    customLog('componentWillMount','orangeText',this.props,"",false);    
  },
  componentDidMount(){
    customLog('componentDidMount','greenText',this.props,"",false);    
  },
  componentWillReceiveProps(nextProps){
    customLog('componentWillReceiveProps','orangeText',this.props,nextProps,false);    
  },
  componentWillUnmount(){
    customLog('componentWillUnmount','redText',this.props,"",false);    
  },
  getInitialState(){
    customLog('',true);
    customLog('getInitialState','blueText',this.props,"",false);    
    return {color:'gray'};
  },
  render(){
    customLog('render','greenText',this.props,"",false);    
    return (<div className={'light '+ this.props.color}></div>)
  }
})

var CircleContainer = React.createClass({

  renderAddCircle(){
    return (<div><Circle color={this.props.fillColor}/></div>)
  },
  renderNoCircle(){
    return (<div></div>)
  },
  render(){
    return this.props.drawCircle ? this.renderAddCircle() : this.renderNoCircle();
  }
})


var Main = React.createClass({

  getInitialState(){
    return {drawCircle:false,fillColor:'gray'};
  },
 ...