React - Uncaught ReferenceError: require is not defined
<p>I'm making a simple flask app, using react for the front-end stuff. Right now I'm experimenting with importing React components from other files, without success. This is the error I'm getting:</p>

<p><code>Uncaught ReferenceError: require is not defined</code></p>

<p>This is my html file:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Index page&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;

    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.16/css/bulma.min.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="/static/css/style.css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="columns"&gt;
        &lt;div class="column"&gt;
            some stuff
        &lt;/div&gt;
        &lt;div class="column"&gt;
            &lt;div id="index"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script type="text/babel" src="static/js/index.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>and my <b>index.js</b>:</p>

<pre><code>import FormComponent from './FormComponent.js';

var MainClass = React.createClass({
  render:function(){
    return (
      &lt;div&gt;
        &lt;div&gt;this is the main component&lt;/div&gt;
        &lt;div&gt;&lt;FormComponent /&gt;&lt;/div&gt;
      &lt;/div&gt;
    );
  }
});


ReactDOM.render(&lt;MainClass /&gt;, document.getElementById('index'));
</code></pre>

<p>and finally the <b>FormCommponent.js</b>, which is in the same folder:</p>

<pre><code>var FormComponent = React.createClass({

  render: function() {
    return (
        &lt;div&gt;this is an imported component&lt;/div&gt;
    );
  }

});

module.exports = FormComponent;
</code></pre>

<p>Does anyone know what am I doing wrong?</p>

<p>I'm not using any package managers.</p>

<p><b>EDIT</b><br>
Solved the problem by using browserify, as mentioned below.
Thanks for the help</p>