juhahinkula/reactAsteroids.html

## reactAsteroids.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 AsteroidList extends React.Component {
        constructor(props) {
          super(props);
          this.state = {listItems: []};
        }

        componentDidMount() {
          fetch('https://api.nasa.gov/neo/rest/v1/feed?start_date=2017-10-09&end_date=2017-10-09&api_key=DEMO_KEY')
          .then((response) => response.json())
          .then((responseData) => {
            this.setState({
              listItems: responseData.near_earth_objects["2017-10-09"],
            });
          })
        }

        render() {
          const itemRows = this.state.listItems.map((asteroid) =>
              <tr key={asteroid.name}>
                <td>{asteroid.name}</td>
                <td>{asteroid.close_approach_data[0].miss_distance.kilometers}</td>
              </tr>
            )

          return (
            <div>
              <h2>Closest asteroids today</h2>
              <table>
                <tbody>
                  <tr><th>Name</th><th>Min distance</th></tr>
                  {itemRows}
                </tbody>
              </table>
            </div>
          );
        }
      }

      ReactDOM.render(<AsteroidList />, 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 AsteroidList extends React.Component {
	constructor(props) {
	super(props);
	this.state = {listItems: []};
	}

	componentDidMount() {
	fetch('https://api.nasa.gov/neo/rest/v1/feed?start_date=2017-10-09&end_date=2017-10-09&api_key=DEMO_KEY')
	.then((response) => response.json())
	.then((responseData) => {
	this.setState({
	listItems: responseData.near_earth_objects["2017-10-09"],
	});
	})
	}

	render() {
	const itemRows = this.state.listItems.map((asteroid) =>
	<tr key={asteroid.name}>
	<td>{asteroid.name}</td>
	<td>{asteroid.close_approach_data[0].miss_distance.kilometers}</td>
	</tr>
	)

	return (
	<div>
	<h2>Closest asteroids today</h2>
	<table>
	<tbody>
	<tr><th>Name</th><th>Min distance</th></tr>
	{itemRows}
	</tbody>
	</table>
	</div>
	);
	}
	}

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