|
Formal and informal pages can both be found on websites. A user simply must log in to access a formal page; an informal page is accessible to everyone. The user can restrict other users' access to the pages by using authentication. A React app will need to respond whenever a user attempts to visit a secret page without first logging in. The login information must be saved after successful authentication. In his article, we will talk more about the login pages in ReactJS and will create one too.
ReactJS is a well-liked and commonly used Javascript library for making user interfaces. It is maintained by Facebook as well as a few other independent programmers along with businesses. It is mostly used for the development process of the front end and is well-established in the web development sector, especially for the creation of single-page user interfaces. Because of its rapid and straightforward interactive UI elements, it is well-liked among internet and mobile app developers.
React language is a more often used name for ReactJS. Due to its many practical advantages, ReactJS is favored by a large number of Fortune 500 firms. It helps programmers create websites that could also change data without reloading the page. It may be combined with other Javascript libraries like Node JS, Angular JS, as well as Express JS.
The following two React states will be declared:
const [error_Message, setError_Message] = use_State({ });
const [is_Submitted, set_Is_Submitted] = use_State(false);
For showing the error message connected to the field name, the render_Error_Message function outputs JSX code.
const render_Error_Message = (name) =>
name === error_Messages.name && (<div class_Name="error">{error_Messages.message}</div> );
Become a React JS Certified professional by learning this HKR React JS Training !
To enable users to submit the form, we will add JSX code to an HTML form using the input type=" text" for the user name and password as well as input type="submit".
Below each form input element, we will additionally add error messages.
const render_Form = (
<div class_Name="form">
<form>
<div class_Name="input-container">
<label>Username </label>
<input type="text" name="name" required />
{render_Error_Message("name")}
</div>
<div className="input-container">
<label>Pass </label>
<input type="pass" name="passw" required />
{render_Error_Message("passw")}
</div>
<div class_Name="button-container">
<input type="submit" />
</div>
</form>
</div>
);
We need to develop a JS function for managing the submission of the form along with validations in order to add login functionality. The event.preventDefault() code avoids the default form submit action, which includes reloading the page when the function handle Submit() accesses the action object present in the form element.
const handle_Submit = (event) => {
event.prevent_Default();
};
Note: Avoid page reloading in this step
The first step in adding login features to a form is by specifying all the appropriate user information as JS constants. The subsequent actions are necessary to complete the functionality:
React JS condition rendering will be added dependent on the value of the isSubmitted state.
<div class_Name="login_form">
<div classN_ame="title">Sign In</div>
{isSubmitted ? <div>Login successful</div> : render_Form}
</div>
Want to know more about React Js,visit here React Js Tutorial !
The root elements of various components present in a ReactJS application are commonly referred to as container components. They serve as a bridge between the logic that gives the user interface its interactive and dynamic features and the standard parts that make up the user interface.
The most common function of a container component is data acquisition. Data acquisition encompasses more than just getting information from an API endpoint; it also includes the reasoning behind a React component. The procedure is finished once the logic has been applied or data has been acquired in the component. It highlights the relevant component.
Let us see a React code below to add a container:
import React, { useState } from "react";
import Form from "Form";
import Button from "React Button";
import "Login file";
export default function Login1() {
const [mail, setEmail] = useState("");
const [pass, setPass] = useState("");
function validateForm() {
return mail.length > 0 && pass.length > 0;
}
function handleSubmit(event) {
event.preventDefault();
}
return (
<div className="Login">
<Form onSubmit={handleSubmit}>
<Form.Group size="lg" controlId="email">
<Form.Label>Email</Form.Label>
<Form.Control
autoFocus
type="mail"
value={mail}
onChange={(e) => setEmail(e.target.value)}
/>
</Form.Group>
<Form.Group size="lg" controlId="pass">
<Form.Label>Pass</Form.Label>
<Form.Control
type="pass"
value={pass}
onChange={(e) => setPass(e.target.value)}
/>
</Form.Group>
<Button block size="lg" type="submit" disabled={!validateForm()}>
Login1
</Button>
</Form>
</div>
);
}
The router in React is a common routing library in React. It enables users to switch between views of various React application components, modify the web URL, and maintain UI synchronization with the URL.
<Route exact path="/login">
<Login />
</Route>
Conclusion
A website can have both formal and informal pages. Considering that a formal page requires a user login but an informal page is open to anybody, authenticating is the most essential aspect of any website. It can be intimidating to combine security concerns with user experience, but if we focus on understanding and analyzing the components when they are needed, it can be a smooth process.
Other Articles:
Batch starts on 1st Apr 2023, Weekend batch
Batch starts on 5th Apr 2023, Weekday batch
Batch starts on 9th Apr 2023, Weekend batch
Add the following to a new file called src/containers/Login. js. To save the data the user enters into the form, we use the use State hook at the beginning of the component. The use_State hook only offers a function to modify the variable's current value, which is what we want to keep inside the state.
This can be done using 2 ways:
1. Navigate component
2. Using the useNavigate() hook
With the release of Router in React 6, The Navigate component took the place of the Redirect component and functions in a manner similar to that of the former, accepting the to prop to allow you to reroute to a page, you specify.
©2023 HKR Trainings. All rights Reserved.