Welcom

e to
React js
Introduction to React js
Q. What is React.js?
 React.js is a Frontend Javascript library used for building
user interface (UI’s).

 Specially react.js is used to create single-page

applications (SPA).

 It allows developers to create reusable UI components,

making the development process faster and more efficient.
Library vs Framework
Q. What is Library?
Library is a collection of pre-written code that you can call to perform specific tasks.
It doesn't have syntax or rules to be followed. You can use them however you see fit
but they don't provide you with everything, you might need to use other libraries.

Example – React JS, GSAP

Q. What is Framework?
Framework is a complete structure for building an application. It provides rules,
patterns, and tools, and often dictates how your code should be structured. It is built
over your libraries and there is a proper syntax and rules we have to follow. You can't
do and use it however you see fit but it provides you with everything, no need of
anything else.

Example – Tailwind, Angular

 SPA vs MPA
Q. What is SPA? Q. What is MPA?
 A SPA stands for single-page  A MPA stands for Multi-page applications.
application.
 Each page is a separate HTML file,
 Loads a single HTML page and making navigation slower.
updates content dynamically without  Slower performance, as the browser loads
reloading the page. everything again on each page change.
 Faster after the first load, as only  Every new page request reloads the
necessary data is updated. entire page from the server.

 Uses client-side routing (React Router)  Uses server-side routing (URLs trigger
to switch views without reloading. full-page reloads).

 Examples: Gmail, Facebook, Twitter,  Examples: Amazon, Wikipedia, News

Netflix, YouTube Web App. Websites, Banking Portals.
History to React js
Q. Who created React.js?

 The SPA is not a new term it present since 2002. But we didn’t
have technology at that time.

 In 2009, we got angularjs for creating SPA, but it was not

optimized and had bugs.

 In year 2011 React JS, was created by Jordan Walke while

working as a software engineer at Facebook.

 It was first used in Facebook's News Feed and later in Instagram.

Jordan
 It is was made and open-source library in 2013 to used by Walke
developers worldwide.

 As of March 2025, React.js has had a total of 19 major versions

released.
 Characteristics of React js
• React JS is a JS Library :

React.js is a lightweight library created using JavaScript. It primarily focuses on the

view layer of an application.

• Free and Open Source :

React is maintained by Meta (formerly Facebook) and is open source, allowing

developers worldwide to contribute and improve it

• Component-Based Architecture :

A component in React splits your UI into small, reusable pieces. Each component
handles its own logic and rendering, making your app modular and
maintainable.
• Declarative :

Declarative means you tell React what you want, and React figures out how to do it. Instead
of manually updating the DOM, you describe the UI state, and React updates it efficiently.

• Unidirectional Data Flow :

Unidirectional Data Flow in React means data flows in one direction - from parent
component to child components via props. This ensures predictable data flow, making it
easier to debug.

• Learn once write anywhere :

"Learn Once, Write Anywhere" in React Native means you can use your React knowledge
to build apps for multiple platforms (web, iOS, Android) without learning separate
technologies for each.

• Virtual DOM:

React uses a Virtual DOM to optimize updates. React does not update the real DOM directly
because it's slow. Instead, it uses a Virtual DOM, which is a lightweight copy of the real
DOM.
Without React.js vs With React.js
Q. Without react.js? Q. With react.js?
 In traditional JavaScript, every UI  React does not update the Real DOM
update directly modifies the Real directly.
DOM. The problem is that the DOM is
slow.  Instead of it uses virtual dom.

 And DOM manipulation was very  Keeps UI fast and smooth, even in
expensive. large applications.
How React Internally works
DOM is the representation of UI in the form of tree data structure used by browser.
Any update with the dom result in the re-rendering or re-painting of the UI.

Whenever a page reloads DOM is created by window. It is not a performance oriented

thing, definitely each and every time repainting on the UI. DOM result is rendered
each and every time. To avoid this react uses a concept called reconciliation.

React is not using real dom instead uses Virtual dom, which is a temporary data copy
of real dom.

This virtual dom is the copy(clone) of real dom and no re-rendering takes place.

It will patch only particular node and update it. It will compare each node with node of
real dom and update only the changed node and don't update other node and avoid
re-rendering.

