Build React Log In And Sign Up UI Template With Bootstrap 4

Learn To Build React Log In And Sign Up UI Template With Bootstrap 4

Friends, as we know that login system allows the user to gain access to any software system securely. Sign Up is the process that enables the user to register in any web and mobile app.

So, in this tutorial, we will get to know how can we create an attractive login and user registration template for a React app. We will do this by using the Bootstrap 4 front-end framework to build this react login system.

If you are a novice in creating React apps, then just don’t worry. This guide will make you learn to the same while starting from scratch.

 

Let’s see the steps now that we have to follow to get the desired result:

  1. Prerequisite
  2. Set Up React 16+ App
  3. Install And Set Up Bootstrap 4 In React
  4. Create React Login And Sign Up Components
  5. Enable Routing In React
  6. Create React Log In Form Ui Template With Bootstrap 4
  7. Build React Sign Up UI Template With Bootstrap 4
  8. Summary

 

Prerequisite

So, before we start with it, this should be clear that you must have basic knowledge HTML,CSS, JavaScript, TypeScript and ES6. Also, remember to have Node set up in your system.

 

Set Up React 16+ App

This is the basic step in which we have to install a new React project so that we can move forward towards building React login and sign up UI template by using Bootstrap 4. We simply have to use the given command using create-react-app:

npx create-react-app react-login-signup-ui-template

 

Next is to enter inside the react-login-signup-ui-template project.

cd react-login-signup-ui-template

 

Install And Set Up Bootstrap 4 In React

Further, we need to install and set up the Bootstrap 4 UI framework and it provides beautiful UI components:

npm install bootstrap --save

 

After installing the Bootstrap, we have to now import bootstrap.min.css from node_modules inside src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';

function App() {
  return (
    <div className="App">
      <h3>Build Sign Up & Login UI Template in React</h3>
    </div>
  );
}

export default App;

Let’s start the React app:

npm start

 

Create React Log In And Sign Up Components

So, here, we will learn how to create a log in and sign up components in React app, create a components directory in the src folder. And also create login.component.js and signup.component.js files inside it.

Add the following code in login.component.js file:

import React, { Component } from "react";

export default class Login extends Component {
    render() {
        return (
            <div>
                <h3>React Login Component</h3>
            </div>
        );
    }
}

 

Now, add the following code in signup.component.js file:

import React, { Component } from "react";

export default class SignUp extends Component {
    render() {
        return (
            <div>
                <h3>React SignUp Component</h3>
            </div>
        );
    }
}

 

Enable Routing In React

In this step, we run the command in the terminal to install react-router-dom module to enable Router service in React:

npm install --save react-router-dom

 

Then, we will go to src/index.js file and import ReactDOM and service and wrap tag using module:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById("root")
);

serviceWorker.unregister();

 

Next, import BrowserRouter as Router, Switch, Router, Link React router modules to enable the routers with their associative components. After this, we go to src/App.js and include the following code into it:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import Login from "./components/login.component";
import SignUp from "./components/signup.component";

function App() {
  return (<Router>
    <div className="App">
      <nav className="navbar navbar-expand-lg navbar-light fixed-top">
        <div className="container">
          <Link className="navbar-brand" to={"/sign-in"}>positronX.io</Link>
          <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
            <ul className="navbar-nav ml-auto">
              <li className="nav-item">
                <Link className="nav-link" to={"/sign-in"}>Login</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to={"/sign-up"}>Sign up</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>

      <div className="auth-wrapper">
        <div className="auth-inner">
          <Switch>
            <Route exact path='/' component={Login} />
            <Route path="/sign-in" component={Login} />
            <Route path="/sign-up" component={SignUp} />
          </Switch>
        </div>
      </div>
    </div></Router>
  );
}

export default App;

 

Create React Login Form UI Template With Bootstrap 4

Here, we have to add the following code inside components/login.component.js file to build the login form template:

import React, { Component } from "react";

export default class Login extends Component {
    render() {
        return (
            <form>
                <h3>Sign In</h3>

                <div className="form-group">
                    <label>Email address</label>
                    <input type="email" className="form-control" placeholder="Enter email" />
                </div>

                <div className="form-group">
                    <label>Password</label>
                    <input type="password" className="form-control" placeholder="Enter password" />
                </div>

                <div className="form-group">
                    <div className="custom-control custom-checkbox">
                        <input type="checkbox" className="custom-control-input" id="customCheck1" />
                        <label className="custom-control-label" htmlFor="customCheck1">Remember me</label>
                    </div>
                </div>

                <button type="submit" className="btn btn-primary btn-block">Submit</button>
                <p className="forgot-password text-right">
                    Forgot <a href="#">password?</a>
                </p>
            </form>
        );
    }
}

 

Build React Sign Up Template With Bootstrap 4

Here, we have to add the following code inside components/signup.component.js file to build the signup form auth template UI template:

import React, { Component } from "react";

export default class SignUp extends Component {
    render() {
        return (
            <form>
                <h3>Sign Up</h3>

                <div className="form-group">
                    <label>First name</label>
                    <input type="text" className="form-control" placeholder="First name" />
                </div>

                <div className="form-group">
                    <label>Last name</label>
                    <input type="text" className="form-control" placeholder="Last name" />
                </div>

                <div className="form-group">
                    <label>Email address</label>
                    <input type="email" className="form-control" placeholder="Enter email" />
                </div>

                <div className="form-group">
                    <label>Password</label>
                    <input type="password" className="form-control" placeholder="Enter password" />
                </div>

                <button type="submit" className="btn btn-primary btn-block">Sign Up</button>
                <p className="forgot-password text-right">
                    Already registered <a href="#">sign in?</a>
                </p>
            </form>
        );
    }
}

Add Styling To Auth Components

To implement this step is quite interesting since it makes our React nLogin Ui app beautifully adding style to it. For that, we will go to src/index.css file and add the given code:

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800');

* {
  box-sizing: border-box;
}
body {
  background: #1C8EF9 !important;
  min-height: 100vh;
  display: flex;
  font-weight: 400;
  font-family: 'Fira Sans', sans-serif;
}

h1,h2,h3,h4,h5,h6,label,span {
  font-weight: 500;
  font-family: 'Fira Sans', sans-serif;
}

body, html, .App, #root, .auth-wrapper {
  width: 100%;
  height: 100%;
}

.navbar-light {
  background-color: #ffffff;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
}

.auth-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
}

.auth-inner {
  width: 450px;
  margin: auto;
  background: #ffffff;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
  padding: 40px 55px 45px 55px;
  border-radius: 15px;
  transition: all .3s;
}

.auth-wrapper .form-control:focus {
  border-color: #167bff;
  box-shadow: none;
}

.auth-wrapper h3 {
  text-align: center;
  margin: 0;
  line-height: 1;
  padding-bottom: 20px;
}

.custom-control-label {
  font-weight: 400;
}

.forgot-password,
.forgot-password a {
  text-align: right;
  font-size: 13px;
  padding-top: 10px;
  color: #7f7d7d;
  margin: 0;
}

.forgot-password a {
  color: #167bff;
}

 

Summary

So, friends, here we reach the end of this tutorial in which we have learned to build React Login and Sign Up UI templates using Bootstrap 4 UI framework. Hope you have found it quite simple to make beautiful components in React by using Bootstrap 4 UI Components.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *