People component.md

1. Add the People component:

class People extends Component {
  constructor() {
    super();
    this.state = { people: [] };
    this.callAPI();
  }
  callAPI() {
  
    // API call goes here!
  
  }
  render() {
    var firstPerson = this.state.people[ 0 ];
    if ( !firstPerson ) {
      return "Loading...";
    } else {
      return <div>
        <p>{firstPerson.name}</p>
        
        // Button goes here!
      
      </div>;
    }
  }
}

2. Check that you see "Loading..." rendering in your hello world app

3. Add the API call

fetch( "https://uinames.com/api/?ext&amount=3" )
      .then( response => response.json() )
      .then( people => this.setState( { people } ) );

4. Check that you see a name generated every time you reload the page

5. Add the Generate button

<button onClick={() => this.callAPI()}>Generate</button>

6. Check that the button works