aerrity/index.html

## 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";

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

// Component to represent a single User 'Card' (note: this is a function component so cannot use state)
// Classes used below are from Bulma, see index.html above
function User(props) {
    return (
      <div className="column is-3">
        <div className="card" >
          <div className="card-image">
            <figure className="image is-4by3">
              <img alt='Profile' src={props.image}></img>
            </figure>
          </div>
          <div className="card-content">
            <div className="media">
              <div className="media-content">
                <p className="title is-4">{props.name}</p>
                <p className="subtitle">{props.quote}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
}

// 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")
);
	<!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";

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

	// Component to represent a single User 'Card' (note: this is a function component so cannot use state)
	// Classes used below are from Bulma, see index.html above
	function User(props) {
	return (
	<div className="column is-3">
	<div className="card" >
	<div className="card-image">
	<figure className="image is-4by3">
	<img alt='Profile' src={props.image}></img>
	</figure>
	</div>
	<div className="card-content">
	<div className="media">
	<div className="media-content">
	<p className="title is-4">{props.name}</p>
	<p className="subtitle">{props.quote}</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	);
	}

	// 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")
	);