api de gestion de ticket, basé sur php-crud-api. Le but est de décorrélé les outils de gestion des données, afin
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

react.html 1.3KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <html>
  2. <head>
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.js"></script>
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.js"></script>
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
  6. <script>
  7. var PostList = React.createClass({
  8. displayName: 'PostList',
  9. url: '/api.php/records/posts',
  10. getInitialState: function() {
  11. return { records: [] };
  12. },
  13. retrieveServerState: function() {
  14. this.serverRequest = $.get(this.url, function (data) {
  15. this.setState(data);
  16. }.bind(this));
  17. },
  18. componentDidMount: function() {
  19. $.post(this.url, {user_id:1,category_id:1,content:"from react"}, this.retrieveServerState);
  20. },
  21. componentWillUnmount: function() {
  22. this.serverRequest.abort();
  23. },
  24. render: function render() {
  25. var createPost = function(post) {
  26. return React.createElement(
  27. 'li',
  28. {key: post.id},
  29. post.id,
  30. ', ',
  31. post.content
  32. );
  33. };
  34. return React.createElement(
  35. 'ul',
  36. null,
  37. this.state.records.map(createPost)
  38. );
  39. }
  40. });
  41. $(function(){ ReactDOM.render(React.createElement(PostList, null), document.getElementById('myApplication')); });
  42. </script>
  43. </head>
  44. <body>
  45. <div id="myApplication">Loading...</div>
  46. </body>
  47. </html>