SOURCE

// 10. Components' lifecycle
// a clickcounter that disappears on the count of 6

// the lifecyle of ClickCounter is displayed in the console
class ClickCounter extends React.Component{
    // (1) initial rendering phase
    constructor(props){
        super(props);
        console.log('ClickCounter initiated (constructor done)');
    }
    componentWillMount(){
        console.log('ClickCounter will be mounted (componentWillMount)');
    }
    componentDidMount(){
        console.log('ClickCounter mounted (componentDidMount)');
    }
    // (2) update phrase
    componentWillReceiveProps(newP){
        console.log('ClickCounter will receive new Property: '+ `{count: ${newP.count}}`);
    }
    // if count is $gt 5 unmount the component, otherwise update the component
    shouldComponentUpdate(newProps, newState){
        if(newProps.count >5){
            console.log('ClickCounter should not update, and it will be unmounted immediately');
            ReactDOM.unmountComponentAtNode(document.querySelector('#container10'));
            return false;
        }
        console.log('ClickCounter should be updated');
        return true;
    }
    componentWillUpdate(newProps,newState){
        console.log('ClickCounter will be updated ');

    }
    componentDidUpdate(currentP, currentS){
        console.log('ClickCounter has been updated');
    }

    render(){
        var counterStyle={
            fontSize:80,
            fontFamily: 'sans-serif',
            fontWeight:'bold',
            padding:'15px 0px'
        }
        console.log('ClickCounter is being rendered (about to return in render)');
        return <div style= {counterStyle}>{this.props.count}</div>
    }

    // (3) Unmounting phase
    componentWillUnmount(){
        console.log('Component will be unmounted');
    }
}

class ClickCounterParent extends React.Component{
    constructor(props){
        super(props);
        this.state={
            count:0
        }
    }
    increase(){
        this.setState({count: this.state.count+1});
    }
    render(){
        var parentStyle={
            width: 260,
            height: 200,
            textAlign: 'center',
            backgroundColor: '#ffeb3a',
            borderRadius: 20,
            padding: 10
        };
        var buttonStyle={
            width: 30,
            height: 30,
            fontWeight: 'bold',
            lineHeight: 1,
            fontSize: 20
        }
        return <div style={parentStyle}>
            <ClickCounter count={this.state.count}></ClickCounter>
            <button style={buttonStyle} onClick={this.increase.bind(this)}>+</button>
        </div>
    }
}

ReactDOM.render(
    <ClickCounterParent />,
    document.querySelector('#container10')
);

<div id="container10">
    <!-- This element's contents will be replaced with your component. -->
</div>

body{
  background-color: #FCFCFC;
}
.container p {
    font-size: 25px;
}