react.dev/cookbook/cb-12-initial-ajax.md

id	title	layout	permalink	prev
initial-ajax	Load initial data via AJAX	cookbook	initial-ajax.html	dom-event-listeners.html

Problem

You want to load initial ajax data.

Solution

Fetch data in componentDidMount. When they arrive, put them inside your state then render them.

This example fetches the desired Github user's lastest gist:

/** @jsx React.DOM */

var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },
  componentDidMount: function() {
    $.get(this.props.source, function(result) {
      var lastGist = result[0];
      this.setState({
        username: lastGist.user.login,
        lastGistUrl: lastGist.html_url
      });
    }.bind(this));
  },
  render: function() {
    return (
      <div>
        {this.state.username}'s last gist is
        <a href={this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

React.renderComponent(
  <UserGist source="https://api.github.com/users/octocat/gists" />, mountNode
);