如何正确渲染 React.js - 不渲染

Question

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.

Here is me loginSignup.js code :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import LoginSignup from './test';


ReactDOM.render(<LoginSignup />, document.getElementById('root1'));

Here is test.js :

import React from 'react';
import './App.css';
import './font-awesome.css'



function LoginSignup() {

    return <div>

        <form className="form-signin">
            <div className="text-center mb-4">
                <img className="mb-4" src="icon.svg" alt="" width="72" height="72"/>
                <h1 className="h3 mb-3 font-weight-normal">Assignment Submission System</h1>
                <p>Please Sign-in or Sign-up to continue</p>
            </div>

            <div className="form-label-group">
                <input type="email" id="inputEmail" className="form-control" placeholder="Email address" required
                       autoFocus/>
                <label htmlFor="inputEmail">Email address</label>
            </div>

            <div className="form-label-group">
                <input type="password" id="inputPassword" className="form-control" placeholder="Password" required>
                    <label htmlFor="inputPassword">Password</label>
                </input>
            </div>

            <div className="checkbox mb-3">
                <label>
                    <input type="checkbox" value="remember-me"> Remember me</input>
                </label>
            </div>
            <button className="btn btn-lg btn-primary btn-block btn-animated" type="submit">Sign in</button>
        </form>
    </div>

}


export default LoginSignup;

Inside loginSignup.html :

<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root1"></div>

index.js is here :

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(<App />, document.getElementById('root'));

setTimeout(function(){
    window.location.href = '/loginSignup.html';
}, 1000);




serviceWorker.unregister();

It renders noting..

Answer 1

It is better to use either components or pure functions if you do not need lifecycle hooks.

class LoginSignUp extends React.Component {

   ...
   render() {
     return <div>....</div>
   }
}

or Pure functions

export const LoginSignUp = () => {}

Try in return use ()

return (
<div>.....</div>
);

Answer 2

I am able to compile and see in the output of your form

Your HTML layout for <input> is incorrect, refer the below correct JSX

import React from "react";
import ReactDOM from "react-dom";
//import "./index.css";
//import LoginSignup from "./test";
export default function LoginSignup () { /*move this portion in separate file*/

  return (<div>

      <form className="form-signin">
          <div className="text-center mb-4">
              <img className="mb-4" src="icon.svg" alt="" width="72" height="72"/>
              <h1 className="h3 mb-3 font-weight-normal">Assignment Submission System</h1>
              <p>Please Sign-in or Sign-up to continue</p>
          </div>

          <div className="form-label-group">
              <input type="email" id="inputEmail" className="form-control" placeholder="Email address" required
                     autoFocus/>
              <label htmlFor="inputEmail">Email address</label>
          </div>

          <div className="form-label-group">
              <input type="password" id="inputPassword" className="form-control" placeholder="Password" required />
                  <label htmlFor="inputPassword">Password</label> 
          </div>

          <div className="checkbox mb-3">
              <label>
                  <input type="checkbox" value="remember-me"/> Remember me 
              </label>
          </div>
          <button className="btn btn-lg btn-primary btn-block btn-animated" type="submit">Sign in</button>
      </form>
  </div>)

}
ReactDOM.render(<LoginSignup />, document.getElementById("root1"));

export your function like the below

export default function LoginSignup() {
    return <div>

        <form className="form-signin">
            <div className="text-center mb-4">
                <img className="mb-4" src="icon.svg" alt="" width="72" height="72"/>
                <h1 className="h3 mb-3 font-weight-normal">Assignment Submission System</h1>
                <p>Please Sign-in or Sign-up to continue</p>
            </div>

            <div className="form-label-group">
                <input type="email" id="inputEmail" className="form-control" placeholder="Email address" required
                       autoFocus/>
                <label htmlFor="inputEmail">Email address</label>
            </div>

            <div className="form-label-group">
                **<input type="password" id="inputPassword" className="form-control" placeholder="Password" required/>
                    <label htmlFor="inputPassword">Password</label> 
            </div>**

            <div className="checkbox mb-3">
                <label>
                    **<input type="checkbox" value="remember-me"/> Remember me** 
                </label>
            </div>
            <button className="btn btn-lg btn-primary btn-block btn-animated" type="submit">Sign in</button>
        </form>
    </div>

}

Highlighted** issues with your JSX HTML code

Answer 3

As Kannan G already mentioned, you have errors in your JSX.

I've been able to fix it so it renders at least: https://codesandbox.io/embed/silly-sea-07ej2

Here is only the Test.js file if you don't want to click the link above:

import React from "react";
import './App.css';
import './font-awesome.css';

function LoginSignup() {
  return (
    <div>
      <form className="form-signin">
        <div className="text-center mb-4">
          <img className="mb-4" src="icon.svg" alt="" width="72" height="72" />
          <h1 className="h3 mb-3 font-weight-normal">
            Assignment Submission System
          </h1>
          <p>Please Sign-in or Sign-up to continue</p>
        </div>

        <div className="form-label-group">
          <input
            type="email"
            id="inputEmail"
            className="form-control"
            placeholder="Email address"
            required
            autoFocus
          />
          <label htmlFor="inputEmail">Email address</label>
        </div>

        <div className="form-label-group">
          <input
            type="password"
            id="inputPassword"
            className="form-control"
            placeholder="Password"
            required
          />
          <label htmlFor="inputPassword">Password</label>
        </div>

        <div className="checkbox mb-3">
          <label>
            <input type="checkbox" value="remember-me" /> Remember me
          </label>
        </div>
        <button
          className="btn btn-lg btn-primary btn-block btn-animated"
          type="submit"
        >
          Sign in
        </button>
      </form>
    </div>
  );
}

export default LoginSignup;

Also I recommend you installing the react developer tools.