https://twitter.com/yuanalexwu/status/735285936284569601

ReactComponentWithAjax.js

class Foo extends Component {
  constructor () {
    super();
    this.state = {
      data: null,
      error: null,
      pending: false
    };
  }

  fetch = () => {
    if (this.state.pending) return; // don't fetch if already pending
    this.setState({ pending: true });
    $.ajax(...)
    .then(data => this.setState({
      data,
      pending: false
    }))
    .catch(error => this.setState({
      error,
      pending: false
    }))
  };

  render () {
    const { data, error } = this.state;
    return <div>
      <button onClick={this.fetch}>
        Fetch
      </button>
      { data && <Data data={data} /> }
      { error && <Error error={error} /> }
    </div>;
  }
}