React
AJAX呼び出しに反応する

HTTP GETリクエスト

場合によっては、コンポーネントがリモートエンドポイント（REST APIなど）からデータをレンダリングする必要がある場合があります。 標準的な方法は、 componentDidMountメソッドでそのような呼び出しを行うことです。

ここでは、 スーパーエージェントをAJAXヘルパーとして使用する例を示します。

import React from 'react'
import request from 'superagent'

class App extends React.Component {
  constructor () {
    super()
    this.state = {}
  }
  componentDidMount () {
    request
      .get('/search')
      .query({ query: 'Manny' })
      .query({ range: '1..5' })
      .query({ order: 'desc' })
      .set('API-Key', 'foobar')
      .set('Accept', 'application/json')
      .end((err, resp) => {
        if (!err) {
          this.setState({someData: resp.text})
        }
      })
  },
  render() {
    return (
      <div>{this.state.someData || 'waiting for response...'}</div>
    )
  }
}

React.render(<App />, document.getElementById('root'))

要求は、 requestオブジェクトに対して適切なメソッドを呼び出し、次に.end()を呼び出して要求を送信することによって開始できます。ヘッダーフィールドを設定するのは簡単です。フィールド名と値を.set()を呼び出します。

.query()メソッドはオブジェクトを受け取ります。オブジェクトはGETメソッドと一緒に使用するとクエリ文字列を形成します。以下はパス/search?query=Manny&range=1..5&order=descを生成します。

POSTリクエスト

request.post('/user')
  .set('Content-Type', 'application/json')
  .send('{"name":"tj","pet":"tobi"}')
  .end(callback)

詳細は、 Superagentのドキュメントを参照してください。

第三者図書館なしのReactのAjax - 別名VanillaJS

以下はIE9 +で動作します

import React from 'react'

class App extends React.Component {
  constructor () {
    super()
    this.state = {someData: null}
  }
  componentDidMount () {
    var request = new XMLHttpRequest();
    request.open('GET', '/my/url', true);
    
    request.onload = () => {
      if (request.status >= 200 && request.status < 400) {
        // Success!
        this.setState({someData: request.responseText})
      } else {
        // We reached our target server, but it returned an error
        // Possibly handle the error by changing your state.
      }
    };
    
    request.onerror = () => {
      // There was a connection error of some sort.
      // Possibly handle the error by changing your state.
    };
    
    request.send();
  },
  render() {
    return (
      <div>{this.state.someData || 'waiting for response...'}</div>
    )
  }
}

React.render(<App />, document.getElementById('root'))

HTTP GETリクエストとデータのループ

次の例は、リモートソースから取得した一連のデータをコンポーネントにレンダリングする方法を示しています。

ほとんどのブラウザに組み込まれているfetchを使用してAJAXリクエストを作成します。プロダクションでは古いブラウザをサポートするためにpolyfillをfetchます。あなたはまた、（例えば要求を行うための他のライブラリを使用することができますaxios 、 たSuperAgent 、あるいはプレーンなJavascriptを）。

受け取ったデータはコンポーネントの状態として設定するので、renderメソッド内でアクセスできます。そこで、 mapを使用してデータをループしmap 。 Reactのレンダリングパフォーマンスにとって重要な、ループした要素に常に一意のkey属性 （または小道具）を追加することを忘れないでください。

import React from 'react';

class Users extends React.Component {
  constructor() {
    super();
    this.state = { users: [] };
  }

  componentDidMount() {
    fetch('/api/users')
      .then(response => response.json())
      .then(json => this.setState({ users: json.data }));
  }

  render() {
    return (
      <div>
        <h1>Users</h1>
        {
          this.state.users.length == 0
            ? 'Loading users...'
            : this.state.users.map(user => (
              <figure key={user.id}>
                <img src={user.avatar} />
                <figcaption>
                  {user.name}
                </figcaption>
              </figure>
            ))
        }
      </div>
    );
  }
}

ReactDOM.render(<Users />, document.getElementById('root'));

JSBinの実例