SOURCE

class Logo extends React.Component {
  getDefaultProps(){
    console.log("getDefaultProps Logo")
  }
  getInitialState(){
    console.log("getInitialState Logo")
  }
  componentWillMount(){
    console.log("componentWillMount Logo")
  }
  componentDidMount(){
    console.log("componentDidMount Logo")
  }
  render(){
    	console.log("render Logo");
      return ( 
        <img className="center" {...this.props} /> 
      )
  }
}


class HelloWidget extends React.Component{
  
  getDefaultProps(){
    console.log("getDefaultProps")
  }
  getInitialState(){
    console.log("getInitialState");
    return {liked: false};
  }
  componentWillMount(){
    console.log("componentWillMount")
  }
  componentDidMount(){
    console.log("componentDidMount")
  }
  render() {
    	console.log("render");
      return (
      	    <div className="widget">
          		<Logo className="center" src="https://jr.le.com/mleplatform/images/logo-icon-7a50831f76.png"/>
            </div>
      )
  }
}

React.render(<HelloWidget />, document.getElementById('container'));

<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

.widget {
    width: 202px;
    margin:100px auto;
//    border:1px solid black;
    padding:20px;
}
.name {
    color: red;
}
.default-label {
    border: 1px solid black;
    padding: 10px;
    margin-bottom: 10px;
    width:180px;
}

.green-label {
    border: 1px solid green;
    padding: 10px;
    margin-bottom: 10px;
    width: 180px;
}

.default-input {
    border: 1px solid #eaeaea;
    padding: 10px;
    width:180px;
}

.important-input {
    border: 2px solid red;
    width:180px;
}

img.center {
    width: 100px;
    height: 100px;
    display: block;
    margin: 15px auto;    
}