react.jsでQiitaの特定ユーザのストックをとってきてみる

react.js本家のTutorialをちょっと書き換えてQiitaのAPIを叩くようにしてみました。

実際に動くJSFiddleはこちら。

var Stock = React.createClass({
  render: function() {
    // 無駄にスタイルを適用してみる
    var pStyle = {
      color: 'red'
    };
    // StockListコンポーネントのstockNodesをthis.props.childrenでアクセス
    var tags = React.Children.map(this.props.children, function(child) {
      return <p style={pStyle}>{child}</p>
    });
    return (
      <div>
        <h1>
          {this.props.title}
        </h1>
        <h2>
          {this.props.author}
        </h2>
        {tags}
      </div>
    );
  }
});

var StockList = React.createClass({
  render: function() {
    var stockNodes = this.props.data.map(function (stock) {
    console.log('stock',stock);
      return (
        <Stock author={stock.user.id} title={stock.title}>
          {stock.tags.map(function(tag){ return tag.name})}
        </Stock>
      );
    });
    return (
      <div className="stockList">
        {stockNodes}
      </div>
    );
  }
});

var StockBox = React.createClass({
  loadStocksFromServer: function() {
    // ajaxでAPIを叩く
    $.ajax({
      // とりあえずちょっと取得してみたいだけなので3ストック限定で取得
      url: 'https://qiita.com/api/v2/users/' + this.props.userName + '/stocks?page=1&per_page=3',
      dataType: 'json',
      success: function(data) {
        // 取得に成功したらstateに反映
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.username, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState: function() {
    return {data: []};
  },
  componentDidMount: function() {
    // コンポーネントがマウントされたら読み込み開始
    this.loadStocksFromServer();
  },
  render: function() {
    return (
      <div className="stockBox">
        <h1>Stocks</h1>
        <StockList data={this.state.data} />
      </div>
    );
  }
});

// StockBoxコンポーネントのuserNameを適当に変えることで
// 誰かしらのストックをとってくる
React.render(
  <StockBox userName="kenfdev" />,
  document.getElementById('content')
);