Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.2/JSXTransformer.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="mount-point"></div>
<script type="text/jsx">
var App = React.createClass({
getInitialState: function(){
return {
project_name: '',
contributors: ''
}
},
componentWillMount: function(){
axios.get('list_projects')
.then(function (response) {
this.setState({project_name: response.data});
console.log(response);
}.bind(this))
.catch(function (error) {
console.log(error);
});
axios.get('projects/members')
.then(function (response) {
this.setState({contributors: response.data});
console.log(response.data);
}.bind(this))
.catch(function (error) {
console.log(error);
});
},
render: function(){
return (
<div>
<div className="listProjectName">
<ProjectName data={this.state.project_name}/>
</div>
<div className="listProjectContributors">
<ProjectContributors data={this.state.contributors}/>
</div>
</div>
)
}
});
var ProjectName = React.createClass({
render: function(){
return (
<div class="projectName">
<h2>{this.props.data}</h2>
</div>
)
}
});
var ProjectContributors = React.createClass({
render: function(){
return (
<div class="contributors">
<h1>{this.props.data}</h1>
<h2>
{this.props.data.map(function(contributor){
return <li key={contributor.id}>{contributor.data}</li>
})
}
</h2>
</div>
)
}
});
React.render(<App/>, document.getElementById('mount-point'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.