<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<script src="../build/jquery.min.js"></script>
</head>
<body>
<div id="demo"></div>
<script type="text/babel">
var UserGist = React.createClass({
getInitialState: function(){
return {
username: '',
lastGistUrl: ''
};
},
componentDidMount: function() {
$.get(this.props.source, function(result){
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
},
componentWillUnmount: function(){
this.serverRequest.abort();
render: function(){
return (
<div>
{this.state.username}'s last gist is <a href="{this.state.lastGistUrl}"></a>
</div>
);
}
});
ReactDOM.render(
<UserGist source = "https://api.github.com/users/octocat/gists" />,
document.getElementById('demo')
)
</script>
</body>
</html>
<html>
<head>
<title></title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<script src="../build/jquery.min.js"></script>
</head>
<body>
<div id="demo"></div>
<script type="text/babel">
var UserGist = React.createClass({
getInitialState: function(){
return {
username: '',
lastGistUrl: ''
};
},
componentDidMount: function() {
$.get(this.props.source, function(result){
var lastGist = result[0];
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
},
componentWillUnmount: function(){
this.serverRequest.abort();
},
<!-- componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
if (this.isMounted()) {
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}
}.bind(this));
}, -->
return (
<div>
{this.state.username}'s last gist is <a href="{this.state.lastGistUrl}"></a>
</div>
);
}
});
ReactDOM.render(
<UserGist source = "https://api.github.com/users/octocat/gists" />,
document.getElementById('demo')
)
</script>
</body>
</html>