React JS Login Form

In this tutorial, we will learn how to create a login form in React JS. A login form is an essential feature for any web application that requires user authentication. We will be using React JS, a popular JavaScript library for building user interfaces, to create our login form.

Step 1: Set up your React project
To get started, make sure you have Node.js and npm installed on your machine. You can create a new React project by running the following command in your terminal:

npx create-react-app login-form

This will create a new directory called login-form with all the necessary files to get started with a React project.

Step 2: Create the Login component
Inside the src directory, create a new file called Login.js. This file will contain the code for our login form component.

import React, { useState } from 'react';

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    // Implement your login logic here
  };

  return (
    <div>
      <h2>Login</h2>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default Login;

In the Login component, we are using the useState hook to create two state variables, username and password, which will store the values entered by the user in the input fields. We also have a handleLogin function that will be called when the user clicks the login button.

Step 3: Add the Login component to App.js
Open the App.js file in the src directory and import the Login component. Replace the existing code with the following:

import React from 'react';
import Login from './Login';

function App() {
  return (
    <div className="App">
      <Login />
    </div>
  );
}

export default App;

This will render the Login component in the main App component when the application is loaded.

Step 4: Style the login form
You can style the login form using CSS. Create a new file called Login.css in the src directory and add the following styles:

h2 {
  text-align: center;
}

input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
}

Import the CSS file in the Login.js file:

import './Login.css';

Step 5: Implement the login logic
In the handleLogin function in the Login.js file, you can implement the login logic. For example, you can use the fetch API to make a POST request to a server with the username and password entered by the user.

const handleLogin = () => {
    fetch('http://example.com/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ username, password }),
    })
      .then((response) => {
        if (response.ok) {
          console.log('Login successful');
        } else {
          console.error('Login failed');
        }
      });
  };

Make sure to replace the URL 'http://example.com/login' with the actual URL of your login endpoint.

That’s it! You have successfully created a login form in React JS. You can now run your React application by running the following command in your terminal: