react_tutorial7.jsx

var CommentBox = React.createClass({

  // getInitialState is called right when the component is initialized
  // its return value is set as the component's state
  getInitialState: function() {
    return {data: []};
  },

  // componentDidMount is called right when the DOM element is first mounted
  // it is not called again every time the component re-renders
  componentDidMount: function() {
    $.ajax({
      // using the url property we set above
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        // as mentioned earlier, right after setState is called
        // the component will re-render
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },

  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm />
      </div>
    );
  }
});