<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/superagent/3.6.3/superagent.min.js"></script>
<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="console"><h4>Console</h4></div>
<div id="example"></div>
<script src="script.js"></script>
</body>
</html>
class CommentList extends React.Component {
constructor(props) {
super(props);
this.state = { comments: [] }
}
componentDidMount() {
this.interval = setInterval(this.getComments.bind(this), 3000);
// this.getComments();
}
getComments() {
this.request = superagent.get('comments.json')
.end((err, response) => {
const data = JSON.parse(response.text);
this.setState({comments: data.comments});
});
}
render() {
return <div id="commentlist"><h3>Comments:</h3>
<ul> {
this.state.comments.map((comment, i) => <li key={i}>{comment.body}—{comment.author}</li>)
}</ul></div>;
}
componentWillUnmount () {
clearInterval(this.interval);
if (this.request) {
document.getElementById('console').innerHTML += '<div>clearing request - typeof: '+(typeof this.request)+'</div>';
this.request && this.request.abort();
document.getElementById('console').innerHTML += '<div>aborted request</div>';
}
}
}
class CommentContainer extends React.Component {
mount() {
ReactDOM.render(
<CommentList></CommentList>,
document.getElementById('renderhere')
);
}
unmount(){
ReactDOM.unmountComponentAtNode(document.getElementById('renderhere'));
}
render(){
return (
<div>
<button onClick={this.mount}>Mount</button>
<button onClick={this.unmount}>Un Mount</button>
<div id='renderhere'></div>
</div>)
}
}
ReactDOM.render(
<CommentContainer />,
document.getElementById('example')
);
#console {
margin: 3px;
padding: 3px;
border: 1px solid #00f;
}
{"comments": [
{"id": 1, "body": "Hey you","author": "Gullermo Shakespeare"},
{"id": 2, "body": "What is happening?","author": "Aristotle"},
{"id": 3, "body": "My cat is alive!","author": "Erwin Schroëdinger"}
]
}