48 lines
1.4 KiB
HTML
48 lines
1.4 KiB
HTML
<html>
|
|
<head>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
|
|
<script src="../lib/php_crud_api_transform.js"></script>
|
|
<script>
|
|
var PostList = React.createClass({
|
|
displayName: 'PostList',
|
|
url: '../api.php/posts',
|
|
getInitialState: function() {
|
|
return { posts: [] };
|
|
},
|
|
retrieveServerState: function() {
|
|
this.serverRequest = $.get(this.url, function (data) {
|
|
this.setState(php_crud_api_transform(data));
|
|
}.bind(this));
|
|
},
|
|
componentDidMount: function() {
|
|
$.post(this.url, {user_id:1,category_id:1,content:"from react"}, this.retrieveServerState);
|
|
},
|
|
componentWillUnmount: function() {
|
|
this.serverRequest.abort();
|
|
},
|
|
render: function render() {
|
|
var createPost = function(post) {
|
|
return React.createElement(
|
|
'li',
|
|
{key: post.id},
|
|
post.id,
|
|
', ',
|
|
post.content
|
|
);
|
|
};
|
|
return React.createElement(
|
|
'ul',
|
|
null,
|
|
this.state.posts.map(createPost)
|
|
);
|
|
}
|
|
});
|
|
$(function(){ ReactDOM.render(React.createElement(PostList, null), document.getElementById('myApplication')); });
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="myApplication">Loading...</div>
|
|
</body>
|
|
</html>
|