React does not interact with real dom directly, but instead it interacts with virtual
dom which interacts with real dom.
 How React Internally works
Reconciliation :

Reconciliation in React is the process through which React updates the actual DOM
to match the latest version of the virtual DOM. It's a core mechanism that ensures
efficient UI rendering and updates.

When a component(node) state or prop changes, React decides whether it should

render the changes on Real DOM or not. So, if the states/props of two
nodes/components are not the same, then it renders the changes to real DOM. This
process is called Reconciliation.

React is faster because it uses reconciliation and virtual dom

Here's a breakdown of how it works:

 Virtual DOM - React maintains a lightweight copy of the actual DOM in

memory, known as the virtual DOM. This virtual representation allows React to
perform updates efficiently without directly manipulating the real DOM.
 How React Internally works
 Diffing Algorithm - It compares the new virtual DOM with the previous one to
identify the differences. This comparison is done using a highly optimized diffing
algorithm, which minimizes the number of DOM operations required to update the
real DOM.

 Updating the Real DOM - Once the diffing algorithm identifies the changes,
React generates a set of "patches" — instructions for updating the real DOM.
These patches are applied in a batched manner, minimizing the number of DOM
manipulations and improving performance. This ensures that the browser only
performs the minimum required updates, resulting in improved performance.
React js Applications
Prerequisites for Learning React.js
HTML, CSS, JAVASCRIPT:
i. HTML (Hyper Text Markup Language) – The structure of a webpage (e.g.,
headings, buttons, forms).

ii. CSS (Cascading Style Sheets) – Used for styling the webpage (e.g., colors,
layouts).

iii. JavaScript (ES6+) – Arrow functions, let and const variables, template literals,
destructuring (arrays & objects), spread and rest, modules (import/export),
events, and event handling. DOM manipulation
Installing React.js with Vite
 Vite is frontend build tool and development server.
 Vite is a faster and lightweight.
 It provides better performance and a smoother developer experience.

`
Step-1: Install Node.js
 Before installing React, make sure Node.js is installed on your system.
 After installation open command prompt (cmd) to check the version of installed
node .js
 Command: node -v

👉 If not installed, download it from: https://nodejs.org/

Step-2: Create a New Folder (name-
Reactjs)
 Create a new folder inside web tech program training folder.
 Name of the folder - Reactjs

`
Step-3: Open this folder inside the vs
code
 Click Terminal – New Terminal
 Click (+) icon and open the command prompt not Powershell.

`
Step-4: Run the following command in
cmd
 Command: npm create vite@latest
 And just enter on keyboard.

`
Step-5: Packages and Project Name
 It will ask to install some packages, you have to give the permission by typing:
 Ok to proceed: y
 Then after hitting enter it will ask for project name.
 Give the project name whatever you want.
 For Example - Project name: my-first-create-app
`
Step-5: Select a framework
 After giving name it will ask the select a framework.
 Only Select – React
 How to select ? – Use down arrow key on keyboard for selecting option react
option.
 For Example – Select a framework: React
`
Step-5: Select a variant
 After selecting a framework it will ask for you variant.
 Variant is nothing but which language you are going to use in react js
 How to select ? – Use down arrow key on keyboard for selecting option javascript
option.
 For Example – Select a variant: Javascript (✅)
 Don’t select Javascript+swc (❌) `
Step-6: 3 commands will be created

 After that it will create

one folder inside the main
react js folder.
 You will able to see the 3 `

commands in the
terminal.
 Now use step-7 on
next slide
Step-7: Use first command

 Copy the first command and paste in cmd.

 It moves the control in the react project folder
 After that hit enter on the keyboard.

`
Step-8: Use second command
 Now you are entered in the react project folder.
 Copy the second command and paste into the cmd.
 And hit enter, it will install important packages which will help to run the react
project.
 Command : npm install (It will create one node-modules folder)
 It will take some tine to install the packages.
` so wait for some time. (It might takes
After Installation
some minutes also, it depends upon your internet speed)
Step-9: Use third and last command
 Now you can right side image, your folder structure will look like this.
 That means you have created your first react app.
 To run react project you need last command copy the command and hit enter.
 Command: npm run dev

