component-based JavaScript library in react.pptx

React JS
ReactJS is a component-based JavaScript
library used to build dynamic and interactive
user interfaces.
01

React JS
02
It simplifies the creation of single-page applications (SPAs) with a focus on
performance and maintainability.
 It is developed and by Facebook & now maintained by community developer.
 Uses a virtual DOM for faster updates.
 Supports a declarative approach to designing UI components.
 Ensures better application control with one-way data binding.

What is react component ?
03
 components are the building blocks of a React application
 A component is essentially a reusable, self-contained piece of UI.
 React allows you to break down a complex UI into smaller, manageable pieces
 React offers two main types of components: functional components and class
components.

First react project using vite
05
 Vite is a modern frontend build tool that provides a faster development
experience & development server experience for modern web projects .
npm create vite@latest

Why vite ?
07
 Vite is a fast, modern build tool with Hot Module Replacement features
created by the founder of Vue.js Evan You ,
 designed for optimized development and production workflows.
Top Reasons to Use Vite
⚡ 1. Ultra-Fast Development Server
 ite uses native ES modules to serve files directly to the browser.

Why vite ?
08
 No bundling during development = instant startup.
 Changes in code are reflected almost instantly with Hot Module Replacement
(HMR).
⚡ 1. Uses Rollup under the hood for efficient bundling.
 Automatically splits code, removes unused code (tree-shaking), and minifies output.
📦 2. Optimized Production Build

Why vite ?
09
🚀 3. Out-of-the-Box Modern Features
 ES6+ support, TypeScript, JSX, CSS modules, PostCSS, and more — no extra
config needed.
 Built-in support for .env files, dynamic imports, and asset handling.
🎯 4. Minimal Config & Easy Setup
 Create a working project in seconds using:
npm create vite@latest

Why vite ?
10
💡 5. Great DX (Developer Experience)
 Cleaner error messages.
 Fast feedback loop = higher productivity.
 Plugins and integrations are simpler.
🧩 6. Framework Agnostic, But Optimized
 Works great with Vue 3, React, Svelte, Lit, Solid, and even plain JavaScript.
 Official templates for each framework.

Why vite ?
11
🔄 7. Fast Refresh & HMR
 When you save a file, only the module that changed is updated in the browser.
 This leads to a smoother and faster dev workflow compared to traditional
bundlers.
🌍 8. Strong Community & Ecosystem
 Backed by Evan You (Vue’s creator).
 Active plugin ecosystem.
 Popular among frontend frameworks and open source tools.

Run React Project
12
npm run dev npx vite
OR
For build
npm run build npx vite build
OR

vite.config.js
13
npm run dev npx vite
OR
For build
npm run build npx vite build
OR

React Project Structure
14
Distribution Node Modules
Public Src
main.jsx node_modules
.gitignore App.jsx

useRef Hook
15
built-in React Hook that returns a mutable reference object (ref) that persists
across renders
Accessing and manipulating DOM elements without triggering re-renders.
Persisting values across renders without causing re-renders.
Storing previous state values to compare changes between renders
Optimizing performance by avoiding unnecessary state updates

useRef Hook Working With Attribute
18

useRef Working With Input Element
19

[Hook] useRef Working With CSS Class
20

[Hook] useRef Working With Persisted Mutable Property
21
The value of mutable property is only
updated
component is not re-rendered

[Hook] useRef Caching Expensive Computation
22
useRef holds a persistent value that survives across renders
but doesn’t cause re-renders when updated
When can use it
 When you need to re-use result multiple times without re-rendering
 Cache expensive computations
 Store previous values
 Avoid recalculating something unnecessarily
 Preventing reinitialization of complex objects
Where can use it
 For API Calling
 Avoiding duplicate form submissions

[Hook] useRef Caching Expensive Computation
23

If state change occure then re-render the component
24
The React useState Hook allows us to track state in a function component.
State generally refers to data or properties that need to be tracking in an application
When to Use useState
 We need a simple state management solution.
 We component has state that changes over time.
 The state does not require complex updates or dependencies.
[Hook] useState Understading Inside

25
State
Holds all data
view

26

27

[Hook] useState Working With Immutable Object
28
Immutability : state can’t modify or mutate directly , but
previous object can be change by creating and replacing by new
object
React can’t track prevoius state if you change the state directly
React can’t re-render the component if you change the state directly

29

27

31
[Hook] useState Working With Immutable Array
 don't modify or mutate directly
 Make new copy using spread (...) operator
 use setState process for update

32

33
useState Spread Operator And Immutability Principle
Main
Object/Origi
nal DOM
Clone Object
1/Virtual
DOM1
Clone Object
3/Virtual
DOM3
Clone Object
2/Virtual DOM2
diffting
Reconciliation

34
 The spread operator (...) in React.js is a powerful feature that simplifies working with
arrays and objects, particularly when managing component state.
 Used to expand the iterable items , The three dots syntax (...) is used
 spread operator (...) is used for cloning, merging, or passing props, arrays, or objects
in a concise and readable way to a component
 React state should be immutable . It allows you to create shallow copies of arrays and
objects, making it easier to update them without directly modifying the original data.
 It’s a JavaScript feature, not unique to React

35
 The spread operator helps create new objects or arrays with the desired changes, leaving
the original data untouched.
 In React, it's crucial to maintain immutability of state.
 Directly modifying state can lead to unexpected behavior and hinder performance
optimizations.
Immutability:

36
[Hook] useEffect understanding arguments and uses
🔸 useEffect Has Two Arguments
1. Callback Function — () => { ... }
 This is the function that runs after the component renders.
 You perform your side effects here — like calling an API,
setting up intervals, adding event listeners, etc.
useEffect(() => {
console.log("Component mounted");
}, []);
📍 Only runs once, like componentDidMount.

37
🔸 useEffect Has Two Arguments
2. Dependency Array — [dep1, dep2, ...] (optional)
 This array tells React when to run the effect.
 React compares the current values with the previous ones
 If any dependency has changed, the effect runs again.
 If the array is empty ([]), the effect runs only once on mount.
 If you omit the array, the effect runs after every render.
useEffect(() => {
console.log("Count changed:");
}, [1]);
📍 Runs every time count changes.
useEffect : perform side effects in function components, like data fetching,
subscriptions, DOM manipulation, etc.

38

38
[Hook] useEffect understanding arguments and uses promises style
Api Call
Do’t go next step
If previous step fails

38
[Hook] useEffect understanding arguments and uses , async await process
Api Call
Do’t go next step
If previous step fails

component-based JavaScript library in react.pptx

More Related Content

Similar to component-based JavaScript library in react.pptx (20)

Recently uploaded (20)

component-based JavaScript library in react.pptx