Skip to content

Instantly share code, notes, and snippets.

@kennyt
Created June 22, 2015 01:53
Show Gist options
  • Save kennyt/72f8a63893ff85be6068 to your computer and use it in GitHub Desktop.
Save kennyt/72f8a63893ff85be6068 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>woopra</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
var Table = React.createClass({
render: function() {
var headers = Object.keys(this.props.data[0]);
return (
<Header headers={headers}/>
<Body data={this.props.data}/>
)
}
});
var Header = React.createClass({
render: function() {
var titleStyle = {
'float': 'left',
'margin-left': '10px'
};
return (
<div>
{
this.props.headers.map(function(title){
return <div style={titleStyle}>{title}</div>
})
}
</div>
)
}
});
var Body = React.createClass({
});
$.get(
'http://jsonplaceholder.typicode.com/todos',
function(data){
React.render(
<Table data={data}/>,
document.getElementById('content')
);
}
)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment