Creating a Login and Registration Form with React JS: Sign In and Sign Up Page

Creating a login and registration form using React JS is a common task for many web developers. In this tutorial, I will guide you through the process of setting up a simple sign-in and sign-up page using React JS.

Step 1: Setting up the Environment
Before we start coding, make sure you have Node.js and npm installed on your system. You can check if Node.js is installed by running the following command in your terminal:

node -v
npm -v

If Node.js is not installed, you can download and install it from the official website. Once Node.js is installed, you can create a new React project using the Create React App tool. Run the following command in your terminal to create a new React project:

npx create-react-app react-auth
cd react-auth

Step 2: Creating the Components
Now that we have set up our project, let’s create the components for our login and registration forms. Inside the src folder, create two new files: Login.js and Register.js. These files will contain the code for our login and registration forms, respectively.

Open Login.js and add the following code to create a simple login form:

import React from 'react';

function Login() {
  return (
    <div>
      <h2>Login</h2>
      <form>
        <input type="email" placeholder="Email" />
        <input type="password" placeholder="Password" />
        <button type="submit">Login</button>
      </form>
    </div>
  );
}

export default Login;

Next, open Register.js and add the following code to create a simple registration form:

import React from 'react';

function Register() {
  return (
    <div>
      <h2>Register</h2>
      <form>
        <input type="text" placeholder="Full Name" />
        <input type="email" placeholder="Email" />
        <input type="password" placeholder="Password" />
        <button type="submit">Register</button>
      </form>
    </div>
  );
}

export default Register;

Step 3: Routing
Now that we have created the components for our login and registration forms, we need to set up the routing in our React app. Open the App.js file in the src folder and update it with the following code:

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Login from './Login';
import Register from './Register';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/register" component={Register} />
      </Switch>
    </Router>
  );
}

export default App;

Step 4: Styling the Forms
To make our login and registration forms look more visually appealing, we can add some CSS styles. Create a new CSS file called styles.css in the src folder and add the following CSS code:

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

input {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

Step 5: Running the Application
Now that we have completed all the steps, we can run our React application to see the login and registration forms in action. Open your terminal and run the following command:

npm start

This will start the development server and open your web browser to display the React app. You should see two links in the navigation bar: Login and Register. Click on the links to navigate to the login and registration forms.

In this tutorial, we have covered the basics of creating a simple login and registration form using React JS. You can further customize and enhance the forms by adding validation, error handling, and authentication functionality. With React’s flexibility and powerful features, you can build more complex and sophisticated authentication systems for your web applications.