title: How to render React.js properly - not rendering
body: <p>I'm trying to create a web platform where I have two pages, one is index.html, created by system and other files associated with it. There is another loginSignup.html created by me and files related to it. I used the same approach as index.html but it is rendering nothing.</p>
  
  <p>Here is me loginSignup.js code :</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import LoginSignup from './test';
  
  
  ReactDOM.render(&lt;LoginSignup /&gt;, document.getElementById('root1'));
  
  
  </code></pre>
  
  <p>Here is test.js :</p>
  
  <pre><code>import React from 'react';
  import './App.css';
  import './font-awesome.css'
  
  
  
  function LoginSignup() {
  
      return &lt;div&gt;
  
          &lt;form className="form-signin"&gt;
              &lt;div className="text-center mb-4"&gt;
                  &lt;img className="mb-4" src="icon.svg" alt="" width="72" height="72"/&gt;
                  &lt;h1 className="h3 mb-3 font-weight-normal"&gt;Assignment Submission System&lt;/h1&gt;
                  &lt;p&gt;Please Sign-in or Sign-up to continue&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div className="form-label-group"&gt;
                  &lt;input type="email" id="inputEmail" className="form-control" placeholder="Email address" required
                         autoFocus/&gt;
                  &lt;label htmlFor="inputEmail"&gt;Email address&lt;/label&gt;
              &lt;/div&gt;
  
              &lt;div className="form-label-group"&gt;
                  &lt;input type="password" id="inputPassword" className="form-control" placeholder="Password" required&gt;
                      &lt;label htmlFor="inputPassword"&gt;Password&lt;/label&gt;
                  &lt;/input&gt;
              &lt;/div&gt;
  
              &lt;div className="checkbox mb-3"&gt;
                  &lt;label&gt;
                      &lt;input type="checkbox" value="remember-me"&gt; Remember me&lt;/input&gt;
                  &lt;/label&gt;
              &lt;/div&gt;
              &lt;button className="btn btn-lg btn-primary btn-block btn-animated" type="submit"&gt;Sign in&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
  }
  
  
  export default LoginSignup;
  
  
  </code></pre>
  
  <p>Inside loginSignup.html :</p>
  
  <pre><code>
  &lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
  &lt;div id="root1"&gt;&lt;/div&gt;
  
  
  </code></pre>
  
  <p>index.js is here :</p>
  
  <pre><code>
  import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import './font-awesome.css';
  import App from './App';
  import * as serviceWorker from './serviceWorker';
  import { BrowserRouter } from 'react-router-dom';
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
  
  setTimeout(function(){
      window.location.href = '/loginSignup.html';
  }, 1000);
  
  
  
  
  serviceWorker.unregister();
  
  
  </code></pre>
  
  <p>It renders noting..</p>