How to Develop User Registration Form in React JS ?
Last Updated :
09 Jan, 2025
The Form is usually defined inside the <form> tag in conventional HTML code and also in ReactJS. It can have the usual form submission behavior that can take it to a new page but that will not make use of React's full potential, instead, as we all know it is done using React components.
Prerequisites:
Approach:
To Develop a User Registration Form in React JS, we will use the HTML form and input tags to get the user input. Store these values with the onChange method in the useState Hook variables. Add the validations for input fields when the form is submitted using the Submit button. Style the Registration form using CSS classes and properties.
handleChange = () => {
function logic ....
};
.
.
.
<form>
<input value={name} onChange={handleChange}/>
</form>Steps to create the React application:
Step 1: Create React Project
npm create-react-app myreactapp
Step 2: Change your directory and enter your main folder.
cd myreactapp
Project Structure:
Project StructureExample: This example demonstrates a simple registration form with name, email and password input fields using HTML Form and HTML Input and manipulate the state using useState Hook.
CSS
/* Filename: App.css */
.App {
text-align: center;
background-color: green;
}
.label {
display: block;
font-size: larger;
color: white;
padding: 5px;
}
.input {
font-size: larger;
padding: 5px;
margin: 2px;
}
.btn {
color: white;
background-color: red;
border-radius: 5px;
font-size: larger;
display: block;
padding: 5px;
margin: 10px auto;
}
.messages {
display: flex;
justify-content: center;
}
.error {
display: block;
background-color: red;
color: white;
width: fit-content;
height: 50px;
padding: 5px;
}
.success {
display: block;
background-color: lightblue;
color: black;
width: fit-content;
height: 50px;
padding: 5px;
}
// Filename - App.js
'./App.css';
import Form from "./Form"
function App() {
return (
<div className="App">
<Form />
</div>
);
}
export default App;
// Filename - Form.js
import { useState } from "react";
export default function Form() {
// States for registration
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
// States for checking the errors
const [submitted, setSubmitted] = useState(false);
const [error, setError] = useState(false);
// Handling the name change
const handleName = (e) => {
setName(e.target.value);
setSubmitted(false);
};
// Handling the email change
const handleEmail = (e) => {
setEmail(e.target.value);
setSubmitted(false);
};
// Handling the password change
const handlePassword = (e) => {
setPassword(e.target.value);
setSubmitted(false);
};
// Handling the form submission
const handleSubmit = (e) => {
e.preventDefault();
if (name === "" || email === "" || password === "") {
setError(true);
} else {
setSubmitted(true);
setError(false);
}
};
// Showing success message
const successMessage = () => {
return (
<div
className="success"
style={{
display: submitted ? "" : "none",
}}
>
<h1>User {name} successfully registered!!</h1>
</div>
);
};
// Showing error message if error is true
const errorMessage = () => {
return (
<div
className="error"
style={{
display: error ? "" : "none",
}}
>
<h1>Please enter all the fields</h1>
</div>
);
};
return (
<div className="form">
<div>
<h1>User Registration</h1>
</div>
{/* Calling to the methods */}
<div className="messages">
{errorMessage()}
{successMessage()}
</div>
<form>
{/* Labels and inputs for form data */}
<label className="label">Name</label>
<input
onChange={handleName}
className="input"
value={name}
type="text"
/>
<label className="label">Email</label>
<input
onChange={handleEmail}
className="input"
value={email}
type="email"
/>
<label className="label">Password</label>
<input
onChange={handlePassword}
className="input"
value={password}
type="password"
/>
<button onClick={handleSubmit} className="btn" type="submit">
Submit
</button>
</form>
</div>
);
}
Steps to Run the Applicaiton: Run the application using the following command:
npm start
Output: This output is visible on the http://localhost:3000/ on the browser window.
Similar Reads
Basic Registration and Login Form Using React Hook Form In ReactJS, creating a form can be a nightmare as it involves handling and validating inputs. React-hook-form is a ReactJS library that simplifies the process of creating forms.The library provides all the features that a modern form needs. It is simple, fast, and offers isolated re-renders for elem
5 min read
How to Implement Email Registration and Login using Firebase in React? Implementing Email Registration and Login using Firebase in React allows us to authenticate the users securely. Firebase provides predefined ways to register users and handle authentication. Firebase offers multiple authentication methods like Email-Password, Google, Facebook, etc.ApproachTo impleme
4 min read
How to use events in ReactJS ? Modern webpages rely on user interactions, triggering events like clicks or keypresses. React facilitates event handling with built-in methods, allowing developers to create listeners for dynamic interfaces and responses. JavaScript events, inherent to the DOM, use bubbling propagation by default, m
2 min read
How to use Firestore Database in ReactJS ? Firebase is a comprehensive backend solution offered by Google that simplifies the process of building, managing, and growing applications. When developing mobile or web apps, handling the database, hosting, and authentication can be challenging tasks. Firebase addresses these challenges by providin
9 min read
How to Add Form Validation In Next.js ? Forms play a crucial role in modern web applications by ensuring the accuracy and validity of data. NeÂxt.js, a versatile framework for building ReÂact applications, offers form validation that helps verify useÂr input against predefined criteÂria, provides immediate feedback, and enhances data qual
3 min read