Introduction to React: Building Reusable and Dynamic User Interfaces

R EAC T F RO M SCR ATCH • PART 1
React Basics
A JavaScript library for building fast, interactive, and reusable user interfaces.
What is React · Virtual DOM · Components · Real-world use
Prepared By: Kale J. N.

INTRODUCTION
What is React?
• React is a JavaScript library used to build user interfaces (UI) —
especially for web applications.
• Developed and maintained by Facebook (now Meta); first released
publicly in 2013.
• Focused on the ‘View’ layer — it renders what the user sees and
reacts to changes in data.
• Helps create fast, dynamic, and interactive web pages without full
page reloads.
SI MPLE DEFINITION
“React is a JavaScript library for building
reusable and interactive user-interface
components.”
{ }
Library, not a framework
React Basics Prepared By: Kale J. N. 2 / 16

MOTIVATION
Why Use React?
• Traditional web dev often means manipulating the HTML
DOM directly to change part of a page — messy and error-
prone.
• React lets developers split the UI into small, reusable
components instead.
• Each piece of the page becomes its own independent,
testable unit.
• Result: cleaner code, faster development, and easier long-
term maintenance.
A WEBSITE, BROKEN INTO COMPONENTS
Website
Header Navigation Bar
Sidebar Main Content
Product Card Footer
Each part is developed as its own independent React component.

CORE CONCEPT
React Is a Library, Not a Framework
• React focuses mainly on the UI layer — it renders
components to the screen.
• Unlike a full framework, it doesn’t ship built-in solutions
for routing, API calls, or state management.
• Instead, you add small, focused libraries for exactly what
you need.
React
↓
User Interface
↓
Components
↓
Web Application
COMMONLY PAIRED WITH
• Routing • API communication
• State management • Form handling
• Authentication

KEY FEATURE 1
Component-Based & Reusable
1 Component-Based
React apps are built using components — independent, self-
contained pieces of UI.
Two types: Functional components and Class components
(functional is the modern standard).
Components can be nested inside each other to build complex UIs
from simple parts.
function Welcome() {
return <h1>Welcome to React</h1>;
}
// Welcome is a React component
// -> reused anywhere it's needed
2 Reusable Components
Write a component once, then reuse it as many times as needed —
instead of repeating the same HTML.
ProductCard
↓ reused 4 times
Product 1 Product 2 Product 3 Product 4
Instead of writing the same HTML repeatedly, create one component and
reuse it everywhere you need that UI.

KEY FEATURE 2 & 3
JSX and the Virtual DOM
3 JSX
React uses JSX (JavaScript XML) — it lets you write HTML-like
syntax directly inside JavaScript. It looks like HTML, but it's actually
converted into JavaScript behind the scenes.
const element = <h1>Hello World</h1>;
A full deck dedicated to JSX comes up next in this course.
4 Virtual DOM
A lightweight, in-memory copy of the real DOM. When data changes,
React updates the Virtual DOM first, compares it to the previous version,
then updates only what actually changed in the real page.
Data Change
↓
Virtual DOM
↓
Compare Changes
↓
Update Required DOM

UNDER THE HOOD
Without React: Updating the DOM
• In plain JavaScript, when something changes in the UI,
entire chunks of the DOM are often re-rendered.
• Even a tiny update — like a number changing — can force
the browser to redraw far more than necessary.
• This repeated, broad re-rendering makes apps feel slower
as they grow in complexity.
<h1>Likes: 5</h1>
<button onclick="increaseLikes()">
Like
</button>
⚠ Clicking the button can redraw the whole <h1> element — and
sometimes more of the DOM around it — even though only the
number “5” needed to change.

