<!DOCTYPE html>
<html>

  <head>
    <script data-require="react@*" data-semver="0.14.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
    <script data-require="react@*" data-semver="0.14.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="example"></div>
    <script src="script.js"></script>
  </body>

</html>
class CommentList extends React.Component {
   constructor(props) {    
        super(props);    
        this.state = { comments: [] }  
    }  
    componentDidMount() {    
        fetch('comments.json')
        .then(response => response.json())
        .then(data => this.setState({comments: data.comments}));  
    }  
    render() {    
        return <div><h3>Comments:</h3>
        <ul> {
            this.state.comments.map((comment) => <li>{comment.body}—{comment.author}</li>)
        }</ul></div>;  
    }
}
ReactDOM.render(
  <CommentList></CommentList>,
  document.getElementById('example')
);
/* Styles go here */

{"comments": [
  {"body": "Hey you","author": "Gullermo Shakespeare"},
  {"body": "What is happening?","author": "Aristotle"},
  {"body": "My cat is alive!","author": "Erwin Schroëdinger"}
  ]
}