eggheadio-projects/leverage-new-features-of-react-16: Code Examples For React 16

<!doctype html>

<html>
  <head>
    <script src="https://unpkg.com/react@16.3.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
    <link rel="stylesheet" href="index.css">
    
  </head>

  <body>
    <div id="root"></div>
    <script type="text/jsx" src="script.jsx"></script>
  </body>
</html>

//import React, { Component } from 'react';
//import ReactDOM from 'react-dom';


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { city: 'vienna' };
  }

  selectCity = evt => {
    const newValue = evt.target.value;
    this.setState(state => {
      if (state.city === newValue) {
        return null;
      }
      return {
        city: newValue
      };
    });
  };

  render() {
    return (
      <div>
        <button type="button" value="vienna" onClick={this.selectCity}>
          Vienna
        </button>
        <button type="button" value="paris" onClick={this.selectCity}>
          Paris
        </button>
        <City name={this.state.city} />
      </div>
    );
  }
}


// ---------------------------------------------------------------
// City.js
// ---------------------------------------------------------------

 class City extends React.Component {
  constructor(props) {
    super(props);
    this.state = { loading: true };
    setTimeout(() => {
      this.setState({ loading: false });
    }, 1000);
  }

  componentWillReceiveProps() {
    this.setState({ loading: true });
    setTimeout(() => {
      this.setState({ loading: false });
    }, 1000);
  }

  render() {
    if (this.state.loading) {
      return (
        <img src={`/spinner.gif`} alt="loading" />
      );
    }
    return (
      <img
        style={{ width: '100%' }}
        alt={this.props.name}
        src={`/${this.props.name}.png`}
      />
    );
  }
}


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