In this tutorial, we are going to learn simple login and registration form in React js. After registration, we save the data to the database. We will use React hooks, bootstrap,…..
Here is the image, what we will build at the registration form in ReactJS example.
Go to bootstrap for registration form in ReactJS, and copy the css and add to the index.html in head.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
We can also select the form from the bootstrap and add to the code.
Add the following code to the Register.js file.
<h2>Register</h2>
<form>
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label">Full Name</label>
<input type="text" className="form-control" onChange={(e)=>setName(e.target.value)} />
</div>
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label">Email address</label>
<input type="email" className="form-control" onChange={(e)=>setEmail(e.target.value)} />
</div>
<div className="mb-3">
<label htmlFor="exampleInputPassword1" className="form-label">Password</label>
<input type="password" className="form-control" onChange={(e)=>setPassword(e.target.value)}/>
</div>
<button type="submit" className="btn btn-primary" onClick={handleSubmit}>Submit</button>
<div><p>Already, have an account<Link to="/login" > Login </Link> </p></div>
</form>
When a user enters the details in form, we use “useState” to store the data.
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
We will make an onChange function in <input/> and pass the setName, setEmail and setPassword. So, whatever we pass the data in the function will store in useState. The data will be stored in name, email and password. This ReactJS login and registration example will help you understand it better.
In the input field, the value entered by the user will be set in setName, setEmail and setPassword. Whatever we pass from the function setName, setEmail and setPassword will be saved into name, email and password in useState.
Now, to submit the form, we will make a function on the submit button. Take a “onClick” function.
Read this function and also, we will write the logic here. We will use “axios” to post the data. It accepts some parameters like url, method, header and data.
To use the “axios”, first we have to install its library using the command -
npm install axios
We are registering, so we will take the post method, we have added a post url and will also accept some data and will store it in the object form.
const history = useNavigate();
const handleSubmit = (e)=>{
e.preventDefault();
axios.post(
'https://localhost:44395/api/Customer/RegisterCustomer',
{name:name , email: email , password:password,header}
)
};
Here, we have the full code.
import React , {useState} from 'react'
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import { Link } from 'react-router-dom';
const Register = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const history = useNavigate();
const handleSubmit = (e)=>{
e.preventDefault();
axios.post(
'https://localhost:44395/api/Customer/RegisterCustomer',
{name:name , email: email , password:password,header}
)
};
return (
<>
<h2>Register</h2>
<form>
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label">Full Name</label>
<input type="text" className="form-control" onChange={(e)=>setName(e.target.value)} />
</div>
<div className="mb-3">
<label htmlFor="exampleInputEmail1" className="form-label">Email address</label>
<input type="email" className="form-control" onChange={(e)=>setEmail(e.target.value)} />
</div>
<div className="mb-3">
<label htmlFor="exampleInputPassword1" className="form-label">Password</label>
<input type="password" className="form-control" onChange={(e)=>setPassword(e.target.value)}/>
</div>
<button type="submit" className="btn btn-primary" onClick={handleSubmit}>Submit</button>
<div><p>Already, have an account<Link to="/login" > Login </Link> </p></div>
</form>
</>
)
}
export default Register
This simple signup form in ReactJS will help you create a registration form.
