Today, we will solve a widespread problem that every react developer faces: how to make a login form in react JS. React has a different programming language where we can easily create a login form or a login page with the help hooks concept. We can also use events to run this project. So if you’re looking at how to create a react app login form, you are at the right place.
Login Form Page in React JS
React Login form is very easy to make. You need to know about little knowledge of hooks / useState / Events and rest you can make it by yourself. Refer to the following code to understand how to create a login form using react js.
Also Learn: Best React JS Project for Beginners
Lets see how to create a login form using react js:
First file index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import App from ‘./App’;
import * as serviceWorker from ‘./serviceWorker’;
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById(‘root’)
);
Second file index.css
*{
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #d2dbdd;
}
div{
width: 100%;
height: 100vh;
background-color: #9b59b6;
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
}
h1{
color: white;
background: transparent;
text-shadow: 0 2px 2px black;
}
p{
background: transparent;
font-size: 20px;
}
input{
padding:10px 20px;
border: none;
outline:none;
margin: 20px 0;
text-align: center;
}
button{
padding: 15px 20px;
background: #9b59b6;
color: white;
border: 2px solid #ecf0f1;
outline: none;
border-radius: 5px;
text-transform: uppercase;
cursor: pointer;
}
Third file is App.js
import React, { useState } from ‘react’;
const App=() =>{
const [fullName, setfullName] = useState({
fname : “”,
lname : “”,
email : “”,
phone : “”,
});
const inputEvent =(event) => {
console.log(event.target.value);
console.log(event.target.name);
const {value, name} = event.target;
setfullName((preValue) => {
console.log(preValue);
return{
…preValue,
[name]:value,
}
});
};
const onsubmit =(event) =>{
event.preventDefault(); //IF YOU WANT THE FORM TO START RELOAD COMMENT THIS LINE
alert(“form submit”)
};
return(
<>
<div className=”main_div”>
<form onSubmit={onsubmit}>
<div>
<h1>HELLO{fullName.fname}{fullName.lname}</h1>
<p>{fullName.email}</p>
<p>{fullName.phone}</p>
<input type=’text’
placeholder=’Enter Your Name’
name=”fname”
onChange={inputEvent}
value={fullName.fname}
/>
<input type=’text’
placeholder=’Enter Your Password’
name=”lname”
onChange={inputEvent}
value={fullName.lname}
/>
<input type=’email’
placeholder=’Enter Your Email ID’
name=”email”
onChange={inputEvent}
value={fullName.email}
/>
<input type=’number’
placeholder=’Enter Your Mobile Number’
name=”phone”
onChange={inputEvent}
value={fullName.phone}
/>
<button type=”submit”>Login 👍</button>
</div>
</form>
</div>
</>
);
};
export default App;
I hope this code will help you to create a perfect login form using React JS. Info At One is trying to serve you more information and ideal code to develop more projects in React JS.