App.jsx

import React, { Component } from 'react';


const Button = props => (
  <button onClick={props.onClick}>Click me!</button>
);

class Foo extends Component {
  constructor(props) {
    console.log('construyendo...');
    super(props);
    this.state = { json: null };
    this.onResize = this.onResize.bind(this);
  }

  onResize() {
    console.log('OMG');
  }

  componentWillMount() {
    console.log('componentWillMount');
    window.addEventListener('resize', this.onResize);

    fetch('https://api.laboratoria.la/')
      .then(resp => resp.json())
      .then(json => this.setState({ json }));
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
    window.removeEventListener('resize', this.onResize);
  }

  render() {
    return (
      <pre>{JSON.stringify(this.state.json, null, 2)}</pre>
    );
  }
}


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentColor: 1,
      colors: ['pink', 'yellow'],
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      currentColor: (this.state.currentColor) ? 0 : 1,
    });
  }

  render() {
    return (
      <div style={{ backgroundColor: this.state.colors[this.state.currentColor]}}>
        <Button onClick={this.handleClick} />
        {this.state.currentColor && <Foo />}
      </div>
    );
  }
}

export default App;