How to properly store React components in separate files and import React?
<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>