1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 |
- <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>
- var PostList = React.createClass({
- displayName: 'PostList',
- url: '/api.php/records/posts',
- getInitialState: function() {
- return { records: [] };
- },
- retrieveServerState: function() {
- this.serverRequest = $.get(this.url, function (data) {
- this.setState(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.records.map(createPost)
- );
- }
- });
- $(function(){ ReactDOM.render(React.createElement(PostList, null), document.getElementById('myApplication')); });
- </script>
- </head>
- <body>
- <div id="myApplication">Loading...</div>
- </body>
- </html>
|