How to develop a user registration form in ReactJS

The form is typically defined within the form tag in traditional HTML code and ReactJS. It can exhibit the typical form submission behavior that redirects to a new page, but utilizing React components allows for a more effective use of React's capabilities.

Prerequisites:

• NPM & Node.js
• React JS
• HTML Forms
• React Hooks

To create a User Registration Form in React JS, we will utilize HTML form and input tags to collect user input. The input values will be stored using the useState Hook variables with the onChange method. Additionally, we'll implement input field validations when the form is submitted using a Submit button. Lastly, we'll 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 

npx create-react-app myreactapp

Step 2: Change your directory and enter your main folder.

cd myreactapp

Example: This example demonstrates a simple registration form with name, email, and password input fields using HTML Form and HTML Input and manipulates the state using useState Hook.

App.js 

import Form from "./Form"

function App() { 
	return ( 
		<div className="App"> 
			<Form /> 
		</div> 

	); 
} 

export default App;

// Filename - Form.js 

// 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> 
	); 
} 

/* Filename: App.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; 
}

Steps to Run the Application: Run the application using the following command:

npm start

Output: This output is visible on the http://localhost:3000/ on the browser window.