Login Page in React JS

Add the Container

In React applications, a container is a component that serves as a wrapper for other components, providing structure and layout to the application. Adding a container involves creating a new component or modifying an existing one to act as the main layout for the application.

Containers typically define the overall layout of the application, including header, footer, and main content sections. They may also include navigation elements, sidebars, or other UI components that provide functionality and structure to the application.

const Container = () => {
 return (
   <div className="container">
     {/* Add your other components and content here */}
   </div>
 );
};

Add the Route

In React applications, routing refers to the process of navigating between different pages or views within a single-page application (SPA). Adding a route involves configuring a routing library, such as React Router, and defining routes that map URLs to specific components or views.

Routes in React allow developers to create navigation links and handle user interactions, such as clicking on links or using browser navigation buttons, to navigate between different parts of the application. Routes can also be used to pass parameters or data to components, enabling dynamic and interactive navigation experiences.

const RouteComponent = () => {
 return (
   <div>
     {/* Add your route-specific content here */}
   </div>
 );
};

Login page in ReactJS Design

So, before we start with hands-on, let's first make a draft of the login page in React JS that we will be making. 

Firstly, we will make a form - that will have fields of email and password. After this, there will be a button to submit the information filled in these fields. Basically, it is the information that is sent to the backend for validation. But since we are only working on the front, we will only focus on developing the form and ensuring that we have a mechanism to send the filled values to the backend. Tasks after this are a matter of a completely different blog.  

The form will have a format like this(Of course, this is just the skeleton):

Let us get our hands on it. 

Click on the following link to read further: Hooks in React JS

Creating login page in ReactJS

So, to begin with, we will use functional components for developing login page in React JS. 
We will have two files for the task, namely, App.js and Login.js. CSS and HTML files will be there for styling and purposes, but we will focus only on the .js files here.

Initially, the Login.js file will look like this:

import React from 'react'

const Login=()=>{
	return(
	<div>
		<h1>Hello Form</h1>
	</div>
	)
}

export default Login  

You can also try this code with Online Javascript Compiler

Run Code

And, App.js will look like this: 

import React from ‘react’;
import Login from ‘Login’; 

const App=()=>{
	return(
		<div>
		<Login/>
		</div>
	)
}

export default App 

You can also try this code with Online Javascript Compiler

Run Code

The page looks like this:

Since it shows ‘Hello Form’, it implies we have had no issues till now. 

Now, we will make changes in the Form.js file and create the form. To make it easier, we will use forms and add the Form tag. Inside the form we create two fields - Email and Password.   

Login.js will look like this: 

import React from 'react'


const Login=()=>{
	return(
		<div>
			<form action=""> 
				<div> 
					<label htmlFor="email">Email</label>
					<input type="text" name="email" id="email"/> 
				</div> 
				<div> 
					<label htmlFor="passw">Password</label>
					<input type="text" name="passw" id="passw"/> 
				</div>  
				<button type="submit">Login</button>
			</form>
		</div>
	)
}

export default Login    

You can also try this code with Online Javascript Compiler

Run Code

The page will look like this:

So, the form is ready as in the above picture. 

Now, when some users fill in the information in the Email and Password fields, it has to be sent to the backend for authentication. For that purpose, it needs to be stored in some array/object, basically some kind of variable.An important fact to mention now is that we will be using Controlled Components. Controlled Components allow the form’s data to be handled by the state of the component instead of DOM. You can read more about Controlled Components and React Forms here.   

Now we need to store the values given by users as soon as they start entering them in any of the fields. For this, we use ReactJS Hooks. Here, we use useState hook as follows:

const [email,setEmail]=useState(“”); 
const [passw, setPassw]=useState(“”); 

You can also try this code with Online Javascript Compiler

Run Code

Initial values have been set to blank(“”). This way we have created the state values for both email and password. Now, in order to pass these values, we need value attribute in every input field as follows: 

<input type=”text” name=”email” id=”email” value={email}/>    //For email field
<input type=”text” name=”passw” id=”passw” value={passw}/>    //For password field

You can also try this code with Online Javascript Compiler

Run Code

Now, suppose you have id as “abc@gmail.com”. Now, you type a, then b, then c, and so on, so every time you type, you are updating the field’s value. To maintain that, onChange() handler is used. Event object is passed to it(short form e is used).

