Create a Login and Registration Form in React JS

React JS is a popular JavaScript library for building user interfaces. In this article, we will create a simple login and registration form using React JS.

Setting up the Environment

First, make sure you have Node.js and npm installed on your system. Then, create a new React project using create-react-app:

  npx create-react-app login-registration-form
  cd login-registration-form
  npm start

Creating the Form Components

Next, let’s create the login and registration form components. Inside the src folder, create two new files: LoginForm.js and RegistrationForm.js.

LoginForm.js

  
  import React, { useState } from 'react';

  const LoginForm = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleLogin = () => {
      // Handle login logic here
    }

    return (
      <form>
        <h2>Login</h2>
        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
        <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
        <button onClick={handleLogin}>Login</button>
      </form>
    );
  }

  export default LoginForm;
  

RegistrationForm.js

  
  import React, { useState } from 'react';

  const RegistrationForm = () => {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleRegister = () => {
      // Handle registration logic here
    }

    return (
      <form>
        <h2>Register</h2>
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
        <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
        <button onClick={handleRegister}>Register</button>
      </form>
    );
  }

  export default RegistrationForm;
  

Using the Form Components

Now, let’s use these form components in our main App component:

  
  import React from 'react';
  import LoginForm from './LoginForm';
  import RegistrationForm from './RegistrationForm';

  const App = () => {
    return (
      <div>
        <LoginForm />
        <RegistrationForm />
      </div>
    );
  }

  export default App;
  

Conclusion

Congratulations! You have now created a simple login and registration form using React JS. This is just a basic example, but you can expand upon it and add other features such as form validation, authentication, and error handling.