How to create react login register form step by step

📁React | 📅 January 30, 2024

Certainly! Below, I’ll guide you through creating a simple React login and register form step by step. In this example, I’ll use functional components, hooks, and state management. We’ll create separate components for login and register forms, and an App component to manage the overall application state.

Step 1: Create a new React App

If you haven’t already created a React app, you can do so using Create React App:

npx create-react-app react-login-register-form
cd react-login-register-form

Step 2: Create Login and Register components

Inside the src folder, create two new components: Login.js and Register.js.

Login.js:

// Login.js
import React, { useState } from 'react';

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

  const handleLogin = (e) => {
    e.preventDefault();
    // Here you would typically make an API call to authenticate the user
    // For simplicity, let's just log the credentials
    console.log('Login: ', { username, password });
    // You might want to reset the form or redirect the user after successful login
    onLogin();
  };

  return (
    
      Login
      
        Username:
         setUsername(e.target.value)} />
      
      

      
        Password:
         setPassword(e.target.value)} />
      
      

      
    
  );
};

export default Login;

Register.js:

// Register.js
import React, { useState } from 'react';

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

  const handleRegister = (e) => {
    e.preventDefault();
    // Here you would typically make an API call to register the user
    // For simplicity, let's just log the credentials
    console.log('Register: ', { username, password });
    // You might want to reset the form or redirect the user after successful registration
    onRegister();
  };

  return (
    
      Register
      
        Username:
         setUsername(e.target.value)} />
      
      

      
        Password:
         setPassword(e.target.value)} />
      
      

      
    
  );
};

export default Register;

Step 3: Create the App component

Now, create the main App.js component that will manage the overall application state.

App.js:

// App.js
import React, { useState } from 'react';
import Login from './Login';
import Register from './Register';

const App = () => {
  const [isLoggedIn, setLoggedIn] = useState(false);

  const handleLogin = () => {
    setLoggedIn(true);
  };

  const handleRegister = () => {
    // You might want to handle registration success in a different way
    alert('Registration successful!');
  };

  return (
    
      {isLoggedIn ? (
        Welcome! You are logged in.
      ) : (
        <>
          
          
        
      )}
    
  );
};

export default App;

Step 4: Run your React App

Now, save your files and run your React app:

npm start

Visit http://localhost:3000 in your browser, and you should see the login and register forms.

This is a basic example to help you get started. In a real-world scenario, you would need to implement proper authentication mechanisms, such as interacting with a server for login and registration, handling tokens, and ensuring secure communication.