React JS

 React.js is a powerful JavaScript library developed by

Facebook, primarily used for creating user interfaces (UIs). It
allows developers to build interactive and dynamic web
applications efficiently.
 The term UI refers to what users see on their screens when
they interact with a web application. React focuses on
simplifying the development of these interfaces.
 A library like React provides specific functionalities that
developers can use to build applications. It is lightweight and
designed to support particular tasks, such as rendering
components.
 A Framework is a more comprehensive solution that
encompasses various libraries and tools for developing an
entire application. Frameworks tend to be heavier and
provide more structure.
Internet have many computers out of them some computers are
servers (servers are machines) which have backend and frontend codes.
Frontend executes in our browser (screen) means if we open
www.amazon.com in our browser this means we are sending request to
this particular address to get any information from this web page or
application available on this address.

HTML page displays structure of browser means components

available in browser. Components are <p>,<h1>….<h6>,etc.

CSS (Cascading Style Sheet) styles your page. It used to add or

change any response or look of any tag and to perform dynamic situation
on any tag or field.

Page | 1
 React JS

Multi-Page Applications (MPA) and Single-Page Applications (SPA)

represent two distinct approaches to web application development, each
with its own characteristics, advantages, and use cases.

MPA (Multi Pages Application) :-

In a Multi-Page Application, every page is a separate entity that the
server generates and sends to the browser. When users click on links or
buttons (e.g., navigating to a contact or product page), the browser
requests a new page from the server, which results in a full-page reload.
This means that the URL in the browser updates accordingly
(e.g., http://www.amazon.com/contact or http://www.amazon.com/product)
with each interaction.

Key Features of MPAs:

 Multiple Pages: Each page is loaded independently, making it
easier to manage content-heavy sites.
 Server-Side Rendering: The server is responsible for
generating and delivering new pages, which can be beneficial
for SEO.
 Structured Navigation: Users can navigate through distinct
pages, which can be helpful for organizing complex
information.

Advantages of MPAs:
 SEO-Friendly: Each page has its own URL, making it easier for
search engines to index content.
 Scalability: MPAs can handle large amounts of content across
multiple pages without performance degradation.
 Simplicity: Ideal for simpler websites or those that do not
require dynamic interactions.

Disadvantages of MPAs:
 Slower User Experience: Full-page reloads can lead to slower
navigation and a less seamless experience.
 Increased Server Load: Each interaction requires
communication with the server, which can increase load times
Page | 2
 React JS

and server demands.

SPA (Single Page Application) :-

In contrast, Single-Page Applications load a single HTML page and
dynamically update content using JavaScript. SPAs do not require full-page
reloads; instead, they fetch data from the server as needed and update the
existing page. This approach allows for smoother transitions and faster
interactions.

Key Features of SPAs:

 Dynamic Content Loading: Content is loaded dynamically without
refreshing the entire page.
 Client-Side Rendering: Most of the rendering work is done in the
browser using JavaScript.
 Single URL: SPAs typically operate under a single URL, enhancing
user experience by avoiding multiple page loads.

Advantages of SPAs:
 Faster Interactions: After the initial load, SPAs provide quick
responses to user actions since only data is transmitted between the
client and server.
 Improved User Experience: The seamless transitions between
different views create a more app-like experience.
 Offline Capabilities: Many SPAs can cache data for offline use,
allowing users to interact with the application even without an internet
connection.

Disadvantages of SPAs:
 Initial Load Time: The first load may take longer as all necessary
resources must be fetched upfront.
 SEO Challenges: SPAs can be less SEO-friendly since content is
often loaded dynamically after the initial page load.

Page | 3
 React JS

When your page is loaded in your browser than it start filling (displaying)
this process is known as Runtime.

React is a JavaScript library for rendering user interface (UI).

 Rendering in React is the process of converting code into a
visual representation that users can see on their screens.
React excels in rendering by using a virtual DOM, which
optimizes performance by minimizing direct interactions with
the actual DOM.
Example :=
1. Start your visual studio code (vs code).
2. Create new folder (rjs).
3. Copy rjs and paste in vs code.
4. Download Node js.
5. After installation open vs code
6. Click … -> Terminal -> New Terminal
7. Write cmds in your terminal

 node –v :- displays your node js version.

Figure 1

Here, we use 1 tool “vite”. Vite requires Node.js version 18+

or 20+ .
 npm create vite@latest :-

Figure 2

Here, vite-project is the name of your project. You can

change this name.
Page | 4
 React JS

Figure 3

Here, name of my folder is new1. Click enter, then you get

the list of frameworks and you have to select it with the help
of your arrow keys and enter.

Figure 4

Here, you get the list of variants, same as above select

simple javaScript. Then your project is done and a folder is
displayed in your vs code.

Figure 5

 Now run the given cmd in your terminal.

 cd new1 change your directory to your folder.
 npm install is use to get or download
package.json for some dependencies.

Page | 5
 React JS

Figure 6

 npm run dev gives you your project run path where u
can run your project.

Figure 7

Every time you have to type npm run dev cmd to

get your port number and it must be in your project
folder. If you run your 2 projects in same port
number then it displays error.

 React is built using JavaScript, a widely-used programming language

for web development. By leveraging JavaScript, React enables
developers to create applications more efficiently and quickly.
 React.js is an essential tool for modern web development,
enabling developers to create fast, efficient, and dynamic
user interfaces through its component-based architecture
and optimized rendering processes.
Jsx = JavaScript xml

Page | 6
 React JS

Advantages of Using React.js

1. Efficient Development:- React's component-based
architecture allows for faster development cycles through
reusability.
2. Improved Performance:- The virtual DOM ensures that only
the necessary parts of the UI are updated, leading to better
performance compared to traditional methods.
3. Dynamic User Experience:- React supports single-page
applications (SPAs), where only specific sections of the page
are updated without requiring a full reload, resulting in a
smoother user experience.

Limitation of React

1. View Layer Only:- React focuses solely on the view layer

of applications; developers often need additional libraries
(like Redux or Flux) for state management and routing.
2. Learning Curve:- New concepts such as JSX and
component lifecycle methods may pose challenges for
beginners.

Component-Based Architecture
React's architecture is centered around components, which are
independent and reusable pieces of code. Each component
encapsulates its own logic and rendering, enabling modular
development. Components can be categorized into two main
types:
1. Functional Components:- These are simple JavaScript

Page | 7
 React JS

functions that return JSX (JavaScript XML) elements. They

are primarily used for presentational purposes.
Example:

Figure 8

In React, each component is defined as a function. It is crucial

that every function returns a valid JSX element.

 Naming Conventions

a. Component Names:- The name of your component

must start with a capital letter. This convention helps
React differentiate between HTML elements and custom
components.
b. File Naming:- The filename for your component should
match the component name and should have
a `.jsx` extension. For example, if your component is
named `Square`, the file should be named `Square.jsx`.

To use your component in another file (like `App.jsx`), you need

to import it correctly. Here’s how you can do it:

Page | 8
 React JS

Figure 9

The statement `import Square from './Square';` indicates that

you are importing the `Square` component from the current
directory (denoted by `./`). This allows you to use
the `Square` component multiple times within
your `App` component.
2. Class Components:- Class components are a fundamental
part of React, allowing developers to create components using
ES6 class syntax. Class components in React are a powerful
way to create components that can manage their own state
and lifecycle.
ES6 class syntax is a way to define classes in JavaScript, introduced
in ECMAScript 2015 (ES6). It provides a more structured and clear
approach to object-oriented programming compared to the previous
function-based syntax.
Example:

Page | 9
 React JS

Figure 10
To define a class component in React, you need to
create a class that extends `React.Component`. This allows
your class to inherit the functionality provided by the React
library.
To use your class component in another file, you need
to import it as :- import React from 'react';
 Key Features of Class Components
a. State Management:- Class components can manage
their own state, which is useful for handling dynamic
data.
b. Lifecycle Methods:- They provide lifecycle methods
(like `componentDidMount` , `componentDidUpdate` ,
etc.) that allow you to hook into different stages of a
component's lifecycle.
c. Render Method:- The `render()` method is required
and is where you define the UI structure using JSX.
This method is responsible for returning the JSX that
represents the UI of the component.
d. Refs and DOM Interaction:- Class components can
directly interact with the DOM using refs, which provide
a way to access DOM elements or React components

Page | 10
 React JS

imperatively.
e. Error Boundaries:- Class components can act as
error boundaries. They can catch JavaScript errors in
their child component tree and display a fallback UI
instead of crashing the entire application.
f. Inheritance:- Class components utilize JavaScript
class inheritance, extending from React.Component.
This allows them to inherit methods and properties from
React, enabling more complex behavior.

 Syntax and File Structure

a. File Naming:- Similar to functional components, the
filename must match the component name and should
have a `.jsx` extension (e.g., Square.jsx`).
b. Single Parent Requirement:- In JSX, each component
must return a single parent element. You can include
multiple child elements, but they must be wrapped in a
single parent container (like a `<div>`).

 Do :-  Don’t :-
<div> <div>
<div></div> <div></div>
<div></div> <div></div>
</div> </div>
<div></div> ->error

Important Considerations
 Props Handling: Props are read-only in both function and

Page | 11
 React JS

class components. You should not modify props directly;

instead, manage any changes through state.
 Constructors and State: Constructors are used to
initialize state when creating a class component. They
allow you to set up the initial state and bind methods.

class MyComponent extends React.Component {

constructor(props) {
super(props);
this.state = { count: 0 };
}
}

 States vs. Props: States and props serve different

purposes in React. State is managed within the
component and can change over time, while props are
passed to components from parent components and are
immutable within the child component.
 Constructor Method: If you need to initialize state or
bind methods, you should define a constructor:

Figure 11

 Functional vs. Object-Oriented Languages: Java is

Page | 12
 React JS

primarily an object-oriented programming language,

while JavaScript supports functional programming
paradigms, allowing functions to be first-class citizens.
 API Definition: An API (Application Programming
Interface) can be thought of as a set of functions or
endpoints that allow different software components to
communicate with each other, often implemented as a
single function or a collection of functions.

Comparison with Functional Components

While class components offer powerful features like

state management and lifecycle methods, there is a trend
towards using functional components with hooks due to
their simplicity and ease of use. Functional components
are often preferred for simpler UI elements or when
managing local state is not necessary.
In conclusion, while class components are still
supported and useful for certain scenarios, many
developers are shifting towards functional components for
their cleaner syntax and reduced complexity in modern
React development.
Components are single-single function which was
created from/by class or function. Creating components
from functions are easier than class.

Example No.1:- Create an web page which display you a react

information.

Page | 13
 React JS

 Create react js file same as displayed in instruction.

 Then you get this list of files. Given in Figure

Figure 12

 In this files you no need to change any thing.

 From your terminal open path to run this project.
 Than the output of your project will be :

Page | 14
 React JS

Figure 13

Then whenever you click on this “count is 0” button it will increase its
number like :-

Page | 15
 React JS

Figure 14

 Understanding Localhost and Port Numbers

 Localhost refers to accessing your own computer's server
environment using the IP address `127.0.0.1`. This allows
you to run applications locally without needing an external
server.
 The port number (e.g., 5173) specified in your terminal
when running a project indicates which port your application
is using to communicate over the network. Each process or
tab in a browser operates on different port numbers to
manage multiple connections simultaneously.

 JavaScript in JSX

Page | 16
 React JS

 When including JavaScript expressions within JSX, they

must be enclosed in curly braces {}. This allows you to
dynamically render data or execute functions within your
JSX code.

 Hard-Coded Values
 A hard-coded value is fixed and cannot be changed
dynamically during runtime. In contrast, when fetching data
from a database or backend, you typically retrieve dynamic
values that can change based on user input or other factors.

 Current Date Example

 If you need to display the current date in your application,
you can do so by utilizing JavaScript's Date object within
your component:
const currentDate = new Date().toLocaleString();
 Comments in React js :-
 Single-line (//) and multi-line (/* …. */) comments.
 Shortcut for comments is `Ctrl + /` (Control key + forward
slash).
arrayname.map() method :-
The `arrayname.map()` method in React is used to iterate over an
array of data and transform each element into a new element,
typically for rendering lists of UI components. It creates a new
array by calling a provided function on every element in the
calling array.
 Key Features and Usage :
1) Purpose: `map()` is commonly used to dynamically render lists
of data in React. It transforms each item in an array into a

Page | 17
 React JS

React element, allowing for the creation of dynamic UI’s.

2) Syntax: The basic syntax is `array.map((currentValue, index,
array) => { /* Return element for newArray */ })`.
 `currentValue`: The current element being processed in the
array.
 `index` (optional): The index of the current element.
 `Array` (optional): The array `map()` was called upon
3) Return Value: `map()` returns a new array with each element
being the result of the callback function.
4) Rendering Lists: `map()` is ideal for generating lists in
React. Each item in the original array maps to a corresponding
value (often a JSX element) in the new array.
const items = ['Apple', 'Banana', 'Cherry'];

const itemList = items.map((item, index) => (

<li key={index}>{item}</li>
));

return (
<ul>
{itemList}
</ul>
);

In this example, the `map()` function iterates over

the `items` array and creates a new array (`itemList`)
containing` <li>` elements for each item. Each `<li>` element is
given a unique `key` prop, which is required by React for efficient
rendering of lists.

Page | 18
 React JS

Important Considerations:
1) Keys: When using `map()` to render lists, each item should
have a unique "key" prop. The key helps React identify which
items have changed, are added, or are removed, and is crucial
for efficient updates to the DOM.
2) New Array: The map() method always returns a new
array. The original array is not modified.
3) Side Effects: While the callback function provided
to map() can have side effects, it's generally recommended to
use pure functions that focus on transforming the array
elements.
4) Alternatives: If you don't need to return a new array and are
only interested in side effects, forEach() or a for...of loop might
be more appropriate.

Example No.2:- Create an web page which display Square and Circle
Components alsouse appropriate css. Square must be function component and
Circle must be class component.
 Create react js file same as displayed in instruction.
 Then you get this list of files. Given in Figure 12.
 Here you don’t have any need of .css files and assets folder
because it is created by default.
 Than have to remove 1 line from main.jsx file which import index
file.
 Clear your App.jsx file and start coding
import Square from "./Square";
import Circle from "./Circle";
function App(){
//let jsx = <h1>Hello Everyone</h1>
return (
<div style={{backgroundColor:"black",

Page | 19
 React JS

height:"100vh"}}>
<div style={{display:"flex"}}>
<Square></Square>
<Square/>
<Square></Square>
<Square/>
</div>
<div style={{display:"flex"}}>
<Circle></Circle>
<Circle/>
<Circle></Circle>
<Circle/>
</div>
</div>
);
}
export default App;

 Create Circle.jsx file . Given in Figure 10

 Create Square.jsx file

Figure 15

 From your terminal open path to run this project.

 Than the output of your project will be :

Page | 20
 React JS

Figure 16

In Visual Studio Code, snippets and keyboard shortcuts can help you write code more
efficiently
Snippets: Code snippets are templates that make it easier to enter repeating code
patterns, such as loops or conditional statements

CONCEPT OF INHERITANCE :-
In React, while inheritance can be used, it is generally
recommended to use composition for code reusability. Here's why
and how to properly manage data flow between components:
 Understanding the Component Hierarchy

Page | 21
 React JS

Consider an application structure where `App.jsx` is the parent

component, `Menu.jsx` is a child of `App.jsx`, and `Item.jsx` is a
child of `Menu.jsx`. In this scenario, the `Item.jsx` component
does not inherently have access to the data or state
within `App.jsx`.
 Props for Passing Data
To enable data flow from a parent component to its children, you
should use props. Props are arguments passed to React
components via HTML attributes.
 Composition over Inheritance
React favors composition over inheritance for code
reuse. Composition involves building complex components by
combining simpler ones. This approach provides greater flexibility
and reduces the tight coupling often associated with inheritance.
 Example Scenario
If `App.jsx` has an array of items that need to be rendered
in `Item.jsx`, you would pass this array as props to `Menu.jsx`,
which in turn passes individual items as props to
each `Item.jsx` component.
 Code Example
Here's how you can pass data using props:
1. Parent Component (`App.jsx`)

import React from 'react';

import Menu from './Menu';

function App() {
const items = ['Home', 'About', 'Contact'];

Page | 22
 React JS

return (
<div>
<Menu items={items} />
</div>
);
}

export default App;

2. Child Component (`Menu.jsx`)

import React from 'react';
import Item from './Item';

function Menu({ items }) {

return (
<ul>
{items.map((item, index) => (
<Item key={index} item={item} />
))}
</ul>
);
}

export default Menu;

3. Grandchild Component (`Item.jsx`)

import React from 'react';

function Item({ item }) {

return <li>{item}</li>;
}

Page | 23
 React JS

export default Item;

In this example, `App.jsx` passes the items array to `Menu.jsx` as

a prop. The `Menu.jsx` component then iterates over
the `items` array and passes each item to
the `Item.jsx` component as a prop. This is a clear and
manageable way to share data between components.

 MANAGING STATE
If the child component needs to modify the data, you can pass a
function as a prop from the parent to the child. The child
component can then call this function to update the parent's state.
By using props and function passing, you maintain a clear flow of
data and control in your React application, making it easier to
understand and maintain.

NAVIGATING DIRECTORIES IN IMPORT STATEMENTS

When importing components or modules in React, you
need to specify the correct path relative to the current file.
The syntax `../` is used to move one directory level up from
the current folder.
Example :
If you're in a folder like `src/components/FoodItem/`, and
you want to import something from `src/style/`, your import
statement would look like this:

Figure 17
So, `../` simply means "go back one directory."
CUSTOM HOOKS

Page | 24
 React JS

What is a Custom Hook?

In React, a custom hook is a JavaScript function that starts

with the word "use" and can call other React hooks. Custom
hooks allow you to extract component logic into reusable
functions.
 Naming: They must start with "use" ( e.g., `useFetch`,
`useOnlineStatus` )
 Custom hooks are JavaScript functions that you create, which
internally use built-in hooks to encapsulate reusable logic
 The code does not demonstrate a custom hook. A custom hook
would be a separate, reusable function that encapsulates stateful
logic.
 While the component uses the useState hook, it does not define its
own custom hook.

Purpose

Custom hooks are useful for reusing stateful logic. They

encapsulate the logic that might otherwise be repeated across
multiple components, making your code more DRY (Don't Repeat
Yourself) and easier to maintain.
They allow you to extract component logic into reusable
functions, making your code more modular and easier to maintain

Key Characteristics

 Reusability: Encapsulate logic that can be reused across

components.
 Stateful Logic: Often manage and manipulate state using
the `useState`, `useEffect`, or other built-in hooks.
 Naming Convention: Must start with "use"
(e.g., `useFetchData`, `useLocalStorage`).

Page | 25
 React JS

Example:
import { useState, useEffect } from 'react';

function useFetchData(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! Status: $
{response.status}`);
}
const result = await response.json();
setData(result);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
};

