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 RepoList = React.createClass({
    13. getInitialState: function() {
    14. return {
    15. loading: true,
    16. error: null,
    17. data: null
    18. };
    19. },
    20. componentDidMount() {
    21. this.props.promise.then(
    22. value => this.setState({loading: false, data: value}),
    23. error => this.setState({loading: false, error: error}));
    24. },
    25. render: function() {
    26. if (this.state.loading) {
    27. return <span>Loading...</span>;
    28. }
    29. else if (this.state.error !== null) {
    30. return <span>Error: {this.state.error.message}</span>;
    31. }
    32. else {
    33. var repos = this.state.data.items;
    34. var repoList = repos.map(function (repo, index) {
    35. return (
    36. <li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}</li>
    37. );
    38. });
    39. return (
    40. <main>
    41. <h1>Most Popular JavaScript Projects in Github</h1>
    42. <ol>{repoList}</ol>
    43. </main>
    44. );
    45. }
    46. }
    47. });
    48. ReactDOM.render(
    49. <RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
    50. document.getElementById('example')
    51. );
    52. </script>
    53. </body>
    54. </html>
    56. 01、上面代码从Github 的API抓取数据，然后将Promise对象作为属性，传给RepoList 组件。
    57. 如果Promise 对象正在抓取数据（pending 状态），组件显示"正在加载"；如果Promise 对象报错（rejected 状态），
    58. 组件显示报错信息；如果Promise对象抓取数据成功（fulfilled 状态），组件显示获取的数据。