Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.

Component Specs and Lifecycle





  • props: attributes to component  {this.props}
  • propsType: object that  allows you to validate props being passed to your components 
Code Block
	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 =>:

    Code Block
    // 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

    Code Block
    titlearrow function
    function HelloMessage(props) {
      return <div>Hello {}</div>;
    const HelloMessage = (props) => <div>Hello {}</div>;
  • static: The statics object allows you to define static methods that can be called on the component class. For example:

    Code Block
    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.

    Code Block
    var MyComponent = React.createClass({
        getInitialState: function(){
            return {
                count: 5
        render: function(){
            return (
  • a