title: How I get react component in html file?
body: <p>I have made web-page by pure js,css and django.<br>
  Feeling so ineffective then I try to use React js.
  However, when I make simple react component all, there is one problem that I don't know how to use this component on current html file. </p>
  
  <p>Would you tell me how I get 'App component' from main.html? </p>
  
  <p><strong>main.html</strong></p>
  
  <pre><code>     ...
  
       &lt;main class="mainPart" style="height: 100%; position: relative; top: 170px; "&gt;
          &lt;div class = "bodyPart" &gt;
             &lt;div id="bodyPartWrapper"&gt;
  
            &lt;script type="text/babel"&gt;
  
             var App = ?????? 'how to get App Component?'
  
             ReactDOM.render(
                &lt;App /&gt;,
                 document.getElementById('bodyPartWrapper')
              );
  
            &lt;/script&gt;
  
             &lt;/div&gt;
          &lt;/div&gt;
       &lt;/main&gt;
  
       ...
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  class App extends Component {
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;header className="App-header"&gt;
            &lt;img src={logo} className="App-logo" alt="logo" /&gt;
            &lt;h1 className="App-title"&gt;title goes here&lt;/h1&gt;
          &lt;/header&gt;
          &lt;p className="App-intro"&gt;
            To get started, edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
          &lt;/p&gt;
        &lt;/div&gt;
          );
        }
      }
  export default App;
  </code></pre>