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 crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">
      const RestList = () => {
        const [listItems, setListItems] = React.useState([]);

        React.useEffect(() => {
          fetch('https://reqres.in/api/users')
          .then(response => response.json())
          .then(responseData => {
            setListItems(responseData.data)
          })
          .catch(err => console.error(err))
        }, [])

        const itemRows = 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 crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

	<script type="text/babel">
	const RestList = () => {
	const [listItems, setListItems] = React.useState([]);

	React.useEffect(() => {
	fetch('https://reqres.in/api/users')
	.then(response => response.json())
	.then(responseData => {
	setListItems(responseData.data)
	})
	.catch(err => console.error(err))
	}, [])

	const itemRows = 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>