Currently, I am venturing into the world of reactjs with an aim to create a seamless user experience by implementing login, register, and home screens through routing. Below is a snippet of my code.

import React from 'react';
import { render } from 'react-dom';

import { App } from './App/App.js';
import {Login} from './LoginPage.js';
import '../src/styles/homestyle.css';

// setting up fake backend
import { configureFakeBackend } from './_helpers/fake-backend.js';
configureFakeBackend();

render(
<App />,
document.getElementById('app')
);

Snippet of App.js focusing on routing.

import { HomePage } from '../HomePage/Homepage.js';
import { LoginPage } from '../LoginPage.js';
import { RegisterPage } from '../RegisterPage.js';
import { Details } from '../_details/Details.js';
import {styles} from '../styles/homestyle.css';


class App extends React.Component {
render() {
    return (
        <div className="login">

                    <Router>
                        <div>                            
                <PrivateRoute  path="/" exact component=    {HomePage} />
                  <Route  path="/login"  exact  component={LoginPage} />
             <Route  path="/register"  exact  component={RegisterPage} />
                        </div>
                    </Router>
                </div>

    );
}

Next, I'll share my login screen setup.

 render() {
    const { username, password,confirmpassword, submitted, loading, error } = this.state;
    return (
        <div className="innerdiv">
         <div className = "demo">
            <div className="movie-dcard">
                Username: test<br />
                Password: test
            </div>
            <h2 align = "center">Login </h2>
            <form name="form" >
            <div className={'form-group'}>
                    <button className={'form-group'} onClick = {this.handleRegisterClick} disabled={loading}>Register</button>
                    {loading &&
                        <img src="data:image/gif;base64,R0lGODlhEAAQAPIAAP" />
                    }
                </div>
            </form>
             <form name="form" onSubmit={this.handleSubmit}>
                <div className={'form-group' + (submitted && !username ? ' has-error' : '')}>
                    <label htmlFor="username">Username</label>
                    <input type="text" className="form-control" name="username" value={username} onChange={this.handleChange} />
                    {submitted && !username &&
                        <div className="help-block">Username is required</div>
                    }
                </div >
                <div className = {'form-group'+ (submitted && !confirmpassword ? 'has-error' : '')}>
                <label htmlFor = "confirmpassword">confirm Password</label>
                <input type = "text" className = "form-control" name = "confirmpassword" value = {confirmpassword} onSubmit = {this.handleChange} />
                {submitted && !confirmpassword &&
                        <div className="help-block"> confirm Password is required</div>
                    }
                    </div>
                <div className={'form-group' + (submitted && !password ? ' has-error' : '')}>
                    <label htmlFor="password">Password</label>
                    <input type="password" className="form-control" name="password" value={password} onChange={this.handleChange} />
                    {submitted && !password &&
                        <div className="help-block">Password is required</div>
                    }
                </div>
                <div>
                <div className={'form-group'}>
                    <button className="btn btn-primary" disabled={loading}>Login</button>
                    {loading &&
                        <img src="data:image/gif;base64,R0lGODlhEAAQAPIAAP" />
                    }
                </div>

                </div>
                {error &&
                    <div className={'alert alert-danger'}>{error}</div>
                }
             </form>
            </div>
        </div>
    );
}
}

Lastly, here's the CSS styling included:

   .movie-card {
    background-color: red;
    align-content: center;
    text-align: center;

  }
  .background {
    height: 100%;
    background-image: url("/images/background.jpg");
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    }
    .login {
      background: url("http://web3canvas.com/wp-content/uploads/2014/02/littlevisuals-high-quality-hd-banner-images-stock-photos-free-laptop-topview-download.jpg") no-repeat; 
      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    }

.home {
  background: url("https://www.w3schools.com/cssref/mountain.jpg") no-repeat; background-size: cover;
  height: 100vh;
 width: 100vw;
}

.innerdiv {
  align-content: center;
  height: 20%;
 margin: auto;
 width: 50%;
 border: 3px solid green;
 padding: 10px;
}

However, I'm facing difficulty in achieving full-screen background images. https://i.sstatic.net/qOd93.jpg

If you have any tips on how to make it full screen while using different images for each page/screen, please do share!