React Higher order component

Simple example of a higher order component

by manappa

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

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

JavaScript 1.7

function addSkinTo(component) {
  return class extends component {
/*    shouldComponentUpdate(nextProps, nextState) {
			return !this.state.ref && nextState.ref;
    }
    */
  	componentDidUpdate() {
      console.log('aaa')
        this.setState({
        ref: component.ref
        });
  	}

    render() {
      return ( 
      
        gggg
        
        );
    }
  }
};

class Hello extends React.Component {
   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }

   componentDidMount() {
      console.log('Component DID MOUNT!')
   }

   componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
   }

   shouldComponentUpdate(newProps, newState) {
      return true;
   }

   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }

   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }

   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }
   
   render() {
    return hello
  }
};

var ComposedHello = addSkinTo(Hello);

ReactDOM.render( 
		< Hello name = "World" / >
,
  document.getElementById('container')
);