`
Step-10: Copy the link and Paste into
browser
 After the step-9 it will create one link.
 Just copy the link and paste it into the browser.
 Now you can see react project is running on the browser successfully.

`
Copy this link paste in the
browser
Congratulations you have created first
react project

`
 Three main libraries of React

• React :

The core library for building UI components. Provides functions like useState,
useEffect, and many more. Works with the Virtual DOM to optimize updates.

• ReactDOM :

Connects React to the browser’s real DOM. Handles rendering React components into
the actual webpage.

• Babel :

A JavaScript compiler that converts modern JS (JSX, ES6+) into plain JavaScript.
Helps browsers understand JSX. Used in development to make React code browser-
compatible.
React Folder Structure

Main React folder

Stores all installed dependencies (auto-
generated).
Contains static data likes images, and icons.
Main Source code folder (Components, styles, and
logic)
Specifies files Git should be ignored. (e.g.
`
node_modules)
Configuration of ESLint (Code linting and
formatting)
The main HTML file where React attaches
Auto-generated file to lock dependency versions.
Defines project dependencies, scripts, and
metadata.
Documentation for the project (how to use/setup).
Configuration file for Vite (fast build tool for React).
React Folder Setup

 Open the project in vs code

 Delete the src folder to remove any pre-provided jsx and js files
 Create the src folder. This folder belongs to react.
 Whatever code we have for react we need to write in src only with .jsx extension
 Inside src, create main.jsx.
`
 To create react application, we need two important modules
1. react
2. react-dom/client
React Folder Setup
• createRoot :
createRoot is a function in ReactDOM that allows you to create a root for rendering
React components within a specified DOM node.
• render :
render is a function in ReactDOM that renders the react element on the
browser.
`
Syntax – ReactDOM.createRoot(container).render(element)
React Element

Browser internally understands react elements, as virtual dom uses react element.
To create elements in react we use a method createElement( ), provided by react
library.

It accepts three arguments – element , property / attribute as object , children /

content

