1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <script src="../build/react.js"></script>
    5. <script src="../build/react-dom.js"></script>
    6. <script src="../build/browser.min.js"></script>
    7. <script src="../build/jquery.min.js"></script>
    8. </head>
    9. <body>
    10. <div id="example"></div>
    11. <script type="text/babel">
    12. var UserGist = React.createClass({
    13. getInitialState: function() {
    14. return {
    15. username: '',
    16. lastGistUrl: ''
    17. };
    18. },
    19. componentDidMount: function() {
    20. $.get(this.props.source, function(result) {
    21. var lastGist = result[0];
    22. if (this.isMounted()) {
    23. this.setState({
    24. username: lastGist.owner.login,
    25. lastGistUrl: lastGist.html_url
    26. });
    27. }
    28. }.bind(this));
    29. },
    30. render: function() {
    31. return (
    32. <div>
    33. {this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a>.
    34. </div>
    35. );
    36. }
    37. });
    38. ReactDOM.render(
    39. <UserGist source="https://api.github.com/users/octocat/gists" />,
    40. document.getElementById('example')
    41. );
    42. </script>
    43. </body>
    44. </html>
    46. 01、组件的数据来源，通常是通过AJAX请求服务器获取，可以使用componentDidMount 方法设置AJAX 请求，等待请求成功，
    47. 再用this.setState 方法重新渲染UI
    49. 02、上面代码使用JQuery 完成Ajax 请求，这是为了便于说明，React 本身没有任何依赖，完全可以不用JQuery，而使用其它库。