class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  static defaultProps = {
    value: "test"
  };

  static propTypes = {
    value: PropTypes.string
  };

  static childContextTypes = {
    color: PropTypes.string
  }

  getChildContext() {
    return { color: "gray" };
  }

  componentWillMount(nexProps, nexState) {}
  //  use setState
  componentDidMount() {}
  //  use setState
  componentWillReceiveProps(nextProps, nextState) {}

  componentWillUpdate(nextProps, nextState) {}

  componentWillUnmount() {}

  render() {
    return (
      <div>
        {this.props.value}
        <Children />
      </div>
    );
  }
}

class Children extends Component {
  constructor(props, context) {
    super(props);
    this.state = {};
  }

  static contextTypes = {
    color: PropTypes.string
  };

  render() {
    return (
      <div>{this.props.color}</div>
    )
  }
}

render(<App />, document.getElementById("root"));