<!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"}
]
}