xgqfrms-GitHub/React-Babel.md

## React-Babel.md

      
    Raw
  

              React-Babel.md
            
          
    ES6

var UserGist = React.createClass({
  getInitialState() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },

  componentDidMount() {
    this.serverRequest = $.get(this.props.source, function (result) {
      var lastGist = result[0];
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    }.bind(this));
  },

  componentWillUnmount() {
    this.serverRequest.abort();
  },

  render() {
    return (
      <div>
        {this.state.username} 用户最新的 Gist 共享地址：
        <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
      </div>
    );
  }
});
ES5

'use strict';

var UserGist = React.createClass({
  displayName: 'UserGist',
  getInitialState: function getInitialState() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },
  componentDidMount: function componentDidMount() {
    this.serverRequest = $.get(this.props.source, function (result) {
      var lastGist = result[0];
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    }.bind(this));
  },
  componentWillUnmount: function componentWillUnmount() {
    this.serverRequest.abort();
  },
  render: function render() {
    return React.createElement(
      'div',
      null,
      this.state.username,
      ' \u7528\u6237\u6700\u65B0\u7684 Gist \u5171\u4EAB\u5730\u5740\uFF1A',
      React.createElement(
        'a',
        { href: this.state.lastGistUrl },
        this.state.lastGistUrl
      )
    );
  }
});