-------------------------------------------------------------------------------
---------------------------Containers and Components---------------------------
-------------------------------------------------------------------------------

export default connect(mapState, mapActions)(MyComponent);

const preloadedConnect = connect(mapState, mapActions);
export default preloadedConnect(MyComponent);

class MyComponent extends Component {
  static propTypes = {
    firstName: PropTypes.string,
    lastName: PropTypes.string,
    onSave: PropTypes.string,
  };
  render() {
    ...
  }
}
export default MyComponent;

const mapState = ...;
const mapActions = ...;
export default connect(mapState, mapActions);

import MyContainer from '../containers/MyContainer';
import MyComponent from '../component/MyComponent';
const ConnectedComponent = MyContainer(MyComponent);
...
...
render() {
  return (
    <ConnectedComponent />
  );
}

describe('<MyComponent />', () => {
  it('should be unit tested', () => {
    const wrapper = mount(
      <MyComponent
        firstName="Alex"
        lastName="Either"
        onSave={() => console.log('dead to me')}
      />
    );
    expect(...).to.work.correctly;
  });
});

     _   _ _   _ _____ _____
    | | | | \ | |_   _|_   _|
    | | | |  \| | | |   | |
    | | | | . ` | | |   | |
    | |_| | |\  |_| |_  | |
     \___/\_| \_/\___/  \_/
     _____ _____ _____ _____ _____
    |_   _|  ___/  ___|_   _/  ___|
      | | | |__ \ `--.  | | \ `--.
      | | |  __| `--. \ | |  `--. \
      | | | |___/\__/ / | | /\__/ /
      \_/ \____/\____/  \_/ \____/
    ______ _____ _    _
    |  ___|_   _| |  | |
    | |_    | | | |  | |
    |  _|   | | | |/\| |
    | |     | | \  /\  /
    \_|     \_/  \/  \/

-------------------------------------------------------------------------------
------------------------------React Lifecycle----------------------------------
-------------------------------------------------------------------------------

onClick() {
    return () => this.setState();
}
render() {
    return (
        <MyComponent
            onClick={this.onClick()}
        />
    );
}

onClick = () => {
    this.setState();
}
render() {
    return (
        <MyComponent
            onClick={this.onClick}
        />
    );
}

render() {
    return (
        <MyComponent
            things={{
                text: 'Do Something',
                onClick: this.doSomething,
            }}
        />
    );
}

things = {
    text: 'Do Something',
    onClick: this.doSomething,
}
render() {
    return (
        <MyComponent
            things={this.things}
        />
    );
}

render() {
    return (
        <MyComponent
            things={this.props.thing || {}}
        />
    );
}

defaultThing = {}
render() {
    return (
        <MyComponent
            things={this.props.thing || this.defaultThing}
        />
    );
}