Syntax - React.createElement (elementname,

` { property/attribute :
value }, ...children/content)

This createElement is a difficult syntax to follow, and we are already familiar with
html, that why we use jsx in react for template purpose.
JSX (Javascript and XML)

 JSX stands for Javascript and XML.

 It is a syntax extension for JavaScript that looks like HTML but works inside
JavaScript.
 This syntax allow us to write html code in react.
 It looks similar to html but it is not.
`
 Without jsx it is very difficult to create react application.

Q. Why do we need JSX?

1. Easier to write and read UI components
2. Allows us to write down mix code of javascript logic with UI components
Rules of JSX:

1. JSX elements must be closed (opening tag and closing tag are mandatory with
proper syntax). Even if it is an empty/void tag that also needs to be closed.
2. JSX elements must have one parent element. Elements at same level should be
wrapped in one parent element.
3. To provide a class to react element, we have to use className as class is a
keyword in javascript. `

4. To link your label with input tag in form, we have to go with htmlFor as for is a
reserve keyword in javascript.
5. JSX follows naming convention – inbuilt tags should be in lowercase,
attributes should be in camelCase and custom build components should be
in PascalCase.
What is Fragment in React.js?

 A fragment in react is used to group multiple elements without adding an

extra DOM node like a <div>.

 Fragment is not a html element, it is react component.

 We can not pass id or any other attribute

` to it. It is not adding to the DOM,

then how can we pass any attribute to it.

 It accepts only one attribute that is key, we will see this key later.

 If we want to provide attributes, we need to go with html elements.

Q. How to use Fragments?

1. Using <React.Fragment>

2. Using Short Syntax ( <> and </> )

Suggestion: A shorter way to use fragments is by using empty angle

`

brackets. ( <> and </> )

Note: We cannot pass key attributes in short fragment syntax.

 JSX Expression
 To use js variables or js syntax in our jsx template, we have to use a pair of curly braces,
this is called a jsx expression.
 Don't take it as an object, a pair of curly braces in the jsx is a jsx expression.
 Important Note: Inside expression we cannot render boolean/null/undefined but we can
use with conditions and use only those expressions that return a value.
`
Components in React js
 React follows component-based architecture.
 A component in react is reusable, independent javascript functions that can be
used multiple times within an application.
 Components allows us to break down the UI into smaller parts.

`
Components in React js

`
How to create component?

 Create a new component file in the src folder - You should use the extension as .jsx

only.

 The first alphabet of the file name should be capital Eg - App.jsx

`
 You can use the syntax of either class-based-component or function-based-

component.

 Then export your component.

 And import it with proper address wherever you feel necessary and use it as
Function Based Component in React js
 A functional component is just a Javascript function that returns JSX.

`
Extension – React Developer Tools
 React Developer Tools is a browser extension that helps inspect and debug React
components in real-time.
 It allows developers to view component hierarchy, props, state, and performance,
making debugging easier.

`
List and Keys in React js

Q. What are Lists in React?

 In React, a list is a collection of items (like an array) that we render dynamically using

.map()
`

Q. Why Do We Need Lists?

1. Helps display multiple items dynamically.

2. Makes UI updates efficient.

List and Keys in React js

Q. What are Keys in React?

 In React, Keys are special attributes that help React identify which items changed,

added, or removed.

 Syntax: items.map((item) => <Component key={item.id} />);

`
 Important Note: A key should be unique for each list item.

Q. Why Do We Need Keys?

1. Improves performance by helping React update only the changed items.

2. Prevents unnecessary re-renders.

 Props in React js
 Props stands for properties in react js.
 Props are used to pass data from a parent component to a child component in react.
(Unidirectional Flow)
 Props are read-only and help make components reusable and dynamic in nature.
 We can pass any javascript value through props and it is send as an object.
`
How to pass and consume props?

Passing Props Consuming Props

`
 How to pass different javascript values as a
prop
 If you are passing string you can just pass it normally in quotes, we can not use
backticks.
 If you want to send any data type other than string, we should go with expression
( { } ).
 We need to wrap data inside jsx expression ( { } ).
 We can also pass string in jsx expression. `
Props Children

 Till now we are using unpaired syntax for our custom tags, but what if we use the

paired way and pass some content in between.

 React automatically will convert that content into props and it will be present

inside your props object in the children key.

`
 This is called as props children.

 You can access it through props.children in child component.

 We can pass JSX only as content in props.children (between opening and closing

custom tags).

 The passed JSX is present in the form of array in the children key.
Props Children

`
Events in React

 Events in React are user interactions such as clicks, key presses, or mouse

movements.

 React handles events using event listeners, similar to JavaScript, but with a slightly

different syntax.
`
Important Points:

1. React events are named using camelcase (e.g. onClick, onChange)

2. Event handlers are functions that execute when an event occurs.

3. The event object (e) provides the information about the event.
Events Handling in React

 In react, event handling is similar to handing events in javascript but with some

key differences.

 React uses a SyntheticEvent, a wrapper around native events for cross-browser

consistency.
`
Events Handling in React

`
e.preventDefault() in React

 In react, e.preventDefault() is used to prevent the default behaviour of an

event.

 This is commonly used in submissions forms, links clicks, and other default

browser behaviors.
`
 Syntax – e.preventDeafult();

Q. Why Use e.preventDefault()?

By default, some HTML elements have predefined behaviors:

1. Forms (<form>) – Refresh the page on submission

Conditional Rendering in React

 Conditional Rendering, in react means showing different UI elements based

on a condition.

 Instead of rendering everything at once, React dynamically decides what to

render.
`
1. Conditional Rendering By Using if-else

 If-else cannot be used inside JSX.

 It works outside the return() statement of the component.

`
2. Conditional Rendering By Using Ternary
Operator
 The ternary operator is used as a shorter syntax for the if-else statement.

 It works inside the JSX ({ }).

`
3. Conditional Rendering By Using Short-
Circuit
 Short Circuit (&&) (AND Operator).
 The short-circuit operator works from left to right. It is alternate for the if
statement. If the condition is true jsx will be rendered.
 It works inside the JSX ({ }).

`
States in React

 States is used to store and manage the component-specific data in react.

 useState – It is a hook in react js which will handle state management in function

based component.

 state – Holds the current value or initial value

 setState – It is a function which will update the current value

Styling in React

 In react, you can style the components by using CSS.

 There are 3 ways you can provide the styling in react:

`
Global CSS

 Create a global css file in the src folder.

 In the global css file, we can write the normal css code using selectors.

 Link the global css file with main.jsx.

 Syntax - import “ . / filename.css”

`
Inline Styling in React

 Inline styles in React are written as Javascript Objects inside the style attribute.

 Javascript object means key and value pair.

 Key – propertyName (camelCase convention)

 Value – “value” (In String)

`
Installation for Tailwind CSS for React

 First close your project (terminate the project in terminal by clicking ctrl+c – then
type y and hit enter)
 Go to this website - https://tailwindcss.com/docs/installation/using-vite
 You will see this type of UI.

`
Step-1: Copy the first command

 Copy the first command and open new terminal - Command prompt – and paste
the command and hit enter.

`
Step-2: Copy the 2nd import statement

 Copy the 2nd import statement only - import tailwindcss from '@tailwindcss/vite‘
 Then go to vs code you will see file vite.config.js at the last of the project.
 Open the file paste that import statement in the line no-3.

`
Step-3: Copy the tailwindcss()

 Now copy the tailwindcss() from the plugins option.

 After that go to vs code, vite.config.js – inside you can see already react is their
provide one comma (,) and paste that tailwindcss() their itself.

Before After

`
Step-4: Copy the 3rd command and paste in
global.css
 Now create one file inside the src folder. – filename - global.css
 Inside that paste the 3rd command - @import "tailwindcss";

`
Step-5: Now import that global.css in
main.jsx
 Now import that global.css file import inside the main.jsx file.
 Or you can type exact same import statement inside your code in line-4

`
Step-6: Finally run the react project – npm
run dev
 Tailwind installation done for your system.
 Now just run the react project in terminal – command prompt – npm run dev
 Open the link in the browser that it done.

`
For those who are getting errors

 If your are getting error like lightningcss module not found.

 Type Microsoft redistribute package in any browser and click on the first link.

`
For those who are getting errors

 Next thing just scroll the page you will see this type of one box.
 In the terminal, just check what it the version error coming and it may be asking
like x64 or x86 according that just click on the link and download that package in
your system.

`
For those who are getting errors

 After downloading just check the I agree and click on the install button.
 After the completion of installation just restart your laptop.
 Open the vs code and run the react project now that error will not come.

`
Forms Handling React

 Form handling in react means managing the input fields (like text, email,

password, radio, select, etc) and their values when a user types something.

 It includes:

1. Capturing user input `

2. Updating the state when input changes

3. Submitting the form

Forms Handling React

 To handle forms in React properly, we need four key things:

`
Forms Handling React

1. State :
 The state holds the form's input values.
 It updates whenever the user types something in the input fields.

2. onChange event :
 The onChange event updates the state when the user types something in the
`
input field.
3. value attribute :
 The value attribute binds the input field to the state.

4. name attribute :
 The name attribute helps identify the input field and allows us to update the
correct state property.
useEffect()

 The useEffect() is the React Hook.

 It allows us to run code after the component renders.

It is mainly used for: `

1. Fetching data from an API

2. Changing the document title

What Happens If we don’t use useEffect()
Hook
 If we put API calls directly inside the component, they will run on every re-

render.

1. Infinite API requests

`
2. Unwanted side effects
useEffect() Hook

1. No dependency array – Runs every render

2. Empty ([ ]) array – Runs only once
3. Dependency Array with values – Runs when dependencies change
Context API in React

 Context API is a way to share data (state) between multiple components

without passing props manually at every level.
 Think of it like a global storage for your app.

`
Why Do We Need Context API?

 Normally, we pass data from parent → child → grandchild using props.

 But in large applications, this can be difficult (called "prop drilling").
 Context API helps avoid this by providing data directly to any component that
needs it.
Steps to Create Context API

`
 Steps to Create Context API

eate Context: const MyContext = createContext();

ovide Data: <MyContext.Provider value={data}>{children}</MyContext.Pro

`
nsume Data: const data = useContext(MyContext);