Creating a Sign In and Sign Up Form with React JS: A Guide to ReactJS Login and Registration Form

Creating a sign in and sign up form using React JS is a common task in web development. In this tutorial, we will walk through the process of creating a login and registration form using ReactJS. We will create two separate components for the sign in and sign up forms and use state management to handle user input and form submission.

Step 1: Setting up the React App

First, make sure you have Node.js installed on your machine. We will be using the create-react-app tool to bootstrap our project. Open a terminal window and run the following command:

npx create-react-app react-login

This will create a new React project called ‘react-login’. Once the project is created, navigate to the project directory by running:

cd react-login

Step 2: Create the Sign In Component

Inside the src/components folder, create a new file called SignIn.js. In this file, we will create a functional component for the sign in form. Here is the initial code for the SignIn component:

import React, { useState } from 'react';

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

  const handleSubmit = (e) => {
    e.preventDefault();
    // Add your logic for signing in here
  };

  return (
    <div>
      <h2>Sign In</h2>
      <form onSubmit={handleSubmit}>
        <input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
        <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
        <button type="submit">Sign In</button>
      </form>
    </div>
  );
};

export default SignIn;

In this component, we are using the useState hook to create state variables for the email and password inputs. We are also handling form submission with the handleSubmit function.

Step 3: Create the Sign Up Component

Now, create a new file called SignUp.js inside the src/components folder. This file will contain the functional component for the sign up form. Here is the initial code for the SignUp component:

import React, { useState } from 'react';

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

  const handleSubmit = (e) => {
    e.preventDefault();
    // Add your logic for signing up here
  };

  return (
    <div>
      <h2>Sign Up</h2>
      <form onSubmit={handleSubmit}>
        <input type="text" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
        <input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
        <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
        <button type="submit">Sign Up</button>
      </form>
    </div>
  );
};

export default SignUp;

Just like the SignIn component, the SignUp component uses the useState hook to create state variables for the name, email, and password inputs. We are also handling form submission with the handleSubmit function.

Step 4: Create the Main App Component

Now, open the App.js file inside the src folder and update it with the following code:

import React from 'react';
import './App.css';
import SignIn from './components/SignIn';
import SignUp from './components/SignUp';

const App = () => {
  return (
    <div className="App">
      <SignIn />
      <SignUp />
    </div>
  );
};

export default App;

In this file, we are importing the SignIn and SignUp components and rendering them inside the main App component.

Step 5: Styling the Forms

To style the sign in and sign up forms, open the App.css file inside the src folder and add the following CSS:

.App {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

form {
  display: flex;
  flex-direction: column;
  margin: 20px;
}

input {
  margin: 5px 0;
  padding: 5px;
}

This CSS will center the forms on the page and add some basic styling to the input fields.

Step 6: Running the App

To run the React app, go back to the terminal and run the following command:

npm start

This will start the development server and open the app in your default web browser. You should now see the sign in and sign up forms on the page. You can test the forms by entering your information and clicking the sign in or sign up buttons.

Congratulations! You have successfully created a sign in and sign up form using React JS. Feel free to customize the forms further by adding validation, error handling, or other features to meet your project requirements.