title: React.Js not rendering in django project
body: <p>i am creating a project where react is not rendering anything on django localhost</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;&lt;/head&gt;
      &lt;body&gt;
          &lt;div id="App"&gt;
              &lt;!---all will be define in App.js--&gt;
              &lt;h1&gt;Index.html &lt;/h1&gt;
          &lt;/div&gt;
      &lt;/body&gt;
      {% load static%}
      &lt;script src="{% static "frontend/main.js" %}"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  import Header from './layout/header';
  
  class App extends Component {
      render() {
          return (
          &lt;h1&gt;App.JS&lt;/h1&gt;
          )
      }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('app'));
  </code></pre>
  
  <p>this is my project structure:</p>
  
  <p><a href="https://i.stack.imgur.com/3GRVF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3GRVF.png" alt="Project structure"></a></p>
  
  <p>After running npm run dev and python manage.py runserver this is the status everything is fine till here:</p>
  
  <p><a href="https://i.stack.imgur.com/W4LNL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W4LNL.png" alt="the status"></a></p>