Build a Simple Signup Form in React.js : Step-by-Step Tutorial

Building a signup form in React.js is a great way to get familiar with component-based architecture, form handling, and state management. In this tutorial, we will walk through creating a simple yet functional signup form that handles user input and displays the form data upon submission.

Prerequisites:

To follow along, you should have:

• Basic understanding of JavaScript and React.js
• Node.js and npm installed

Project Setup:

First, let’s set up a new React project using create-react-app:

npx create-react-app signup-form
cd signup-form
npm start

This will create a new React application and launch it at http://localhost:3000.

Creating the Signup Form Component

Next, create a new component called SignupForm.js inside the src folder:

import React, { useState } from 'react';

const SignupForm = () => {
  // State to hold form data
  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: '',
  });

  // Handle input change
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  // Handle form submission
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form Data Submitted:', formData);
  };

  return (
    <form onSubmit={handleSubmit} className="signup-form">
      <div>
        <label>Username:</label>
        <input type="text" name="username" value={formData.username} onChange={handleChange} />
      </div>
      <div>
        <label>Email:</label>
        <input type="email" name="email" value={formData.email} onChange={handleChange} />
      </div>
      <div>
        <label>Password:</label>
        <input type="password" name="password" value={formData.password} onChange={handleChange} />
      </div>
      <button type="submit">Sign Up</button>
    </form>
  );
};

export default SignupForm;

Styling the Form

You can now add some basic CSS to make the form look nicer. Create a SignupForm.css file and link it to your component:

.signup-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.signup-form div {
  margin-bottom: 15px;
}

.signup-form label {
  display: block;
  margin-bottom: 5px;
}

.signup-form input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.signup-form button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

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

Import it in your component:

import './SignupForm.css';

Running the Application

To view the form, open App.js and render the component:

import SignupForm from './SignupForm';

function App() {
  return (
    <div className="App">
      <h2>Signup Form</h2>
      <SignupForm />
    </div>
  );
}

export default App;

Now, if you navigate to http://localhost:3000, you should see your signup form ready to take input.

Next Steps

You can extend this form by:

• Adding validation for each field
• Connecting it to an API to submit data to a backend
• Adding more fields like phone number or address

This is a solid starting point to understand how React components handle form state and user inputs. In the next tutorial, we’ll look at form validation with libraries like Formik or React Hook Form to make your forms even more robust.