fetchData();
}, [url]);

return { data, loading, error };

}

export default useFetchData;

HOOK AND DATA PERSISTENCE

Hooks Maintain State

Hooks like `useState` are used to manage state in functional

components. They preserve the state across re-renders. This
means that when a component re-renders (due to changes in
props, state, or context), the state managed by `useState` is
Page | 26
 React JS

retained.

Examples: `useState` and `useEffect` are built-in React hooks.

 The code uses a hook. Specifically, it utilizes the useState hook. This
hook is crucial for managing state within the FoodItem component,
allowing it to preserve values across re-renders.
 The useState hook is used to initialize and manage the num state
variable, which tracks the quantity of the food item.
 Hooks are functions that let you "hook into" React state and lifecycle
features from functional components

Normal Variables vs. `useState` :-

 Normal variables/constants:
 Declared using const or let directly inside a functional
component.
 Do not cause re-renders when their values change.
 Are re-initialized on every render, so they don't maintain their
values across renders.
 Changes to these variables will not trigger any UI update.
 State variables (managed by useState):
 Cause a re-render when their values change.
 Preserve their values across re-renders.
 Changes to these variables will trigger a UI update.
 You also have to import useState. useState can change
your UI.
Example :

Page | 27
 React JS

Figure 18
When using `useState`, you provide an initial value or default
value for the state variable.

