React学习日记

es2015版本：

//需要 jquery库
class MyList extends React.Component {
    constructor(...args) {
      super(...args);
      this.state = {
        loading: true,
        error: null,
        data: null
      };
    }

    componentDidMount() {
      const url = 'https://api.github.com/search/repositories?q=javascript&sort=stars';
      $.getJSON(url)
       .done(
        (value) => this.setState({
          loading: false,
          data: value
        })
      ).fail(
        (jqXHR, textStatus) => this.setState({
          loading: false,
          error: jqXHR.status
        })
      );
    }

    render() {
      if (this.state.loading) {
        return <span>Loading...</span>;
      }
      else if (this.state.error !== null) {
        return <span>Error: {this.state.error}</span>;
      }
      else {
        /* 你的代码填入这里 */
        // console.log(this.state.data);
        let projects = this.state.data.items,
            result = [];
        projects.forEach(p => {
          let item = <li>{p.id}:{p.name}</li>;
          result.push(item);
        });
        return (
          <div>
            <p>API 数据获取成功</p>
            <p><ul>
              {result}
            </ul></p>
          </div>
        );
      }
    }
  };

  ReactDOM.render(
    <MyList/>,
    document.getElementById('example')
  );