aerrity/User.js

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React App</title>
    <!-- Load bulma for styling - Could use an alternative such as Bootstrap -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

## index.js
import React from "react";
import ReactDOM from "react-dom";
import User from "./User";
// Note: ensure you've installed axios with 'npm install axios'
import axios from "axios";

// 'Outer' component that will contain all the User 'cards'
class UserGrid extends React.Component {
  constructor(props) {
    super(props);

    this.state = { users: [] };
  }

  // Runs when component is mounted
  componentDidMount() {
    // Get data for 50 users
    axios
      .get("https://randomuser.me/api/?results=50")
      .then(response => {
        // GET request was successful, store the users in state
        this.setState({ users: response.data.results });
      })
      .catch(err => {
        // GET failed, log the error
        console.log(err);
      });
  }

  render() {
    const userList = this.state.users.map(u => (
      <User
        key={u.name.first}
        name={u.name.first}
        image={u.picture.medium}
        quote={u.quote}
      />
    ));

    return <div className="columns is-multiline">{userList}</div>;
  }
}

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

## User.js
import React from "react";
import ReactDOM from "react-dom";

// Component to represent a single User 'Card' (note: this is a class component so can use state)
// Classes used below are from Bulma, see index.html above
class User extends React.Component {
  constructor(props) {
    super(props);

    // Setup the state data
    this.state = {
      likes: 0
    };

    // This binding is necessary to make `this` work in the onclick callback
    this.handleClick = this.handleClick.bind(this);
  }

  // Event handler for the button
  handleClick() {
    // Increment the likes property stored in state
    this.setState(prevState => ({
      likes: prevState.likes + 1
    }));
  }

  // Define what happens when this componet gets drawn on the UI
  render() {
    return (
      <div className="column is-3">
        <div className="card">
          <div className="card-image">
            <figure className="image is-4by3">
              <img alt="Profile" src={this.props.image} />
            </figure>
          </div>
          <div className="card-content">
            <div className="media">
              <div className="media-content">
                <p className="title is-4">{this.props.name}</p>
                <p className="subtitle">{this.props.quote}</p>
                <h1>Likes: {this.state.likes}</h1>
                <button type="button" onClick={this.handleClick}>
                  Like this user
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

// Allow this to be imported by another JS file
export default User;
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>React App</title>
	<!-- Load bulma for styling - Could use an alternative such as Bootstrap -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" />
	</head>
	<body>
	<div id="root"></div>
	</body>
	</html>
	import React from "react";
	import ReactDOM from "react-dom";
	import User from "./User";
	// Note: ensure you've installed axios with 'npm install axios'
	import axios from "axios";

	// 'Outer' component that will contain all the User 'cards'
	class UserGrid extends React.Component {
	constructor(props) {
	super(props);

	this.state = { users: [] };
	}

	// Runs when component is mounted
	componentDidMount() {
	// Get data for 50 users
	axios
	.get("https://randomuser.me/api/?results=50")
	.then(response => {
	// GET request was successful, store the users in state
	this.setState({ users: response.data.results });
	})
	.catch(err => {
	// GET failed, log the error
	console.log(err);
	});
	}

	render() {
	const userList = this.state.users.map(u => (
	<User
	key={u.name.first}
	name={u.name.first}
	image={u.picture.medium}
	quote={u.quote}
	/>
	));

	return <div className="columns is-multiline">{userList}</div>;
	}
	}

	ReactDOM.render(<UserGrid />, document.getElementById("root"));
	import React from "react";
	import ReactDOM from "react-dom";

	// Component to represent a single User 'Card' (note: this is a class component so can use state)
	// Classes used below are from Bulma, see index.html above
	class User extends React.Component {
	constructor(props) {
	super(props);

	// Setup the state data
	this.state = {
	likes: 0
	};

	// This binding is necessary to make `this` work in the onclick callback
	this.handleClick = this.handleClick.bind(this);
	}

	// Event handler for the button
	handleClick() {
	// Increment the likes property stored in state
	this.setState(prevState => ({
	likes: prevState.likes + 1
	}));
	}

	// Define what happens when this componet gets drawn on the UI
	render() {
	return (
	<div className="column is-3">
	<div className="card">
	<div className="card-image">
	<figure className="image is-4by3">
	<img alt="Profile" src={this.props.image} />
	</figure>
	</div>
	<div className="card-content">
	<div className="media">
	<div className="media-content">
	<p className="title is-4">{this.props.name}</p>
	<p className="subtitle">{this.props.quote}</p>
	<h1>Likes: {this.state.likes}</h1>
	<button type="button" onClick={this.handleClick}>
	Like this user
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	);
	}
	}

	// Allow this to be imported by another JS file
	export default User;