Data Persistence

Definition: Data persistence refers to the ability to retain data

across different sessions or component re-renders.
Implementation: Techniques like `localStorage` are used to
persist data even when the user closes the browser or refreshes
the page.
Page | 28
 React JS

Example: The `useLocalStorage` custom hook demonstrates

data persistence by storing and retrieving values
from `localStorage`. This allows the component to remember the
data even after the component is unmounted or the page is
refreshed.
KEY DIFFERENCE BETWEEN `HOOK` AND `CUSTOM HOOK`
 Regular Hook Usage: This means directly using hooks
like `useState`, `useEffect`, etc., within a component to
manage state, lifecycle, or side effects specifically for that
component.
 Custom Hook: This is when you extract hook-related
logic out of a component into a reusable function. This function
(the custom hook) itself uses hooks.
Let's break down why `useFetchData` fits the custom hook
definition:
1. Starts with `use`:
 Custom hooks must have names that start with "use". This is a
React convention. `useFetchData` follows this.
2. Uses Other Hooks Internally:
`useFetchData` itself uses the `useState` and `useEffect`
hooks. This is key. It doesn't just call them directly within a
component; it encapsulates them.
3. Encapsulates Logic:
`useFetchData` encapsulates the complex logic of fetching data
from a URL, handling loading states, and managing errors.

