React JS Login & Sign Up Form Tutorial for Beginners

In this beginner-friendly tutorial, we will build a simple Login and Sign Up system UI using React JS and Tailwind CSS. You will learn how to create separate components, manage form data with React state, handle form submission, and connect Login and Sign Up pages.

React applications are built from reusable components. A component can represent a small UI element or an entire page. JSX allows us to write HTML-like markup inside JavaScript.

What We Will Build

Our project will contain two separate pages:

1. Login Page
2. Sign Up Page

The Login page will contain an email field, password field, and Login button. The Sign Up page will contain name, email, password, and confirm password fields.

Prerequisites

Before starting this project, beginners should have a basic understanding of:

1. HTML
2. CSS
3. JavaScript
4. Basic React components
5. Basic Tailwind CSS

Project Structure

src/
├── Pages/
│   ├── Login.jsx
│   └── Signup.jsx
│
├── App.jsx
├── main.jsx
└── style.css

We keep Login and Sign Up as separate React components. React supports creating components as JavaScript functions and importing them into other components.

Step 1: Create the Login Component

Create a Login.jsx file inside the Pages folder.

import { useState } from "react";

const Login = () => {

  const [formData, setFormData] = useState({
    email: "",
    password: "",
  });

  const handleChange = (e) => {
    const { name, value } = e.target;

    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    console.log(formData);
  };

  return (
    <div>
      <h1>Welcome Back</h1>

      <p>Login to your account</p>

      <form onSubmit={handleSubmit}>

        <label htmlFor="email">Email</label>

        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
          placeholder="Enter your email"
          required
        />

        <label htmlFor="password">Password</label>

        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
          placeholder="Enter your password"
          required
        />

        <button type="submit">Login</button>

      </form>
    </div>
  );
};

export default Login;

Understanding useState

Here we use useState to store the values entered by the user. React state is used for data that changes over time and can cause the UI to update.

const [formData, setFormData] = useState({
  email: "",
  password: "",
});

The formData object stores the current input values, while setFormData updates those values.

Step 2: Handle Input Changes

Whenever the user types something into an input, the onChange event calls our handleChange function.

const handleChange = (e) => {
  const { name, value } = e.target;

  setFormData({
    ...formData,
    [name]: value,
  });
};

This allows each input to update the correct property inside the formData object.

Step 3: Handle Login Submission

We use onSubmit on the form to handle the submit event. Calling e.preventDefault() prevents the browser from performing its normal form submission and refreshing the page.

const handleSubmit = (e) => {
  e.preventDefault();

  console.log(formData);
};

For a real application, this is where you would normally send the form data to a backend authentication API. This tutorial focuses on the React frontend.

Step 4: Create the Sign Up Component

Now create Signup.jsx inside the Pages folder.

import { useState } from "react";

const Signup = () => {

  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
  });

  const handleChange = (e) => {
    const { name, value } = e.target;

    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    console.log(formData);
  };

  return (
    <div>

      <h1>Create Account</h1>

      <p>Join us and get started</p>

      <form onSubmit={handleSubmit}>

        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
          placeholder="Full Name"
          required
        />

        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
          placeholder="Email"
          required
        />

        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
          placeholder="Password"
          required
        />

        <input
          type="password"
          name="confirmPassword"
          value={formData.confirmPassword}
          onChange={handleChange}
          placeholder="Confirm Password"
          required
        />

        <button type="submit">
          Create Account
        </button>

      </form>

    </div>
  );
};

export default Signup;

Step 5: Connect the Components

Import both components into App.jsx:

import Login from "./Pages/Login";
import Signup from "./Pages/Signup";

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

export default App;

React components can be combined and nested to build larger screens and applications.

Step 6: Add Tailwind CSS

Once the basic React functionality works, Tailwind CSS classes can be added to style the Login and Sign Up forms.

<div className="min-h-screen flex items-center justify-center bg-gray-100">

  <div className="w-full max-w-md rounded-2xl bg-white p-8 shadow-lg">

    <h1 className="text-3xl font-bold text-gray-800">
      Welcome Back
    </h1>

  </div>

</div>

In JSX, React uses className instead of the HTML class attribute.

Login and Sign Up Navigation

If you want Login and Sign Up to be separate URLs such as /login and /signup, React Router can be added later.

1. Create the Login page.
2. Create the Sign Up page.
3. Create routes for both pages.
4. Add navigation links between them.

This keeps the two forms as separate pages instead of rendering both forms at the same time.

What Beginners Learn From This Project

1. React functional components
2. JSX syntax
3. useState
4. Controlled form inputs
5. onChange events
6. onSubmit events
7. Form data handling
8. Component importing and exporting
9. Tailwind CSS styling
10. Basic page navigation

GitHub Source Code

You can add your complete source code here:

GitHub:
https://github.com/DaudBD/Login-Signup-React-Tailwind-JS-HTML-Project

Conclusion

This Login and Sign Up project is a good beginner React exercise because it combines JSX, components, state, events, forms, and styling in one small project. Once you understand this project, you can extend it with validation, React Router, API integration, and a backend authentication system.

Tip for beginners: Don't just copy the code. Try rebuilding the Login and Sign Up forms yourself and change the design, fields, and layout. That practice will help you understand React much faster.

Reference: The official React documentation explains components, JSX, state, events, and form handling in detail.