title: How to properly store React components in separate files and import React?
body: <p>I've completed a few intro to React tutorials and am trying to put some of my knowledge so far to use. I've successfully created some components inside of a <code>&lt;script type='text/babel'&gt;</code> and using babel's <code>browser.js</code> to convert this to JS client-side in the browser. </p>
  
  <p>However, I'm now trying to break out my components into individual files, transpile them, and then serve the transpiled JS to the client rather than have that transpilation done client-side. </p>
  
  <p>I'm confused on how to properly import ReactJS into my component JSX files. I haven't built large JS applications before, so I'm not familiar with the ways to import libraries into other modules. </p>
  
  <p>Here's one of my component JSX files:</p>
  
  <pre><code>var SidebarFilter = React.createClass({
    render: function() {
      return (
          &lt;div className="btn-group"&gt;
            Some markup removed for brevity. 
          &lt;/div&gt;
      );
    }
  });
  </code></pre>
  
  <p>In my main html file, if I have:</p>
  
  <pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Prior to any of my <code>&lt;script&gt;</code> tags for my components, everything works fine.  But if the components are placed above the react/reactdom script tags, it doesn't work. </p>
  
  <p>I've seen javascript has an <code>import</code> and there is also <code>require</code>, but I'm not sure what the differences are, which is better to use when, and if either/both require any additional building or if they're used right in the browser. </p>
  
  <p>Thanks!</p>