Component Specs and Lifecycle

• props: attributes to component  {this.props}
• propsType: object that  allows you to validate props being passed to your components 

 {
	propTypes: { 
				children: React.PropTypes.element.isRequired 
			}
}

• transferring props: shortcut
  <a {...this.props}>{'√ '}{this.props.children}</a>;
• mixins – An array of objects, used to extend the current component’s functionality.

• binding:  ES6 class don't bind (this) method to instance automatically. You'll have to explicitly use .bind(this) or arrow functions =>:
  

  binding

  // You can use bind() to preserve `this`
  <div onClick={this.tick.bind(this)}>
  
  // Or you can use arrow functions
  <div onClick={() => this.tick()}>

   

• arrow function

  arrow function

  function HelloMessage(props) {
    return <div>Hello {props.name}</div>;
  }
   
  0r
  const HelloMessage = (props) => <div>Hello {props.name}</div>;

• static: The statics object allows you to define static methods that can be called on the component class. For example:
  

  static

  ar MyComponent = React.createClass({
    statics: {
      customMethod: function(foo) {
        return foo === 'bar';
      }
    },
    render: function() {
    }
  });
  
  MyComponent.customMethod('bar');  // true

   

• state:  editable object parameter. Upon change in state updates  UI Component.

  state

  var MyComponent = React.createClass({
      getInitialState: function(){
          return {
              count: 5
          }
      },
      render: function(){
          return (
              <h1>{this.state.count}</h1>
          )
      }
  });

• a