React JS

Creating a Responsive Login Form with React

Introduction

In today creating a responsive login form is essential for providing a seamless user experience. With React, developers can create dynamic and interactive forms that adapt to different screen sizes, ensuring accessibility across devices.

Setting Up Your React Project

To begin, set up a new React project using Create React App. This tool provides a comfortable starting point, supporting all necessary packages and configurations. Once your project is ready, install any required libraries such as React Router for navigation and Formik for form handling.

Building the Responsive Login Form

Now, let’s dive into building the login form. Use a combination of controlled components and CSS for styling. In your component, include email and password fields along with a submit button. Use Flexbox or CSS Grid to ensure that the layout remains responsive, adjusting to various screen sizes.

Setting Up Your React Project

To get started, make sure you have a React project set up. You can create a new React application using Create React App by running the following command in your terminal:

npx create-react-app login

Once your project is created, navigate to the project directory:

cd login

Now, you are ready to build your responsive login form.

App.jsx

import React, { useState } from "react";

const App = () => {
  const [formData, setFormData] = useState({
    username: "",
    password: "",
    utype: "",
  });

  const [error, setError] = useState("");

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const login = () => {
    if (!formData.username || !formData.password || !formData.utype) {
      setError("All fields are required!");
      return;
    }
    setError("");
    alert("Login Successful!");
    // Implement login logic here
  };

  const reset = () => {
    setFormData({ username: "", password: "", utype: "" });
    setError("");
  };

  return (
    <div className="container" style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }}>
      <div style={{ width: "350px", backgroundColor: "#fff", padding: "20px", borderRadius: "8px", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)" }}>
        <div style={{ backgroundColor: "#FF9900", padding: "10px", textAlign: "center", borderRadius: "4px 4px 0 0", color: "#fff", fontWeight: "bold" }}>
          Login
        </div>
        <div style={{ marginTop: "10px", color: "red", fontSize: "14px" }}>{error}</div>
        <div style={{ marginTop: "10px" }}>
          <label style={{ display: "block", marginBottom: "5px", fontWeight: "bold" }}>Username</label>
          <input
            type="text"
            className="form-control"
            placeholder="Username"
            name="username"
            value={formData.username}
            onChange={handleChange}
            style={{ width: "100%", padding: "8px", border: "1px solid #ccc", borderRadius: "4px" }}
          />
        </div>
        <div style={{ marginTop: "10px" }}>
          <label style={{ display: "block", marginBottom: "5px", fontWeight: "bold" }}>Password</label>
          <input
            type="password"
            className="form-control"
            placeholder="Password"
            name="password"
            value={formData.password}
            onChange={handleChange}
            style={{ width: "100%", padding: "8px", border: "1px solid #ccc", borderRadius: "4px" }}
          />
        </div>
        <div style={{ marginTop: "10px" }}>
          <label style={{ display: "block", marginBottom: "5px", fontWeight: "bold" }}>User Type</label>
          <select
            className="form-control"
            name="utype"
            value={formData.utype}
            onChange={handleChange}
            style={{ width: "100%", padding: "8px", border: "1px solid #ccc", borderRadius: "4px" }}
          >
            <option value="">Please Select</option>
            <option value="1">Pharmacist</option>
            <option value="2">Doctor</option>
            <option value="3">Receptionist</option>
          </select>
        </div>
        <div style={{ marginTop: "20px", display: "flex", justifyContent: "right" }}>
          <button
            type="button"
            className="btn btn-primary"
            onClick={login}
            style={{ padding: "8px 12px", backgroundColor: "#007bff", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" }}
          >
            Sign In
          </button>
          &nbsp;
          <button
            type="button"
            className="btn btn-warning-mt-4"
            onClick={reset}
            style={{ padding: "8px 12px", backgroundColor: "#ffc107", color: "#000", border: "none", borderRadius: "4px", cursor: "pointer" }}
          >
            Reset
          </button>
        </div>
      </div>
    </div>
  );
};

export default App;

Paste the Bootstrap style inside head tag the index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

 

 

 

 

admin

Recent Posts

Conditional Statements in Python

Conditional statements in Python allow us to control the flow of execution based on conditions.…

14 hours ago

Java Beans

A Java Bean is a reusable software component that follows a specific set of conventions.…

6 days ago

Java String Methods

Java provides a rich set of built-in methods for handling String operations efficiently. Since strings…

6 days ago

Java Developer Jobs

Java remains one of the most in-demand programming languages worldwide, powering everything from enterprise applications…

6 days ago

Converting Integer to String in Java

Java provides multiple ways to convert an integer (int) to a string (String). Whether you're…

6 days ago

JSP to JSP Communication: A Complete Guide to Dynamic Java Web Development

Java Server Pages (JSP) is a powerful technology used to develop dynamic web applications by…

2 weeks ago