title: Importing a JSX file in another JSX file
body: <p>I'm a very beginner in React. I created a general React Component in a JSX file and then I intend to import it in another JSX file. However, when I import the following error is returned <code>ReferenceError: require is not defined</code>.</p>
  
  <p>This is my general object:</p>
  
  <pre><code>class Footer extends React.Component{
      render(){
          return (
              &lt;div&gt;Footer&lt;/div&gt;
          );
      }
  }
  export default Footer;
  </code></pre>
  
  <p>And this is the other JSX file:</p>
  
  <pre><code>import Footer from './generalPageFooter.jsx';
  const contentNode = document.getElementById('div-content');
  class AdminPanel extends React.Component{
      render(){
          return (
              &lt;div&gt;
                  &lt;h3&gt;Sample Text&lt;/h3&gt;
              &lt;/div&gt;
          );
      }
  }
  class AdminPage extends React.Component{
      render(){
          return (
              &lt;div&gt;
                  &lt;h3&gt;Sample Text&lt;/h3&gt;
              &lt;/div&gt;
          );
      }
  }
  ReactDOM.render(&lt;AdminPage /&gt;, contentNode);
  </code></pre>
  
  <p>In the HTML file the code is the following:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="div-content"&gt;
      &lt;/div&gt;
      &lt;script type="text/babel" src="/adminPage.jsx"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>