UNDER THE HOOD
How React Handles It: Reconciliation
• React updates the Virtual DOM first — not the real page —
whenever state changes.
• It compares the new Virtual DOM with the previous version.
This comparison process is called Reconciliation.
• React finds exactly what changed, using an efficient diffing
algorithm.
• It then updates only that part of the real DOM, leaving
everything else untouched.
BEFORE CLICK
<h1>Likes: 5</h1>
AFTER CLICK
<h1>Likes: 6</h1>
Only the text node “5 → 6” is updated — the rest of the UI remains completely
untouched.
✓ Result: React updates the UI far more efficiently than manual
DOM manipulation — especially as apps grow larger and more
complex.

KEY FEATURE 4 & 5
Declarative UI & One-Way Data Flow
5 Declarative UI
Instead of writing step-by-step instructions for how to update the
page, you describe what the UI should look like for the current data
— React figures out the how.
function App() {
const name = "Jay";
return <h1>Hello {name}</h1>;
}
React automatically updates the UI whenever the underlying data changes.
6 One-Way Data Flow
Data generally flows in a single direction — from parent components
down to their children — which makes applications far easier to trace,
understand, and maintain.
Parent Component
↓ data / props
Child Component

PUTTING IT TOGETHER
A Basic React Example
function App() {
return (
<div>
<h1>Hello React</h1>
<p>Welcome to React Application</p>
</div>
);
}
export default App;
• function App() defines a component; return (...) is the UI it displays.
• export default App makes it available to other files.
COMPONENTS COMPOSE TOGETHER
function Header() {
return <h1>My Website</h1>;
}
function Footer() {
return <p>Copyright 2026</p>;
}
function App() {
return (
<>
<Header />
<Footer />
</>
);
}

ARCHITECTURE
React Application Structure
React Application
Components App main
Header Navbar Home Footer
Components hold the individual UI pieces; App combines them together; main.jsx renders App into the page.
The App component commonly acts as the main component that combines all others.

COMPARISON
React vs Traditional JavaScript
TRADITIONAL JAVASCRIPT
We directly manipulate the DOM to make changes:
document.getElementById("message")
.innerHTML = "Hello";
Every change requires manually finding elements and updating them
one by one — which gets complex fast in larger apps.
REACT
We describe the UI using components:
function App() {
return <h1>Hello</h1>;
}
React manages the UI updates for us — automatically, and only where
needed.

IN THE WILD
Real-World Examples of React
1
Facebook & Instagram
Built on React — React's original
home.
2
WhatsApp Web
Uses React to power its chat
interface.
3
Netflix
Uses React for smooth,
responsive UI updates.
4
Uber
Component-driven UIs built with
React.
React is widely used across modern front-end development, from social platforms to streaming and mobility apps.

OVERVIEW
Advantages & Applications
ADVANTAGES
• Easy to build reusable UI components
• Component-based development
• Efficient UI updates via the Virtual DOM
• JSX support for readable UI code
• Large ecosystem & strong community
• Great fit for Single Page Applications (SPAs)
• Integrates easily with APIs & backends
APPLICATIONS
• Websites & Single Page Applications
• Dashboards & admin panels
• E-commerce interfaces
• Social media platforms
• Educational applications
• Business web applications

REFERENCE
Basic React Terminology
TERM MEANING
React JavaScript library for building UI
Component Reusable part of the UI
JSX HTML-like syntax used inside JavaScript
Props Data passed from one component to another
State Data managed inside a component
Virtual DOM React's in-memory representation of the DOM
SPA Single Page Application
Vite Modern build/dev tool commonly used with React

K EY TAK EAWAYS
React, in Short
React
JavaScript Library
Component-Based
JSX
Reusable UI
Dynamic Web Applications
• React is a library — pair it with routing, state, and
data tools as needed.
• Focus on: Components, JSX, Virtual DOM, Props,
and State for a solid foundation.
• Next up: a deep dive into JSX syntax and rules.

Introduction to React: Building Reusable and Dynamic User Interfaces

Introduction to React: Building Reusable and Dynamic User Interfaces

More Related Content

Similar to Introduction to React: Building Reusable and Dynamic User Interfaces

More from Jaydeep Kale

Recently uploaded

Introduction to React: Building Reusable and Dynamic User Interfaces