React Login Page : From Design to Functionality
Creating a login page is a fundamental task for any web application. It serves as the entry point for users to access personalized content or features. In this article, we’ll walk through designing a simple yet visually appealing login page using React. We’ll focus on creating an intuitive UI and adding functionality to validate user input. By the end, you’ll learn how to display an alert for valid or invalid user input upon clicking the submit button—all without routing or database connectivity.
Create a React Project with Vite
To create a project, follow the steps below:
Step 1: Choose your folder and run the following command:
npm create vite@latest
Step 2 : Enter the project name and package name (or simply press Enter to use defaults). Then, select a framework—React (as shown below).
Step 3 : Choose JavaScript or TypeScript as the variant
Step 4 : Once the project is created, navigate to the project folder using:
cd react-login
Then, install the necessary packages with (as below screen):
npm install
Your project is now ready to run! You can start the development server using:
npm run dev
Let’s begin designing our login component!
Open Your Project in Visual Studio Code and Follow These Steps:
Step 1: Create a folder named “pages” inside the “src” folder.
Step 2: Inside the “pages” folder, create two files: “Login.jsx” and “Login.css”.
Step 3: Write your CSS inside the Login.css file. If you’re not a designer or lack CSS knowledge, you can refer to designs from https://freefrontend.com/css-login-forms/. Select a design and copy the CSS file’s content into your Login.css.
Step 4: Open the Login.css file and rename the body class to .main-container, as our component will begin from a div, not the body.
Step 5: Copy the content of the HTML file into your Login.jsx component inside the return statement, replacing the <body> tag with a <div className=”main-container”>.
Step 6: Replace all class attributes with className in the JSX. Your component code will look like this:
import './Login.css'
export function Login() {
return (
<>
<div className="main-container">
<section className="container">
<div className="login-container">
<div className="circle circle-one"></div>
<div className="form-container">
<img src="https://raw.githubusercontent.com/hicodersofficial/glassmorphism-login-form/master/assets/illustration.png" alt="illustration" className="illustration" />
<h1 className="opacity">LOGIN</h1>
<form>
<input type="text" placeholder="USERNAME" />
<input type="password" placeholder="PASSWORD" />
<button className="opacity">SUBMIT</button>
</form>
<div className="register-forget opacity">
<a href="">REGISTER</a>
<a href="">FORGOT PASSWORD</a>
</div>
</div>
<div className="circle circle-two"></div>
</div>
<div className="theme-btn-container"></div>
</section>
</div>
</>
)
}
Step 7: Open the App.jsx file, delete the existing content, and add the following code to render the Login component.
import { Login } from "./pages/Login"
function App() {
return (
<>
<Login/>
</>
)
}
export default App
Step 8: Remove the line import ‘./index.css’ from the main.jsx file.
Step 9: Run your project using the command:
npm run dev
Now, you can see the following screen :
Congrats! Your login screen is ready. However, the functionality of the Submit button is still pending. Let’s implement it step by step:
Step 1: Open the Login.jsx file and create an object named user with email and password properties.
const [user, setUser] = useState({ email: '', password: '' })
Step 2: Write the following method, called handleLogin(), to check the credentials.
const handleLogin = async (e) => {
e.preventDefault();
//Change your credential here or fetch from server
if (user.email === "test@gmail.com" && user.password === 'test@123') {
alert("Valid User");
} else {
alert("Invalid User");
}
}
Step 3: Bind the properties to the textboxes using the value attribute and store the input data using the onChange() method, like this:
<input
type="text"
placeholder="USERNAME"
value={user.email}
onChange={(e) => setUser({ ...user, email: e.target.value })} />
<input
type="password"
placeholder="PASSWORD"
value={user.password}
onChange={(e) => setUser({ ...user, password: e.target.value })}
/>
Step 4: Bind the handleLogin() method to the Submit button using the onClick() event, like this:
<button className="opacity" onClick={(e) => handleLogin(e)}>SUBMIT</button>
Your whole component looks like this:
import React from 'react';
import './Login.css';
import { useState } from 'react';
export function Login() {
const [user, setUser] = useState({ email: '', password: '' })
const handleLogin = async (e) => {
e.preventDefault();
//Change your credential here or fetch from server
if (user.email === "test@gmail.com" && user.password === 'test@123') {
alert("Valid User");
} else {
alert("Invalid User");
}
}
return (
<>
<section className="container">
<div className="login-container">
<div className="circle circle-one"></div>
<div className="form-container">
<img src="https://raw.githubusercontent.com/hicodersofficial/glassmorphism-login-form/master/assets/illustration.png" alt="illustration" className="illustration" />
<h1 className="opacity">LOGIN</h1>
<form>
<input
type="text"
placeholder="USERNAME"
value={user.email}
onChange={(e) => setUser({ ...user, email: e.target.value })} />
<input
type="password"
placeholder="PASSWORD"
value={user.password}
onChange={(e) => setUser({ ...user, password: e.target.value })}
/>
<button className="opacity" onClick={(e) => handleLogin(e)}>SUBMIT</button>
</form>
<div className="register-forget opacity">
<a href="">REGISTER</a>
<a href="">FORGOT PASSWORD</a>
</div>
</div>
<div className="circle circle-two"></div>
</div>
<div className="theme-btn-container"></div>
</section>
</>
)
}
Now your project is complete with basic login functionality! Run it, and enter the username as “test@gmail.com“ and the password as “pass@123” to see an alert displaying “Valid User”. If you enter any other credentials, you will see an alert displaying “Invalid User”.
I hope this article helped you understand how to create a simple login page in React and implement button functionality. You can find the complete code and all necessary details in our GitHub repository: https://github.com/StudyTrigger/React-React_Login.
FAQ on Login Screen ?
How can I design a login page in React?
To design a login page in React, create a component for the login form, style it using CSS, and use input fields for the username and password. Bind them to the state to manage the form data.
What is the difference between “class” and “className” in React?
In React, you must use “className” instead of “class” to apply CSS classes to elements. This is because “class” is a reserved word in JavaScript.
How do I bind input fields to state in React??
Use the “value” attribute to bind the input fields to the component’s state and handle changes with the `onChange` event. This ensures that the form data is controlled.
How can I implement a Submit button in a React login page?
To implement a Submit button, bind an event handler (e.g., “handleLogin()”) to the button using the “onClick” event. The handler will process the form data and show an alert based on validation.
How do I handle events like “onChange” and “onClick” in React?
To handle events like “onChange” (for input fields) and “onClick” (for buttons), create functions in your component and pass them to the respective JSX elements as event handlers..
Where can I find the source code for the React login page?
The complete source code for the React login page can be found in our GitHub repository: https://github.com/StudyTrigger/React-React_Login.
