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";
// This loads data from a file named 'data.json' in the same directory
import data from "./data";
// This loads the User component from a file name 'User.js' in the same directory
import User from "./User";

// Store the array of user objects in a variable
const users = data.results; // [{user},{user}, ...]

// Iterate across all elements (u) in the users array, producing a User component for each
// Data is passed into the components via props
const userList = users.map(u => (
  <User
    key={u.name.first}
    name={u.name.first}
    image={u.picture.medium}
    quote={u.quote}
  />
));

// Render all the User components in a 'grid' layout
ReactDOM.render(
  <div className="columns is-multiline">{userList}</div>,
  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";
	// This loads data from a file named 'data.json' in the same directory
	import data from "./data";
	// This loads the User component from a file name 'User.js' in the same directory
	import User from "./User";

	// Store the array of user objects in a variable
	const users = data.results; // [{user},{user}, ...]

	// Iterate across all elements (u) in the users array, producing a User component for each
	// Data is passed into the components via props
	const userList = users.map(u => (
	<User
	key={u.name.first}
	name={u.name.first}
	image={u.picture.medium}
	quote={u.quote}
	/>
	));

	// Render all the User components in a 'grid' layout
	ReactDOM.render(
	<div className="columns is-multiline">{userList}</div>,
	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;