案例：React案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>W3xue教程 React 实例</title>
6
    <script src="/js/react0.14.7/react.js"></script>
7
    <script src="/js/react0.14.7/react-dom.js"></script>
8
    <script src="/js/react0.14.7/browser.min.js"></script>
9
    <script src="/js/bootstrap/jquery.min.js"></script>
10
  </head>
11
 <body>
12
    <div id="example"></div>
13
    <script type="text/babel">
14
      var UserGist = React.createClass({
15
        getInitialState: function() {
16
          return {
17
            username: '',
18
            lastGistUrl: ''
19
          };
20
        },
21
​
22
        componentDidMount: function() {
23
          this.serverRequest = $.get(this.props.source, function (result) {
24
            var lastGist = result[0];
25
            this.setState({
26
              username: lastGist.owner.login,
27
              lastGistUrl: lastGist.html_url
28
            });
29
          }.bind(this));
30
        },
31
​
32
        componentWillUnmount: function() {
33
          this.serverRequest.abort();
34
        },
35
​
36
        render: function() {
37
          return (
38
            <div>
39
              {this.state.username} 用户最新的 Gist 共享地址：
40
              <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
41
            </div>
42
          );
43
        }
44
      });
45
​
46
      ReactDOM.render(
47
        <UserGist source="https://api.github.com/users/octocat/gists" />,
48
        document.getElementById('example')