It is done in the following way: 

<input type=”text” name=”email” id=”email” value={email} onChange={(e)=>setEmail(e.target.value)} />    //For email field
<input type=”text” name=”passw” id=”passw” value={passw} onChange={(e)=>setPassw(e.target.value)}/>    //For password field 

You can also try this code with Online Javascript Compiler

Run Code

Code for Login.js looks like this:

import React,{useState} from 'react' 

const Login=()=>{ 
	const[email,setEmail]=useState(""); 
	const[passw,setPassw]=useState("");
	return(
		<div>
			<form action=""> 
				<div> 
					<label htmlFor="email">Email</label>
					<input type="text" name="email" id="email" value={email} onChange={(e)=>setEmail(e.target.value)}/> 
				</div> 
				<div> 
					<label htmlFor=”passw”>Password</label>
					<input type=”text” name=”passw” id=”passw” value={passw} onChange={(e)=>setPassw(e.target.value)}/> 
				</div>  
				<button type=”submit”>Login</button>
			</form>
		</div>
	)
}

export default Login    

You can also try this code with Online Javascript Compiler

Run Code

Now, when the user has filed the information, that information should be sent to the backend for authentication and further action.  Values are stored in an array using hook. 

const [dataInput, setDataInput]=useState('');

You can also try this code with Online Javascript Compiler

Run Code

So, when the user hits the Login button, then only that data is sent. For this, the onSubmit function is used with the form as follows:

<form action=”” onSubmit={submitThis}> 

You can also try this code with Online Javascript Compiler

Run Code

Defining the submitThis() function:

const submitThis=()=>{
	const info={email:email,passw:passw}; 
	setDataInput([info]);
}

You can also try this code with Online Javascript Compiler

Run Code

The work is done now(woohoo!). With this, the collected data from the form can be passed to any component and be used for various purposes. Usually, from the Login page in React JS, it is used for authentication purposes. 

Login.js finally looks like this:

import React,{useState} from 'react' 

const Login=()=>{ 
	const [email,setEmail]=useState(""); 
	const [passw,setPassw]=useState(""); 
	const[dataInput, setDataInput]=useState(""); 
	const submitThis=()=>{
		const info={email:email,passw:passw}; 
		setDataInput([info]);
	}
	return(
	<div>
		<form action="" onSubmit={submitThis}> 
			<div> 
				<label htmlFor="email">Email</label>
				<input type="text" name="email" id="email" value={email} onChange={(e)=>setEmail(e.target.value)}/> 
			</div> 
			<div> 
				<label htmlFor="passw">Password</label>
			<input type="text" name="passw" id="passw" value={passw} onChange={(e)=>setPassw(e.target.value)}/> 
			</div>  
			<button type="submit">Login</button>
		</form>
	</div>
)} 

You can also try this code with Online Javascript Compiler

Run Code

Check out Advantages of React JS here.

Frequently Asked Questions

What are the advantages of ReactJS over other frameworks? 

React has a modular structure. This makes it flexible and easier to maintain. Therefore, it is preferred as it saves a huge amount of time and costs. 

What are the other front-end libraries based on JavaScript? 

React-native, vue.js, and AngularJs are a few of the most popular JavaScript libraries for building the frontend.

Who maintains ReactJS? 

ReactJS is maintained by Meta along with individual developers. 

How do you maintain login in React JS?

To maintain login state in ReactJS, you can use techniques like storing authentication tokens in browser cookies or local storage, utilizing context or state management libraries like Redux, or implementing session management with server-side authentication.

How do I create a dynamic login page in React JS?

To create a dynamic login page in ReactJS, you can design a form component to collect user credentials, handle form submission with event handlers, validate input data, and interact with authentication APIs or services to authenticate users dynamically.

How do I store login state in React?

To store login state in React, you can utilize the state management capabilities provided by React itself or external libraries like Redux. Store authentication-related data such as user login status, tokens, and user information in component state or global state management stores for easy access and manipulation throughout the application.

Conclusion

In this article, we have discussed login page in React JS. Building a login page in React JS requires careful consideration of user authentication, state management, and UI design. By leveraging React's powerful features, such as component-based architecture and state management libraries, developers can create dynamic and secure login experiences tailored to their application's needs.

Do upvote our blog to help other ninjas grow. 

Happy Coding!