title: Moving React classes into separate files
body: <p>After doing the <a href="https://facebook.github.io/react/docs/tutorial.html">React tutorial</a> this is my index.html file:</p>
  
  <pre><code>&lt;!-- index.html --&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;title&gt;Hello React&lt;/title&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="content"&gt;&lt;/div&gt;
      &lt;script src="lib/main.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this is my src/main.jsx file:</p>
  
  <pre><code>var CommentBox = React.createClass({
    getInitialState: function() {
      return {data: []};
    },
    loadCommentsFromServer: function() {
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        cache: false,
        success: function(data) {
          this.setState({data: data});
        }.bind(this),
        error: function(xhr, status, err) {
          console.error(this.props.url, status, err.toString());
        }.bind(this)
      });
    },
    handleCommentSubmit: function(comment) {
      var comments = this.state.data;
      var newComments = comments.concat([comment]);
      this.setState({data: newComments});
  
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        type: 'POST',
        data: comment,
        success: function(data) {
          this.setState({data: data});
        }.bind(this),
        error: function(xhr, status, err) {
          console.error(this.props.url, status, err.toString());
        }.bind(this)
      });
    },
    componentDidMount: function() {
      this.loadCommentsFromServer();
      setInterval(this.loadCommentsFromServer, this.props.pollInterval);
    },
    render: function() {
      return (
        &lt;div className="commentBox"&gt;
          &lt;h1&gt;Comments Yo&lt;/h1&gt;
          &lt;CommentForm onCommentSubmit={this.handleCommentSubmit} /&gt;
          &lt;CommentList data={this.state.data} /&gt;
        &lt;/div&gt;
      );
    }
  });
  
  var CommentForm = React.createClass({
    handleSubmit: function(e) {
      e.preventDefault();
      var author = React.findDOMNode(this.refs.author).value.trim();
      var text = React.findDOMNode(this.refs.text).value.trim();
      if (!text || !author) {
        return;
      }
  
      // send request to the server
      this.props.onCommentSubmit({author: author, text: text});
      React.findDOMNode(this.refs.author).value = '';
      React.findDOMNode(this.refs.text).value = '';
      return;
    },
    render: function() {
      return (
        &lt;form className="commentForm" onSubmit={this.handleSubmit}&gt;
          &lt;input type="text" placeholder="Your name" ref="author" /&gt;
          &lt;input type="text" placeholder="Say something..." ref="text" /&gt;
          &lt;input type="submit" value="Post" /&gt;
        &lt;/form&gt;
      );
    }
  });
  
  var CommentList = React.createClass({
    render: function() {
      var commentNodes = this.props.data.map(function (comment) {
        return (
          &lt;Comment author={comment.author}&gt;
            {comment.text}
          &lt;/Comment&gt;
        );
      });
      commentNodes.reverse();
      return (
        &lt;div className="commentList"&gt;
          {commentNodes}
        &lt;/div&gt;
      );
    }
  });
  
  var Comment = React.createClass({
    render: function() {
      var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
      return (
        &lt;div className="comment"&gt;
          &lt;h2 className="commentAuthor"&gt;
            {this.props.author}
          &lt;/h2&gt;
          &lt;span dangerouslySetInnerHTML={{__html: rawMarkup}} /&gt;
          &lt;hr /&gt;
        &lt;/div&gt;
      );
    }
  });
  
  React.render(
    &lt;CommentBox url="comments.json" pollInterval={2000} /&gt;,
    document.getElementById('content')
  );
  </code></pre>
  
  <p>Additionally, I am running this command to turn my jsx into js:</p>
  
  <pre><code>babel --watch src/ --out-dir lib/
  </code></pre>
  
  <p>I would like to move each React class into its own file. For example, I would like to create the following four files (note: each map to a top level "var" declaration in my main.jsx file) and pull all of these classes into my main.jsx file:</p>
  
  <pre><code>comment.jsx
  commentList.jsx
  commentForm.jsx
  commentBox.jsx
  </code></pre>
  
  <p>How do I do this?</p>
  
  <p>After banging my head on require and es6 for a while here, I still do not have a good intuition of how to separate all these apart, or if something like require / es6 is even the right way to approach this.</p>
  
  <p>Thanks for the help!</p>