How to build a login screen with React and Bootstrap

Most websites today require users to register to access certain features or special pages, but building a login screen is one of the most tedious tasks.

 

In this article, let's explore with TipsMake.com how to build a simple yet beautiful login screen using React and Bootstrap 5 !

Required

1. Basic knowledge of HTML, CSS, and Javascript.
2. Basic understanding of React.
3. Set up NodeJS on your computer.

Setting up a React app

Run the following command to create a new React project:

npx create-react-app react-login

Open the project and launch the application:

cd react-login npm start

Once the build process is complete, the application will look like this:

Install Bootstrap

Install Bootstrap using npm:

npm install –save bootstrap

Edit App.js and add an import command for Bootstrap:

 

import "bootstrap/dist/css/bootstrap.min.css"

Go ahead and delete the boilerplate code that your React app adds by default App.js. This file will look like this:

import "bootstrap/dist/css/bootstrap.min.css" import "./App.css" function App() { return } export default App

Establish a roadmap

First, you need to create a new Auth element in Auth.js. We will be working on the Auth element needed to set up the route.

import React from "react" export default function (props) { return Auth Screen }

In a real-world application, you would navigate the user to the login screen if they haven't already. This is where the navigation comes in; run the following command to install it react-router-dom, and restart the React app after the installation is complete.

npm install --save react-router-dom

Edit the file App.jsto set up the login route and default settings. Below is the login interface on the route /auth.

import "bootstrap/dist/css/bootstrap.min.css" import "./App.css" import { BrowserRouter, Routes, Route } from "react-router-dom" import Auth from "./Auth" function App() { return ( } /> ) } export default App

Create a login form

Edit Auth.jsthe initial creation:

import React from "react" export default function (props) { return (

Sign In

 Email address Password  Submit 

Forgot password?

 ) }

 

Edit App.cssto include:

.App { background-color: white; } .Auth-form-container { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; } .Auth-form { width: 420px; box-shadow: rgb(0 0 0 / 16%) 1px 1px 10px; padding-top: 30px; padding-bottom: 20px; border-radius: 8px; background-color: white; } .Auth-form-content { padding-left: 12%; padding-right: 12%; } .Auth-form-title { text-align: center; margin-bottom: 1em; font-size: 24px; color: rgb(34, 34, 34); font-weight: 800; } label { font-size: 14px; font-weight: 600; color: rgb(34, 34, 34); }

If you open the route /auth, you will see the following form:

Add a registration form

Typically, programmers want users to register if they don't already have an account. (Edit element Auth.js:)

import React, { useState } from "react" export default function (props) { let [authMode, setAuthMode] = useState("signin") const changeAuthMode = () => { setAuthMode(authMode === "signin" ? "signup" : "signin") } if (authMode === "signin") { return (

Sign In

 Not registered yet?{" "} Sign Up Email address Password  Submit 

Forgot password?

 ) } return (

Sign In

 Already registered?{" "} Sign In Full Name Email address Password  Submit 

Forgot password?

 ) }

Used useStateto switch between login and registration. Now when you access [website] /auth, you can switch between login and registration.

Above is how to create a login/registration UI using React with Bootstrap . I hope this article is helpful to you.

You've just finished reading the article "How to build a login screen with React and Bootstrap" edited by the TipsMake team. You can save how-to-build-a-login-screen-mphah.pdf to your computer here to read later or print it out. We hope this article has provided you with many useful tech tips and tricks. You can search for similar articles on tips and guides. Thank you for reading and for following us regularly.