React component boilerplate

my_component.js.jsx

var MyComponent = React.createClass({

  propTypes: {
    /*
      Here we can provide validation for each prop the component will receive.
      This also provides a self-documenting reference for how the component
      should be used, and what props it needs to be passed in.
    */
    arrayProp: React.PropTypes.array,
    boolProp: React.PropTypes.bool,
    funcProp: React.PropTypes.func,
    numProp: React.PropTypes.number,
    objProp: React.PropTypes.object,
    stringProp: React.PropTypes.string
  },
  
  /*
    Under the hood, the mixin implements shouldComponentUpdate,
    in which it compares the current props and state with the
    next ones and returns false if the equalities pass.
  */
  mixins: [PureRenderMixin],

  getInitialState: function() {
    /*
      If this is a top level component, we can set state properties
      here that can be inherited for childcomponents through props.
    */
    return {

    }
  },
  getDefaultProps: function() {
    /*
      Here we can define default props that may be required for the component to live without its parent.
      This props will be overwritten if we pass in same prop-attributes.
    */
    return {

    }
  },

  componentWillMount: function() {
    /*
       Executed before component renders.
       We dont have access to the dom at this point.
    */
  },
  componentDidMount: function() {
    /*
       Executed after component rendered. Here we can
       set up data-fetching for setting the state like $.get(url)
    */
  },
  componentWillReceiveProps: function(nextProps) {
    /*
       When the component will be updated from a parent component we will
       have access to the current props in `this.props` and the new props in `nextProps`
    */
  },
  componentWillUnmount: function() {
    /*
       This function will execute when the component is about to be unmounted.
       Here we can put cleanup-tasks, ie. remove Jquery plugins and listeners.
    */
  },
  shouldComponentUpdate: function(nextProps, nextState) {
    /*
       Return a bolean. Here we can put conditions on
       weather to rerender component or not.
    */
  },
  
  /*
      Custom methods prepended with an underscore.
      These are accessible with calling `this._parseData()`
  */
  _parseData: function() {},
  _onSelect: function() {},

  render: function() {
    /*
       This is the only required function and it returns JSX
       before return we can place if-else, create new variables for display purpuses.
    */
    return (
      <div>
        <ComponentOne />
        <ComponentTwo />
      </div>
    );
  }

});