Introduction :-
React is a Javascript Framework to further explain it here is an Example :-

●   React is a JavaScript framework that helps you build websites and apps, similar to how
you play with building blocks. Imagine having small blocks that each do something
special, like showing a picture or creating a button. When you connect these blocks, you
can build a complete website or app that people can use. React makes building things
on the internet easy and fun, just like playing with blocks!

 

Steps :-
1. Installation of react
●  Install Node from Node.org
- Why Node ?
Node Provides us with NPM and NPX libraries/function which is
crucial for installing react app.

●  Creating New App using React :-
Go to where you want to install React app through “cd..” and type in
terminal :-

“npx create-react-app name”

Note :- Remove double quotes also Replace "name" with your project's
name.
Hence You have Sucessfully installed libraries as well as Successfully
created First React Application.

2. Sample Login page :-
● Open Coding Platform Like “Visual Studio code”
● There You will Find Various Folder’s and Files.

3. Goto folder named “src” :-
● Open file “App.js” or You can even create a new file named “_“

4. Building Simple Login Page :-
Goto App.js
Full Code :-

import React, { useState}
from 'react';
import './Login.css';
import Call from './Call.jsx';
function App() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [isLoggedIn, setIsLoggedIn] = useState(false);
const handleSubmit = (e) => {
e.preventDefault();
const value1 = "Demo";
const value2 = "1234";
if (email === value1 && password === value2) {
alert("You have Loged In");
} else {
alert("Incorrect Email or Password");
}
}
<div className='main'>
{isLoggedIn ? (
<Call />
) : (
<form onSubmit={handleSubmit}>
<div className='submain'>
<div className='col-1'>
<label>Email</label>
<input
type='text'
value={email}
placeholder='Type Your Email'
onChange={e =>
setEmail(e.target.value)}
/>
</div>
<div className='col-2'>
<label>Password</label>
<input
type='password'
value={password}
placeholder='Type Your
Password' onChange={e => setPassword(e.target.value)}/>
</div>
<button type='submit'>Submit</button>
</div>
</form>
)}
</div>
);
}
export default App;

 

Code Explanation :=> 

❖ Import Statements:

import React, { useState} from 'react';
import Call from './Call.jsx';

● React: This is the main library that lets you use React in your project.
● { useState }: This is a special tool (or "hook") from React that lets you add state to your functional components.
● Call: This is the Function we have created to Redirect to specific path given as “./Call.jsx” 

 

❖Login Function:

function App() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [isLoggedIn, setIsLoggedIn] = useState(false);

This is a function component in React, which is like a small building
block of your app. It’s responsible for rendering (showing) the login
form and handling user input.
useState Hook:
●  Email and password: These are variables that store the
current values of the email and password fields.
●  setEmail and setPassword: These are functions used to
update the values of email and password when the user
types something.
●  It as well is used for conditioning Calling of Another page
defined using “LoggedIn”. 

 

handleSubmit Function:
This function is triggered when the user submits the form by
clicking the "Submit" button.

const handleSubmit = (e) => {
e.preventDefault();

e.preventDefault():
This line stops the form from doing its default action, which is
refreshing the page when submitted. This allows us to handle the
login logic without losing what the user typed. 

 

Predefined Values:

const value1 = "Demo";
const value2 = "1234";

●  value1: This is the predefined email (in this case, "Demo").
●  value2: This is the predefined password (in this case, "1234").

These values are used to check if the user’s input matches what’s expected for a successful
login. 

 

Conditional Logic:

if (email === value1 && password === value2) {
alert("You have Logged In");
} else {
alert("Incorrect Email or Password");
}

● If Statement:
This checks if the email and password entered by the user match the predefined
values (value1 and value2).
● alert:
This is a simple pop-up message that tells the user whether they have logged in
successfully or entered incorrect information.

 

#Return Explanation:-

<div className='main'>
{isLoggedIn ? (
<Call />
) : (
<form onSubmit={handleSubmit}>
<div className='submain'>
<div className='col-1'>
<label>Email</label>
<input
type='text'
value={email}
placeholder='Type Your Email'
onChange={e => setEmail(e.target.value)} />
</div>
<div className='col-2'>
<label>Password</label>
<input
type='password'
value={password}
placeholder='Type Your Password'
onChange={e => setPassword(e.target.value)} />
</div>
<button type='submit'>Submit</button>
</div>
</form>
)}
</div>
);
}
<button type='submit'>Submit</button>
</div>
</form>
</div>
);
}

 

Return Statement:
This is what the Login component shows on the screen. It’s a piece of UI (User Interface)
that users will interact with.
<div className='main'>:
This is a container (like a box) that holds all the content of the login form.
<form onSubmit={handleSubmit}>:
The form element wraps the input fields and submit button. The onSubmit attribute is
where we attach our handleSubmit function to handle what happens when the form is
submitted.
Input Fields (<input>):

● Email Field:
○ type='text': Specifies that this field is for text input.
○ value={email}: Links the field to the email state variable.
onChange={e => { setEmail(e.target.value) }}: Updates the email
state variable whenever the user types something.

● Password Field:
○ type='password': Specifies that this field is for password input (the
characters are hidden).
○ value={password}: Links the field to the password state variable.
○ onChange={e => { setPassword(e.target.value) }}: Updates the
password state variable whenever the user types something. 

<button type='submit'>:
This button submits the form. When clicked, it triggers the handleSubmit function.

#Usage of

{isLoggedIn ? (
<Call />
) :

 

● Conditional Rendering:
○ This code snippet demonstrates conditional rendering in React.
Conditional rendering allows components to be rendered or not rendered
based on certain conditions. It’s a key feature in building dynamic user
interfaces.

● Ternary Operator:

○ The conditional rendering here is done using the ternary operator:
condition ? expr1 : expr2.
○ If the condition (isLoggedIn) evaluates to true, the expression before the
colon (<Call />) is executed. Otherwise, the expression after the colon
(whatever content you place there) is executed.

● Rendering the Call Component:
○ In this context, if isLoggedIn is true, the Call component is rendered,
which is indicated by <Call />.
○ If isLoggedIn is false, the code inside the else part (after the colon :)
will run, typically rendering something else, like the login form.

 

Usage in Context:
● isLoggedIn State:
   ○ The isLoggedIn state is a boolean value that tracks whether the user has
       successfully logged in.
   ○ Initially, isLoggedIn is set to false, so the login form is displayed.
   ○ After a successful login, isLoggedIn is set to true, causing React to
       render the Call component instead of the login form.

 

 export default:

export default Login;

  This line makes the Login function available to be imported and used in other files of
  your React app.
  Summary
● Function Components:
   Small building blocks in React that render (show) content and handle user
   interactions.
● useState:
  Allows you to keep track of changes in your form fields (like email and password).
● Forms:
Allow users to input data, which can be submitted and processed by the app.
● Conditional Logic:
Determines the outcome based on user input (e.g., whether login is successful or
not).

5. Check Directory :-
Press :- ctrl + shift + ` to open Terminal in VS code
Redirect To your Application Path Example :-
“user/Documents/___ “ using cd

6. Running Application on LocalHost :-
Type “npm start” to run you application on localhost:3000

 

To Check :-

Goto "Localhost:3000".

 

Conclusion

And that's it! You’ve successfully set up a login sample page using React. You can now build upon this foundation to create secure, user-friendly authentication systems within your React applications. Whether you’re developing a simple project or scaling to a larger application, this setup equips you with the tools to manage user access effectively and efficiently.