REACT JS
INTRODUTION OF REACT JS
What is [Link]?
[Link] (or simply React) is a JavaScript library developed by
Facebook for building user interfaces (UI), especially for single-page
applications (SPAs).
It allows developers to create reusable UI components that
efficiently update and render when data changes.
INTRODUTION OF REACT JS
WHY REACT??
Before React, developers used libraries like jQuery or frameworks like
AngularJS, which manipulated the DOM directly — causing
performance issues and complex codebases for large applications.
React solved these problems by:
Introducing a Virtual DOM for faster rendering.
Encouraging component-based architecture.
Supporting unidirectional data flow for predictable behavior.
Allowing developers to use JSX, which blends HTML and JavaScript
seamlessly.
INTRODUTION OF REACT JS
KEY CONCEPTS IN REACT JS
COMPONENTS
React applications are built from components
— independent, reusable pieces of code.
Components can be functional or class-
based. Each component manages its own
state and defines how the UI should look.
Example: JSX
INTRODUTION OF REACT JS
KEY CONCEPTS IN REACT JS
JSX(Javascript XML)
JSX allows you to write HTML-like syntax
directly inside JavaScript.
It makes the code more readable and
expressive.
Example: JSX
const element = <h1>Hello, World!</h1>;
INTRODUTION OF REACT JS
KEY CONCEPTS IN REACT JS
Virtual DOM
The Virtual DOM is a lightweight in-memory copy
of the real DOM.
When the app state changes, React first updates
the Virtual DOM, compares it to the previous
version (a process called diffing), and then
updates only the changed elements in the real
DOM.
This makes UI updates fast and efficient.
INTRODUTION OF REACT JS
KEY CONCEPTS IN REACT JS
State and Prop
State: Data that belongs to a specific
component and can change over time. State
manages the dynamic data.
State is in control of same component and it is
dynamic.
Props(Properties): Read-only data passed from a
parent component to a child component. That
means child component can’t change that
data.
Prop is static and in parent’s control.
INTRODUTION OF REACT JS
KEY CONCEPTS IN REACT JS
State and Properties
INTRODUTION OF REACT JS
KEY CONCEPTS IN REACT JS
State and Properties
Feature State Props
Managed within the
Ownership Passed from parent to child
component
Mutable – can be changed Immutable – cannot be
Mutability
using setState / useState modified by child
Used to manage dynamic
Usage Used to pass data or functions
data
Causes component re-render Only re-renders when parent
Update Triggers
when changed sends new props
Component’s personal
Analogy Component’s external inputs
memory
INTRODUTION OF REACT JS
KEY CONCEPTS IN REACT JS
Lifecycle Methods (in Class Components)
React components go through different phases:
Mounting – Component is created and inserted into the DOM.
Updating – Component is re-rendered when data changes.
Unmounting – Component is removed from the DOM.
Common lifecycle methods:
componentDidMount()
componentDidUpdate()
componentWillUnmount()
INTRODUTION OF REACT JS
KEY CONCEPTS IN REACT JS
Lifecycle Methods (in Class Components)
componentDidMount()
Definition:
This method is called immediately after the component is mounted (inserted) into
the DOM.
It runs only once in the component’s lifecycle.
Purpose:
To perform side effects such as:
Fetching data from an API
Starting timers
Setting up subscriptions
Manipulating the DOM (if needed)
INTRODUTION OF REACT JS
KEY CONCEPTS IN REACT JS
Lifecycle Methods (in Class Components)
componentDidMount()
INTRODUTION OF REACT JS
KEY CONCEPTS IN REACT JS
Lifecycle Methods (in Class Components)
componentDidUpdate(prevProps, prevState)
Definition:
This method is called immediately after an update occurs — when the
component’s state or props change.
It runs every time the component re-renders (except for the initial render).
Purpose:
To perform actions after the component updates, such as:
Reacting to prop or state changes
Fetching new data when inputs change
Updating the DOM based on updated values
INTRODUTION OF REACT JS
KEY CONCEPTS IN REACT JS
Lifecycle Methods (in Class Components)
componentDidUpdate(prevProps, prevState)
Definition:
This method is called immediately after an update occurs — when the
component’s state or props change.
It runs every time the component re-renders (except for the initial render).
Purpose:
To perform actions after the component updates, such as:
Reacting to prop or state changes
Fetching new data when inputs change
Updating the DOM based on updated values
INTRODUTION OF REACT JS
KEY CONCEPTS IN REACT JS
Lifecycle Methods (in Class Components)
componentDidUpdate(prevProps, prevState)
INTRODUTION OF REACT JS
KEY CONCEPTS IN REACT JS
Lifecycle Methods (in Class Components)
componentWillUnmount()
Definition:
This method is called just before a component is removed from the DOM.
Purpose:
Used for cleanup operations, such as:
Clearing timers or intervals
Removing event listeners
Canceling API requests
Cleaning up subscriptions
INTRODUTION OF REACT JS
INTRODUTION OF REACT JS
[Link] Features
Introduction to [Link]
[Link] is an open-source
JavaScript library developed by
Meta (Facebook) for building user
interfaces, especially for single-
page applications (SPAs). It
enables developers to create
reusable UI components.
1. Component-Based Architecture
React applications are built from
small, reusable components.
- Each component has its own
logic and controls a portion of the
UI.
- Components can be nested
and reused throughout the app.
2. Virtual DOM
React uses a Virtual DOM for
efficient rendering.
- It updates only the parts of
the real DOM that change.
- This improves performance
and reduces rendering time.
3. JSX (JavaScript XML)
JSX allows developers to write
HTML-like syntax inside JavaScript
code.
- Increases readability and
maintainability.
- Example: const element =
<h1>Hello React!</h1>;
4. Unidirectional Data Flow
Data in React flows in one
direction — from parent to child
components.
- Makes applications easier to
understand and debug.
- Ensures predictable state
management.
5. React Hooks
Hooks allow the use of state and
lifecycle methods in functional
components.
- Common hooks: useState,
useEffect, useContext.
- Simplifies code and promotes
cleaner design.
6. Declarative UI
React uses a declarative
approach for building UIs.
- Developers describe how the
UI should look.
- React updates the UI
automatically when the data
changes.
7. React Ecosystem and Tools
React can be integrated with many
libraries and tools:
- React Router for navigation.
- Redux or Context API for state
management.
- [Link] for server-side rendering.
- Material UI or Tailwind CSS for styling.
Advantages of [Link]
Fast rendering using Virtual DOM.
Reusable components save time.
Strong community support.
Flexible and easy to integrate with
other libraries.
Cross-platform development using
React Native.
Creating a Hello
World App using
[Link]
STEP-BY-STEP GUIDE WITH EXAMPLE CODE
Introduction
[Link] is a popular
JavaScript library for building
dynamic user interfaces.
In this presentation, we will
create a simple 'Hello World'
app step by step.
Step 1: Install [Link] and npm
React requires [Link] and npm.
1.
2. To check if [Link] is installed:
node -v
npm -v
3. Download [Link] from:
[Link]
Step 2: Create React App
Use Create React App to set up your
project quickly:
Command:
npx create-react-app hello-world
Thiscommand sets up a new React
project with all dependencies.
Step 3: Navigate and Start the App
1. Move into the project folder:
cd hello-world
2.
Start the development server:
npm start
Your app runs on [Link]
Step 4: Edit [Link]
Open src/[Link] and replace its content with:
import React from 'react';
function App() {
return (
<div>
<h1>Hello, World!</h1>
<p>Welcome to [Link] </p>
</div>
);
}
export default App;
Step 5: How It Works
• React renders the App component inside 'root' div in [Link].
Example: src/[Link]
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root =
[Link]([Link]('root'));
[Link](<App />);
Step 6: Output
When you run npm start, your browser will display:
Hello, World!
Welcome to [Link]
React automatically reloads when you save changes.
Step 7: Folder Structure Overview
hello-world/
├── node_modules/ → Dependencies
├── public/ → [Link]
├── src/ → [Link], [Link]
└── [Link] → Project configuration
Summary
Steps to Create Hello World App:
1. Install [Link] and npm
2. Create app using Create React App
3. Navigate and start project
4. Edit [Link] to show Hello World
5. View the output in browser
React makes UI development fast, modular, and efficient.
Introduction to JSX
The Syntax Extension for React
By: Your Name
Course: Web Development / [Link]
What is JSX?
• JSX stands for JavaScript XML
• Allows writing HTML-like syntax in JavaScript
• Easier to create React elements
• Commonly used though optional
Example:
const element = <h1>Hello, world!</h1>;
Why Use JSX?
• Clean and readable syntax
• Makes UI development intuitive
• Helps visualize component structure
• Compiled by Babel
JSX → JavaScript:
const element = <h1>Hello, world!</h1>;
// Compiles to:
[Link]('h1', null, 'Hello, world!');
Embedding Expressions in JSX
Use JavaScript expressions inside {}
Example:
const name = "TE B";
const element = <h1>Hello, {name}!</h1>;
Output: Hello, TE B!
JSX Attributes
•Use HTML-like attributes with camelCase
naming
Example:
const element = <img src='[Link]' alt='React
Logo' />;
• Use className instead of class
JSX with Conditional Rendering
• Embed conditional logic inside JSX
Example:
const isLoggedIn = true;
const message = <h2>{isLoggedIn ? 'Welcome Back!'
: 'Please Log In'}</h2>;
JSX with Lists
• Use map() to render lists dynamically
Example:
const
items = ['React', 'JSX',
'Components'];
const list = (<ul>{[Link](item =>
<li>{item}</li>)}</ul>);
JSX Must Have One Parent Element
• JSX elements must return a single parent element
• Use <div> or <[Link]>
Example:
return (
<div>
<h1>Hello</h1>
<p>Welcome to React!</p>
</div>
);
JSX Prevents Injection Attacks
• JSX escapes values before rendering
• Ensures safety from XSS attacks
Example:
const userInput = "<img src=x
onerror=alert('hack!') />";
const element = <p>{userInput}</p>; // Safe!
JSX vs HTML
Feature | JSX | HTML
---------|------|------
Syntax | JavaScript-based | Markup language
Attributes | camelCase | lowercase
Dynamic Values | { } for JS | Not possible
Compilation | Needs Babel | Direct
interpretation
Advantages of JSX
Easierto read and write
Component structure is clear
Prevents XSS by default
Integrates with JS logic
Summary
• JSX is a syntax extension for JavaScript
• Combines HTML + JS power
• Must be compiled using Babel
• Simplifies UI creation in React apps
Example React Component with
JSX
function Welcome(props) {
return <h1>Hello, {[Link]}</h1>;
}
const element = <Welcome name='Kapil' />;
[Link](element, [Link]('root'));
References
• React Official Docs - JSX: [Link]
• Babel Compiler: [Link]
• MDN Web Docs - JSX: [Link]