react-fetch-activity.js

import React from 'react';
import ReactDOM from 'react-dom';

class UserList extends React.Component {
  constructor() {
    super();
    this.state = {userName: ''};
  }

  componentWillMount() {
    fetch('https://randomuser.me/api')
    .then(response => {
      if(response.ok) return response.json();
      throw new Error('Request failed.');
    })
    .then(data => {
      const name = data.results[0].name.first;
      this.setState( {userName: name} );
    })
    .catch(error => {
      console.log(error);
    });
  }

  render() {
    return (
      <p>{this.state.userName}</p>
    );
  }
}

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