Page | 29
 React JS

4. Reusable:
 The biggest reason it's a custom hook is that you can
now reuse this useFetchData` function in multiple components.
You don't have to repeat the `useState`, `useEffect`, `fetch`, error
handling, etc., in every component that needs to fetch data.

THE `npm run dev` COMMAND

"dev" in `npm run dev`

In React projects created with tools like Create React App or

Vite, the npm run dev command typically starts the development
server. The "dev" part of the command refers to a script defined in
the `package.json` file.

`package.json`

The `package.json` file is located in the root directory of your

React project. It contains metadata about your project and defines
various scripts that you can run using `npm run`.

Example :

Page | 30
 React JS

Figure 19

Purpose of `npm run dev`

 Starts Development Server: Typically starts a local development

server, often with hot-reloading and other developer-friendly
features.
 Hot-Reloading: Automatically refreshes the browser when you
make changes to your code, improving the development
experience.
 Bundling and Compilation: Bundles your JavaScript, CSS, and
other assets for development.
In summary, `npm run dev` is a command that starts a
development server for your React project, as defined in the
scripts section of your package.json file. The specifics of what this
command does depend on the tools you're using (e.g., Vite,
Create React App), but the common goal is to provide a smooth
and efficient development environment.

Page | 31
 React JS

`consol.log` :-

`console.log`

 Not a Hook: `console.log` is a JavaScript function used for

debugging. It's not a React hook.
 Purpose: It logs messages to the console, which is helpful
for understanding what's happening in your code.
`const` :-
 Not a Hook: `const` is a JavaScript keyword used to declare
a constant variable that are block-scoped and cannot be
reassigned after their initial assignment. It's not a React
hook; it is part of the JavaScript language itself.
 Purpose: It creates variables that cannot be reassigned
after their initial value is set.
Characteristics of `const` :
1. Immutability: Variables declared with `const` cannot be
reassigned. However, if the variable holds an object or an
array, the contents of that object or array can still be
modified.
Example:
const myArray = [1, 2, 3];
myArray.push(4); // This is allowed.
console.log(myArray); // Output: [1, 2, 3, 4]

// myArray = [5, 6]; // This will throw an error because you

cannot reassign myArray.

2. Scope: `const` variables are block-scoped, meaning they are

only accessible within the block they are defined in (e.g.,
Page | 32
 React JS

within a function or a loop).

Is `const` a State?

No, `const` is not a state. In React, "state" refers to data

that can change over time and affects how a component renders.
State in React is managed using hooks like `useState`. When you
declare state using `useState`, it allows you to create variables
that can change and trigger re-renders of your component.

Example of State Using `useState`

Here’s how you might use state in a React component:

import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0); // 'count' is the
state variable
const increment = () => {
setCount(count + 1); // Update the state
};

return (
<div>
<h1>Count: {count}</h1>
<button onClick={increment}>Increment</button>
</div>
);
};

export default Counter;

 State: In React, state refers to data that can change over time
and affect component rendering. It is managed using hooks
like `useState`.

Page | 33
 React JS

STATE MANAGEMENT FUNCTIONS IN REACT

1. `setOrderedItem` :-

Definition: `setOrderedItem` is a setter function created by

the useState hook in React. It is used to update the state variable
that holds the list of ordered items.

Characteristics:

 User-Defined: The name `setOrderedItem` is chosen by the

developer when declaring the state variable.
 Functionality: It triggers a re-render of the component
whenever it is called, updating the UI with the new state.

Example:
import React, { useState } from 'react';

const OrderComponent = () => {

const [orderedItems, setOrderedItem] = useState([]); //
Initializing state
const addItem = (item) => {
setOrderedItem((currentState) => [...currentState,
item]); // Updating state
};

return (
<div>
<button onClick={() => addItem('Pizza')}>Add
Pizza</button>
<p>Ordered Items: {orderedItems.join(', ')}</p>
</div>
);
};

export default OrderComponent;

Page | 34
 React JS

Usage: Call setOrderedItem with a new value or a function that

returns a new value based on the current state to update the list
of ordered items.

2. `setComponent` :-

Definition: `setComponent` is another setter function created by

the `useState` hook. It is used to update the visibility or state of a
specific component or UI element.

Characteristics:

 User-Defined: The name setComponent is also chosen by

the developer when declaring the state variable.
 Functionality: Similar to other setter functions, it triggers a
re-render of the component when called.

Example:
import React, { useState } from 'react';

const MyComponent = () => {

const [componentVisible, setComponent] = useState(true);
// Initializing visibility state
const toggleComponent = () => {
setComponent((prev) => !prev); // Toggling visibility
};
return (
<div>
<button onClick={toggleComponent}>Toggle
Component </button>
{componentVisible && <p>This component is
visible!</p>}
</div>
);

Page | 35
 React JS

};

export default MyComponent;

Usage: Call setComponent to change the visibility or state of a
component based on user interaction or other conditions.

3. `currentState` :-

Definition: `currentState` is not a function but a common

parameter name used within setter functions to represent the
current value of a state variable before an update.

Characteristics:

 Not User-Defined: While you can use any name for this
parameter (e.g., `prevState`, `oldState`), it typically
represents the current state value when passed as an
argument to a setter function.

Example:
const [count, setCount] = useState(0);

const incrementCount = () => {

setCount((currentState) => currentState + 1); // Using
currentState to increment count
};
Usage: Use `currentState` within a callback function passed to
setter functions when you need to update state based on its
previous value.

Summary

 `setOrderedItem` and `setComponent` are user-defined

setter functions created using the `useState` hook in React.
Page | 36
 React JS

They are used to manage and update component states.

 `currentState` is commonly used as an argument in setter
functions to represent the current value of a state variable
before an update.

SPREAD SYNTAX (`...currentState`) :-

 What it is: The ... is called the spread syntax (or spread
operator). It's a feature introduced in ES6 (ECMAScript 2015).
 Purpose:
 Arrays: When used with an array, it expands the array into
individual elements. This is useful for creating a new array
that includes all the elements of an existing array, plus
potentially some new elements. Critically, this
avoids mutating the original array. React strongly
encourages immutability, especially when working with state.
 Objects: When used with an object, it copies all the
properties from an existing object into a new object. Again,
this avoids mutating the original object.
 Example (Arrays):
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // arr2 is now [1, 2, 3, 4, 5]
console.log(arr1); // arr1 remains [1, 2, 3] - it's not
modified
console.log(arr2); // arr2 is now [1, 2, 3, 4, 5]
 Example (Objects):
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // obj2 is now { a: 1, b: 2,
c: 3 }
console.log(obj1); // obj1 remains { a: 1, b: 2 } - it's not
modified
console.log(obj2); // obj2 is now { a: 1, b: 2, c: 3 }

Page | 37
 React JS

 Why it's used with `currentState` in React: In React, when

updating state that is an array or object, you should always
create a new array or object instead of directly modifying the
existing state. Using the spread syntax is the most common
way to do this. When you do `...currentState`, you're creating a
shallow copy of `currentState`.

`Filter()` FUNCTION :-
 What it is: filter() is a built-in JavaScript array method.
 Purpose: It creates a new array containing only the elements
from the original array that satisfy a condition (provided as a
function).
 How it works: You pass a function to filter(). This function is
called for each element in the array. If the function
returns true for a particular element, that element is included in
the new array. If the function returns false, the element is
excluded. Importantly, filter() does not modify the original array.
 Example:
const numbers = [1, 2, 3, 4, 5, 6];

const evenNumbers = numbers.filter(ele => ele % 2 === 0); //

'ele' represents each number

console.log(numbers); // Output: [1, 2, 3, 4, 5, 6]

(original array is unchanged)
console.log(evenNumbers); // Output: [2, 4, 6] (new array
containing only even numbers)

API (APPLICATION PROGRAMMING INTERFACE) :-

An API, or Application Programming Interface, is a software

Page | 38
 React JS

interface that allows different software programs to communicate

with each other. It acts as an intermediary that enables various
systems to share data and utilize different services.

Can You Host Your Website or Application on an API?

Yes, you can host your website or application on an API so

that others can access it from their computers or phones. To do
this, you need to host your website or application as a public API,
allowing other developers or users to utilize your services.

How to Do It?

1. API Design and Development

First, you need to design an API for your website or

application. This includes defining how the data will be structured,
what requests and responses will look like, and what endpoints
you will provide.

2. API Hosting

Host your API on a server, such as AWS (Amazon Web

Services), Google Cloud, or Microsoft Azure. This ensures that
your API is accessible over the internet and can be reached by
others.

3. API Documentation

Prepare documentation for your API that includes information

about requests and responses. This will help other developers
understand how to use your API effectively.

4. Security and Authentication

Implement security measures for your API using authentication

and authorization methods such as OAuth or JWT (JSON Web

Page | 39
 React JS

Tokens). This ensures that only authorized users can access your
API.

Is This Process Called an API?

No, using an API and creating an API are two different

processes. When you host your website or application on an
existing API, you are utilizing that API. However, when you create
your own API, you are providing a new service that others can
use.
This process can be referred to as API provisioning or API
hosting, rather than just "API."

Benefits of Using APIs in ReactJS Applications

 Modularity: APIs allow you to separate the front-end (ReactJS)

from the back-end services, making it easier to manage and
scale applications.
 Reusability: You can reuse APIs across different projects,
saving time and effort in development.
 Interoperability: APIs enable different applications and
services to work together seamlessly.
 Data Fetching: In ReactJS, you can use libraries like Axios or
Fetch API to make HTTP requests to your backend APIs,
allowing you to retrieve and manipulate data dynamically.

Common Practices

Use RESTful principles when designing your APIs for better

understanding and usability.
Consider implementing GraphQL if you need more flexibility in
querying data.
Always version your APIs (e.g., v1, v2) to maintain backward
compatibility as you make changes.

Page | 40
 React JS

Example No.3:- Create an web page for a restaurant for

displaying their food items and their todays special dish/recipe
and it must be fetch from hard code data. Their must be a button,
after clicking that bill page must be opened with the selected
items, price and total price.
 Create react js file same as displayed in instruction.
 Then you get this list of files. Given in Figure 12.
 Here you don’t have any need of previous .css files and
assets folder because it is created by default.
 Than you have to remove 1 line from main.jsx file which
import index file.
 Clear your App.jsx file and start coding
import "./style/App.css"
import Menu from "./Components/Menu";
import Bill from "./Components/Bill";
import { useEffect, useState } from "react";

function App(){
const[component, setComponent] = useState("menu")
const[orderedItem, setOrderedItem]=useState([]);

const data = {"result":{"title":"Italian Chicken and Rice

with Peppers","ingredients":[{"name":"chicken
breast","amount":"500g"},{"name":"rice","amount":"250g"},
{"name":"bell pepper","amount":"150g"},{"name":"olive
oil","amount":"2 tablespoons"},{"name":"garlic","amount":"3
cloves"},{"name":"onion","amount":"1 medium"},{"name":"chicken
broth","amount":"500ml"},{"name":"dried oregano","amount":"1
teaspoon"},{"name":"salt","amount":"to taste"},{"name":"black
pepper","amount":"to taste"},{"name":"grated Parmesan
cheese","amount":"50g"}]}}
return(
<div className="maincontainer">
<h1>Star Restaurant</h1>
<h3>What Is New Today ??</h3>
<div className="recpies">
Name:{data.result.title}
<br></br> <br></br>

Page | 41
 React JS

Ingredients : {data.result.ingredients.map(ele=>{
return <p>{ele.name} <b>{ele.amount}</b></p>
})}
</div>

{ /* Bill Page */ }
{component === "menu" ? (<Menu
setComponent={setComponent} setOrderedItem={setOrderedItem}
/>) : (<Bill orderedItems={orderedItem} // Pass orderedItem
state
setComponent={setComponent}
setOrderedItem={setOrderedItem}
/> )}
</div>
)
}

export default App;

 Create Component folder in src folder.
 Create Menu.jsx
import FoodItem from "./FoodItem";
import "../style/Menu.css";
import foodMenu from "../data";

function Menu({setComponent, setOrderedItem}){

return (
<div>
<div className="foodMenu_container">
{foodMenu.map((obj)=>{
return <FoodItem item={obj}
setOrderedItem={setOrderedItem}/>
})
}

{/* <FoodItem item={foodMenu[0]}/>

<FoodItem item={foodMenu[1]}/>
<FoodItem item={foodMenu[2]}/>
<FoodItem item={foodMenu[3]}/>*/}
</div>
<button onClick={()=>{setComponent("bill")}}> Order
Now </button>
</div>)

Page | 42
 React JS

export default Menu;

 Create FoodItem.jsx
import React, { useState } from 'react';
import "../style/menu.css";

const FoodItem = (props) => {

const [num, setNum] = useState({ value: 0 });
let item = props.item;
let setOrderedItem = props.setOrderedItem;

function clickHandler(sym) {
if (sym === "+") {
setNum({ value: num.value + 1 });

setOrderedItem((currentState) => {
console.log("Adding Item:", item);
let result = currentState.filter((ele) => {
if (ele.name === item.name) {
return true;
}
});

if (result.length === 0) {
item.count = num.value + 1;
return [...currentState, item];
} else {
return currentState.map((ele) => {
if (ele.name === item.name) {
ele.count = num.value + 1;
}
return ele;
});
}
});
} else if (sym === "-") {
if (num.value > 0) {
setNum({ value: num.value - 1 });

setOrderedItem((currentState) => {
console.log("Removing Item:", item);
let result = currentState.filter((ele) =>
{

Page | 43
 React JS

if (ele.name === item.name) {

return true;
}
});

if (result.length > 0) {
return currentState.map((ele) => {
if (ele.name === item.name) {
if (ele.count > 1) {
ele.count -= 1;
} else {
return null;
}
}
return ele;
}).filter(Boolean);
}
return currentState;
});
}
}
}

return (
<div className='foodItem_container'>
<img src={item.imageUrl} alt="dish name"
width="200px" height="200px" />
<h3>{item.name}</h3>
<h4>{item.price}</h4>
<p>{item.description}</p>

<div>
<button onClick={() => { clickHandler("-") }}>
- </button>
<button> {num.value} </button>
<button onClick={() => { clickHandler("+") }}>
+ </button>
</div>
</div>
);
}

export default FoodItem;

Page | 44
 React JS

 Create data.js file for your items data. It does not contain any
code but have your food items data in an array form.
let foodMenu= [{name:"Coffee", imageUrl:" https://_URL ",
description:"Lorem ipsum dolor ...", price:"200"},

{name:"Samosa", imageUrl:"https://_URL", description:"The

samosa is prepared with ...", price:"100"},

{name:"Dosa", imageUrl:" https://_URL ", description:"Dosa

is high in carbohydrates and contains no added sugars. As its
key ingredients ...", price:"230"},

{name:"Puranpoli", imageUrl:" https://_URL.jpg",

description:"Puran Poli is an Indian delicacy...",
price:"250"},

{name:"Kaju Katli", imageUrl:" https://_URL.jpg",

description:"Kaju katli (lit. 'Cashew slice') is an Indian
dessert. Kaju means cashew...", price:"220"},

{name:"Hot chocolate with marshmallows", imageUrl:"

https://_URL ", description:"A perfect time for hot chocolate,
and we know ...", price:"300"},

{name:"Dal Tadka", imageUrl:" https://_URL ",

description:"Dal Tadka is a classic Indian dish made ... ",
price:"130"},

{name:"Ras Malai", imageUrl:" https://_URL.jpg",

description:"Ras Malai is a popular Indian dessert...",
price:"450"}
]

export default foodMenu;

 Create Bill.jsx
import React from 'react';
import "../style/bill.css"

const Bill = ({ orderedItems, setComponent, setOrderedItem })

=> {
console.log("Ordered Items:", orderedItems);
const total = orderedItems.reduce((acc, item) => acc +

Page | 45
 React JS

(item.price * item.count), 0);

return (
<div className="bill-container">
<h2>Bill Summary</h2>
{orderedItems.map((item, index) => (
<div key={index} className="bill-item">
<p>{item.count} x {item.name} = ₹
{item.price * item.count}</p>
</div>
))}
<h3 className="total">Total: ₹{total}</h3>
<button className="back-button" onClick={() =>
setComponent("menu")}>Back to Menu</button>
</div>
);
}

export default Bill;

 Now create all this .jsx files .css file, you can create its
separate file and common single .css file. (Here, I have
created separate .css files)
App.css

.maincontainer{
text-align: center;
color: blue;
font-size: 35px;
}
.recpies{
width: 20%;
margin: 20px auto;
font-size: 15px;
color: black;
border: 2px solid rgb(229, 13, 13);
border-radius: 5px;
box-shadow: 0px 0px 10px rgb(235, 10, 115);
}

Menu.css

.foodMenu_container{

Page | 46
 React JS

width: 100vw;
display: flex;
font-size: 20px;
color: gray;
gap: 20px;
flex-wrap: wrap;
justify-content: space-around;
}
.foodItem_container{
width: 20%;
border: 1px solid gray;
border-radius: 10px;
box-shadow: 0px 0px 10px gray;
}

bill.css

.bill-container {
width: 35%;
margin: 10px auto;
border: 1px solid #ccc;
}
.bill-item {
color: black;
border: 1px solid #eee;
}
.total {
color: rgb(0, 128, 0);
font-size: 1em;
}
.back-button {
padding: 10px 15px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

await KEYWORD :-
await is used in JavaScript to pause the execution of
an async function until a promise is resolved or rejected. In
Page | 47
 React JS

React, await is particularly useful when dealing with

asynchronous operations such as fetching data from an API or
performing other time-consuming tasks.

Key Concepts

1. async Functions: The await keyword can only be used

inside a function declared with the async keyword.
2. Promises: The await keyword is used with promises. A
promise represents the eventual completion (or failure) of an
asynchronous operation.
3. Pausing Execution: When await is used, it pauses the
execution of the async function until the promise is settled
(either resolved or rejected).

How to Use await in React

1. Fetching Data: One of the most common use cases is

fetching data from an API.
import React, { useState, useEffect } from 'react';

function MyComponent() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
const fetchData = async () => {
try {
const response = await
fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error(`HTTP error! Status: $
{response.status}`);
}
const result = await response.json();
setData(result);
} catch (err) {

Page | 48
 React JS

setError(err);
} finally {
setLoading(false);
}
};

fetchData();
}, []);

if (loading) return <p>Loading...</p>;

if (error) return <p>Error: {error.message}</p>;
if (!data) return <p>No data to display.</p>;

return (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
export default MyComponent;
 In this example:
 fetchData is an async function.
 `await fetch('https://api.example.com/data')` pauses
execution until the fetch operation completes.
 `await response.json()` pauses execution until the
JSON data is parsed.
 The `try...catch` block handles potential errors during
the fetch operation.
2. Performing Other Asynchronous Tasks: You can
use await with any function that returns a promise.
import React, { useState, useEffect } from 'react';

function MyComponent() {
const [message, setMessage] = useState('');

const delay = (ms) => new Promise(res => setTimeout(res,

ms));

Page | 49
 React JS

useEffect(() => {
const showMessage = async () => {
await delay(2000); // Wait for 2 seconds
setMessage('Hello after 2 seconds!');
};

showMessage();
}, []);

return <p>{message}</p>;
}

export default MyComponent;

 In this example:
 The delay function returns a promise that resolves after
a specified time.
 await delay(2000) pauses execution for 2 seconds.

Benefits of Using await :-

1. Improved Readability:
 await makes asynchronous code look and behave a bit
more like synchronous code, which can make it easier
to read and understand.
2. Simplified Error Handling:
 You can use try...catch blocks to handle errors in
asynchronous code, which is often cleaner than
using .then() and .catch() with promises.
3. Sequential Execution:
 await ensures that asynchronous operations are executed in a
specific order. This can be important when one operation
depends on the result of another.

Important Notes :-

Page | 50
 React JS

1. Top-Level await:
 Outside of an async function, you cannot use await directly in a
top-level context (e.g., in a module scope). If you're using ES
modules and a modern environment, top-level await may be
supported.
2. React Component Rendering:
 You cannot use await directly within the render method of a
React component because the render method must be
synchronous. However, you can use it within useEffect or other
asynchronous functions triggered by component lifecycle
events or user interactions.

Summary

await simplifies asynchronous operations in React by making the

code more readable and easier to manage. It is especially useful
when fetching data from APIs or performing other time-consuming
tasks. Always use await inside an async function and ensure
proper error handling with try...catch blocks. This makes
asynchronous code easier to write, read, and manage.
useEffect Dependency Array :-
 What it is: It's a list (an array) you put as the second
thing inside useEffect(). This list tells React when to run the
code inside your useEffect.
 Why it's important: It stops your useEffect code from running
too much! Running it too much can slow down your website or
cause problems.
 Three ways to use it:
1. Empty [ ]:

Page | 51
 React JS

 Meaning: Run the code only one time, when the

component first shows up on the screen.
 Think: "Do this once when the component is born."
 Example: Good for loading some data from the
internet when the page first loads.
useEffect(() => {
// This code runs only ONCE when the component first loads
console.log("Component mounted!");
fetchData(); // Assuming fetchData is a function you
define elsewhere
}, []);
2. With stuff inside [variable1, variable2]:
 Meaning: Run the code:
o The first time the component shows up.
o Every time variable1 or variable2 changes.
 Think: "Do this when the component is born, and then
again every time these variables are different."
 Example: If you have a userId, and you want to load
the user's info. You'd put userId in the list. That way,
when the userId changes, it loads the new user's info.
import React, { useState, useEffect } from 'react';
function MyComponent({ userId }) {
const [userData, setUserData] = useState(null);
useEffect(() => {
// This code runs when the component mounts AND when
userId changes
async function fetchUserData() {
const response = await fetch(`/api/users/${userId}`);
const jsonData = await response.json();
setUserData(jsonData);
}
fetchUserData();
}, [userId]); // The dependency array: Runs when userId

Page | 52
 React JS

changes
return (
<div>
{userData ? (
<p>Welcome, {userData.name}!</p>
) : (
<p>Loading...</p>
)}
</div>
);
}
3. No list at all (don't put [ ] or anything):
 Meaning: Run the code every single time the
component shows up on the screen.
 Think: "Do this every time, no matter what!"
 Warning: Usually, you don't want to do this! It can
make your website slow! Only do this if you really need
the code to run every time.
Important rules:
 List everything your code uses: If your code
inside useEffect uses a variable, it must be in the list. If you
don't put it in the list, your code might not work right!
 Keep the list small: Only put things in the list
that really need to be there. The smaller the list, the faster
your website will be.
In short: The dependency array is how you tell
React exactly when to run your useEffect code. Use it
carefully to keep your website fast and working well!
Example No.4:- Create an web page for a restaurant for
displaying their food items and their todays special dish/recipe
and fetch data from chrome(We can also say that it is not a hard

Page | 53
 React JS

coded data). Their must be a button, after clicking that bill page
must be opened with the selected items, price and total price.
 This example is similar to Example No.3 but with some
difference.
 You just need to change app.jsx and add a new file
fetchdata.js
 App.jsx
import "./style/App.css"
import Menu from "./components/Menu";
import Bill from "./Components/Bill";
import { useEffect, useState } from "react";
import request from "./fetchData";

function App(){
const[component, setComponent] = useState("menu")
const[orderedItem, setOrderedItem]=useState([])
const[todo, setTodo] = useState([])
let data = null;

useEffect(function (){
async function fun() {
let data2 = await request();
console.log(data2.todos)
setTodo([...data2.todos])
}
fun();

},[todo]);

return(
<div className="maincontainer">
<h1>Star Restaurant</h1>
<h2> What is new today ??? </h2>
{console.log(todo)}
<ul>
{todo.length===0?
null
:
todo.map((ele)=>{
return <li>{ele.todo}</li>

Page | 54
 React JS

})}
</ul>
{component==="menu"?<Menu setComponent={setComponent}
setOrderedItem={setOrderedItem}/>:<Bill
setComponent={setComponent}/>} {/* conditional ternery */}
{/* it displays bill page instead of App page */}
</div>
)
}

export default App;

 Fetchdata.js this file contain data of some items here I used
todo list. (here u can use a commented section also for that
code you have some changes in App.jsx .
async function request(){

// const url = 'https://ai-food-recipe-generator-api-

custom-diet-quick-meals.p.rapidapi.com/generate?noqueue=1';
// const options = {
// method: 'POST',
// headers: {
// 'x-rapidapi-key':
'73224b26f1mshcf6b9a29e2627eep1d0ce0jsn39b191416c31',
// 'x-rapidapi-host': 'ai-food-recipe-generator-api-
custom-diet-quick-meals.p.rapidapi.com',
// 'Content-Type': 'application/json'
// },
// body: {
// ingredients: [
// 'chicken',
// 'rice',
// 'pepper'
// ],
// dietary_restrictions: ['gluten_free'],
// cuisine: 'Italian',
// meal_type: 'dinner',
// servings: 4,
// lang: 'en'
// }
// };

// try {
// const response = await fetch(url, options);

Page | 55
 React JS

// const result = await response.text();

// console.log("data");
// console.log(result);
// } catch (error) {
// console.log(error);
// console.error(error);
// }
// }

let result = await fetch('https://dummyjson.com/todos')

let promise = await result.json();
return promise
// .then(res => res.json())
// .then(console.log);
}

export default request;

 App.jsx file for commented code of Fetchdata.js :-
import "./style/App.css"
import Menu from "./components/Menu";
import Bill from "./Components/Bill";
import { useEffect, useState } from "react";
import request from "./fetchData";

function App(){
// const[page , setPage] = useState('home')
const[component, setComponent] = useState("menu")
const[orderedItem, setOrderedItem]=useState([])

let data = null;

useEffect(()=>{
request();
},[]);

return(
<div className="maincontainer">
<h1>Star Restaurant</h1>
<h3>What Is New Today ??</h3>
{data===null?null:
<div className="recpies">
Name:{data.result.title}
<br></br><br></br>
Ingredients : {data.result.ingredients.map(ele=>{
return <p>{ele.name} <b>{ele.amount}</b></p>

Page | 56
 React JS

})}
</div>}

{component==="menu"?<Menu setComponent={setComponent}
setOrderedItem={setOrderedItem}/>:<Bill
setComponent={setComponent}/>} {/* conditional ternery */}
{/* it displays bill page instead of App page */}
</div>
)
}

export default App;

 If server is not working properly than it may happen that
output is not perfect.

Page | 57