juhahinkula/RestList.html

## RestList.html
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>React getting started</title>
  </head>
  <body>
    <!-- Root container for react components -->
    <div id='root'></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">
      class RestList extends React.Component {
        constructor(props) {
          super(props);
          this.state = {listItems: []};
        }

        componentDidMount() {
          fetch('https://reqres.in/api/users')
          .then((response) => response.json())
          .then((responseData) => {
            this.setState({
              listItems: responseData.data
            });
          })
        }

        render() {
          const itemRows = this.state.listItems.map((person) =>
            <tr key={person.id}>
              <td>{person.first_name}</td>
              <td>{person.last_name}</td>
              <td>{person.email}</td>
            </tr>
          )

          return (
            <div>
              <h2>Persons</h2>
              <table>
                <tbody>
                  <tr><th>First name</th><th>Last name</th><th>Email</th></tr>
                  {itemRows}
                </tbody>
              </table>
            </div>
          );
        }
      }

      ReactDOM.render(<RestList />, document.getElementById('root'));
    </script>
  </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<title>React getting started</title>
	</head>
	<body>
	<!-- Root container for react components -->
	<div id='root'></div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

	<script type="text/babel">
	class RestList extends React.Component {
	constructor(props) {
	super(props);
	this.state = {listItems: []};
	}

	componentDidMount() {
	fetch('https://reqres.in/api/users')
	.then((response) => response.json())
	.then((responseData) => {
	this.setState({
	listItems: responseData.data
	});
	})
	}

	render() {
	const itemRows = this.state.listItems.map((person) =>
	<tr key={person.id}>
	<td>{person.first_name}</td>
	<td>{person.last_name}</td>
	<td>{person.email}</td>
	</tr>
	)

	return (
	<div>
	<h2>Persons</h2>
	<table>
	<tbody>
	<tr><th>First name</th><th>Last name</th><th>Email</th></tr>
	{itemRows}
	</tbody>
	</table>
	</div>
	);
	}
	}

	ReactDOM.render(<RestList />, document.getElementById('root'));
	</script>
	</body>
	</html>