Chapter 1

Introduction to React

©GyaniCode 1
 What is React
• React is a JavaScript library used for building user interfaces.
• It helps developers create fast and interactive web applications.
• React was developed by Facebook and launched in the year 2013.
• It focuses only on the view layer of the application.
• It is mostly used for building single-page applications.
• React allows the creation of reusable components.
• It uses a virtual DOM to increase performance.
• React makes web development more structured and efficient.

©GyaniCode 2
 React (Before Version 18)
• Old React followed a traditional approach before the introduction of major updates in version 18.
Key Features and Limitations
• Class components were used for creating the user interface.
• Lifecycle methods like componentDidMount and componentDidUpdate were used to handle
updates.
• There were no hooks, so reusing logic across components was difficult.
• Managing state was complex and often needed external libraries like Redux.
• Developers had to manually write code for performance improvements.
• For navigation and routing, tools like React Router had to be added separately.
• Updates and rendering were slower due to the older reconciliation system.
• React did not support concurrent rendering.
• Project setup needed more files and configurations, leading to more boilerplate code.
• Streaming data from the server was not well supported.
• JSX syntax felt confusing, especially for beginners.
• Handling side effects like data fetching or subscriptions required manual logic or lifecycle
methods. ©GyaniCode 3
 React After Version 18 and 19
Modern Features and Improvements
• Supports both Web and Native UI using the same codebase
• Introduced hooks for better code reuse and cleaner logic
• Encourages functional components over class components
• Supports Concurrent Rendering for smoother user experience
• Introduced Automatic Batching for fewer re-renders
• Streaming data from server is now possible using Suspense
• Improved server-side rendering with React Server Components
• Built-in support for lazy loading and code splitting
• Less boilerplate code required for setup and configuration
• Easier handling of side effects using useEffect and other hooks
• Better developer experience with modern tools and cleaner code
• Faster updates and rendering due to improved architecture
©GyaniCode 4
 Library vs. Framework vs. Language
Language
• JavaScript is the core programming language used for building web applications.
Library
• React is a library. You write the main code and call its functions when needed.
• It gives you more control but you have to set up extra tools like routing and state
management.
Framework
• Angular is a framework. It controls the structure and flow of your code.
• It provides everything built-in but follows strict rules and patterns.
Why React?
• You can use it with any backend like Node.js, Django, or Laravel.
• React focuses only on the user interface.
• You add only what you need, without being forced to follow a fixed structure like
Angular. ©GyaniCode 5
 React vs Angular vs Vue
React
• It is a library focused only on building the user interface.Vue
• Uses JavaScript with JSX syntax. • A progressive JavaScript framework.
• Easier to learn than Angular and uses
• Very flexible and lightweight.
simple HTML-based templates.
• You can choose your own tools for routing, state, etc. • Separates templates, logic, and
• Large community and rich ecosystem. styling for clarity.
• Easier to learn, especially for JavaScript beginners. • Has clear documentation and active
community support.
Angular • Best choice for small to medium
• A full front-end framework developed by Google. projects.
• Uses TypeScript by default.
• Has a heavy structure and follows strict coding patterns.
• Comes with built-in tools like routing, forms, and HTTP
services.
• Best suited for large and complex enterprise applications.

©GyaniCode 6
 Feature React Angular Vue
Type Library Full Framework Progressive Framework
Language JavaScript with JSX TypeScript JavaScript

Learning Curve Moderate (JSX syntax Steep (strict structure, Easy (simple template
needs practice) TypeScript) structure)

High (choose tools as Low (follows strict Medium (some structure,

Flexibility
needed) patterns) some flexibility)

Performance Uses Virtual DOM Uses Real DOM with Uses Virtual DOM
change detection

Structure Unopinionated, developer Opinionated, everything is Balanced between

controls setup built-in freedom and guidance

Use Case Best for interactive UI and Suitable for large Great for small to medium
SPAs enterprise apps projects

Community Very large, backed by Meta Strong, backed by Google Growing fast with active
(Facebook) support

Routing/Forms Needs third-party tools Built-in support Available via official

packages
Rich, many packages and
Ecosystem Complete toolset included Lightweight and focused
©GyaniCode 7
integrations
 What is SPA (Single Page Application)
• The application loads only one HTML page at the start.
• All changes happen within that single page.
• No need for full-page reloads while moving between sections.
• Navigation feels smooth and fast for the user.
• Content is updated dynamically using JavaScript.
• React is commonly used to build SPAs.
• APIs are used to fetch or send data without refreshing the page.
• Improves user experience and overall performance.
• Works well with Progressive Web Apps (PWAs) for offline support.
• Keeps frontend and backend code separate and clean.

©GyaniCode 8
 Building SPA Using Plain JavaScript
• When we build a Single Page Application using plain JavaScript
• We need to handle routing manually.
• Creating and managing components becomes difficult.
• DOM manipulation is slow and confusing.
• Code reusability is low.
• No fixed structure or rules to follow.
• Code becomes long and hard to maintain.
• Testing and debugging are more difficult.
• Performance reduces as the project grows.
JS Example
document.getElementById("app").innerHTML = "<h1>Welcome to React</h1>";
Manual DOM update like this leads to spaghetti code.
Difficult to maintain and scale. ©GyaniCode 9
 Building SPA Using React Approach
React Example
jsx
function App() {
return <h1>Hello Welcome to React</h1>;
}
• This is a React component.
• Clean and scalable structure.
• UI is built using reusable components like Lego blocks.
Core Advantages
• Uses Virtual DOM, so only changes are updated.
• Components can be reused across the application.
• State management makes dynamic content easy to handle.

©GyaniCode 10
 Why React is better for SPAs
• Routing is simple using React Router.
• UI is made of modular, reusable components.
• Fast updates using Virtual DOM.
• Code is well-structured and maintainable.
• Requires less code but gives more output.
• Smooth state management using hooks.
• Built-in tools help with debugging and testing.
• High performance even in large-scale applications.

©GyaniCode 11
 Real-life Example to Understand React
• Let us understand React using a simple bike showroom example.
• Imagine a showroom that sells multiple models of bikes.
• Each bike model is like a component in React.
• Once the company designs one bike model, it can reuse the same design to build
multiple bikes by just changing the color, engine capacity, or features.
• Similarly, in React, we create one component and use it multiple times by just
changing the data.
• If one part of a bike changes, the entire showroom does not need to be
redesigned.
• In the same way, if one component in React changes, React only updates that
specific part of the web page.
• This helps the application run faster and smoother.
• React works smartly, just like an efficient bike showroom that knows exactly what
to change and where, without disturbing everything else.
©GyaniCode 12
 Core Features of React
• Component-Based: Build UI using small, reusable parts
• JSX: Write HTML-like code inside JavaScript
• Virtual DOM: Faster updates and better performance
• One-Way Data Flow: Data flows from parent to child
• Hooks: Add logic in functional components
• React Router: Navigate pages without reload
• Context API: Share data across components
• Server-Side Rendering: Better SEO with tools like Next.js

©GyaniCode 13
 What is DOM?
• DOM stands for Document Object Model
• It represents the entire structure of a web page
• It is like a tree with elements like <div>, <p>, <h1> as branches
• Browser creates this tree from HTML
• JavaScript can change the DOM anytime (change text, color, add or remove
elements)
• Changing DOM directly can be slow when there are too many changes

©GyaniCode 14
 What is DOM?
• DOM stands for Document Object Model
• It represents the entire structure of a web page
• It is like a tree with elements like <div>, <p>, <h1> as branches
• Browser creates this tree from HTML
• JavaScript can change the DOM anytime (change text, color, add or remove
elements)
• Changing DOM directly can be slow when there are too many changes
What is Real DOM?
• Real DOM is the actual structure in the browser created from HTML
• It is very powerful but slow for frequent changes
• Every time we update something, the whole page might get re-rendered
• Updating Real DOM takes time and memory
• Example: Changing one text might reload 100 elements if not optimized
©GyaniCode 15
 What is Virtual DOM?
• Virtual DOM is a copy of Real DOM created inside memory
• It is a JavaScript object, not visible on the screen
• It is faster and lighter than Real DOM
• React uses Virtual DOM to increase performance
• When we change anything, React updates Virtual DOM first
• Then it compares old and new Virtual DOM (this is called diffing)
• React finds the exact changes and updates only those parts in Real DOM
• This makes websites faster and smoother
How Virtual DOM Works?
• Step 1: React creates a Virtual DOM copy when state changes.
• Step 2: Compares (diffing) new Virtual DOM with old one (Reconciliation).
• Step 3: Updates only the changed parts in Real DOM (Batch update).

©GyaniCode 16
Feature Real DOM Virtual DOM Shadow DOM
React or similar Browser (inside
Created by Browser
library components)
Fast (isolated
Slow for large
Speed Fast due to diffing small
updates
components)
In memory (JS Inside a web
Location In browser directly
object) component
Full page or big Only updated Only within
Re-rendering
sections parts shadow boundary
Normal HTML Web Components,
Used in React, Vue, etc.
pages LitElement, etc.

©GyaniCode 17
 Flow of Virtual DOM in React
• React renders UI using Virtual DOM
• User does some action (click, type, etc.)
• React updates Virtual DOM first
• React compares old and new Virtual DOM
• React finds what is changed
• React updates only that part in Real DOM
• Page looks updated but very fast
• User sees smooth and quick performance

©GyaniCode 18
 Why React uses Virtual DOM?
• To make web apps faster
• To reduce unnecessary work for browser
• To make UI updates smoother
• To manage complex changes easily
• To give better user experience
Why Virtual DOM is Faster?
• Minimizes direct Real DOM manipulations.
• Uses diffing algorithm to find differences.
• Updates in batches instead of frequent re-renders.

©GyaniCode 19
 Is DOM available in React 19?
• Yes, React 19 still uses Virtual DOM. But with improvements like:
• Better compiler for performance
• Async rendering with fewer delays
• Works well with new features like use() hook
• Still keeps Real DOM and Virtual DOM separate
• More efficient updates than previous versions
Shadow DOM
• Used in Web Components for encapsulation (hiding internal structure).
• Different from Virtual DOM (Virtual DOM is for performance, Shadow DOM for
scoping).

©GyaniCode 20
 Why React uses Virtual DOM?
• To make web apps faster
• To reduce unnecessary work for browser
• To make UI updates smoother
• To manage complex changes easily
• To give better user experience

©GyaniCode 21
 QnA
Why not update Real DOM directly every time?
Too slow, affects performance.

Is Virtual DOM a React feature?

Yes, but similar concepts exist in other frameworks (e.g., Vue).

Does Virtual DOM replace Real DOM?

No, it optimizes Real DOM updates.

©GyaniCode 22
Chapter 2
Setting Up React with Vite

©GyaniCode 23
Vite

©GyaniCode 24
 What is Vite
• Vite is a modern tool for building frontend web applications
• It is a build tool like Webpack, but faster and more modern
• It was created by Evan You, the creator of Vue.js
• Vite helps in starting a project quickly with minimum setup
• It provides a development server with fast hot reload
• It uses native ES modules in the browser during development
• Vite is written in JavaScript and powered by modern tools like Rollup and esbuild
• It is framework-agnostic, which means we can use it with React, Vue, Svelte, etc

©GyaniCode 25
 Why Vite
• Vite gives instant startup even for large projects
• It rebuilds only the changed code, not the entire app
• Traditional tools reload the full app and slow down development
• Vite gives blazing fast hot module replacement
• It reduces waiting time while coding, which saves developer’s time
• It uses latest browser features to avoid extra work
• The output build is optimized and lightweight
• It is easy to learn and integrates smoothly with most frontend frameworks

©GyaniCode 26
 Why not use only React CLI
• The traditional React CLI is based on Webpack
• Webpack can be slow in large apps and slow in development time
• It takes time to start the development server
• It reloads the full bundle for every change
• React CLI projects may feel heavy for beginners
• Sometimes React CLI needs complex configuration
• Vite is more modern and avoids these problems
• Vite gives a simpler and faster development experience compared to React CLI

©GyaniCode 27
 Why Vite with React
• React becomes even more powerful when used with Vite
• Vite gives fast feedback while coding React components
• Hot reloading in Vite works better and smoother than old methods
• React + Vite project setup is simpler and cleaner
• Vite supports React JSX and TypeScript out of the box
• It is easier to maintain large React projects with Vite
• React developers enjoy faster builds and faster updates
• Vite and React together give a modern frontend development experience

©GyaniCode 28
 Benefits of Vite for Tech Profectional and Teams
• They can focus on coding instead of setup
• Teams can save time in every build and reload
• It gives quick output, so learning becomes more enjoyable
• It supports all modern browsers without extra plugins
• Multiple team members can work easily in the same project
• Code changes appear almost instantly in the browser
• Less time wasted waiting for the app to reload
• Works well even in low-configuration laptops

©GyaniCode 29
 Key Features of Vite
• Lightning-fast cold starts for new projects
• Intelligent module caching and partial updates
• Built-in support for environment variables
• Optimized production build with Rollup
• Plugin system to add custom features
• Simple commands like npm run dev and npm run build
• Clear and readable folder structure
• Automatic support for JSX and CSS modules

©GyaniCode 30
 How Vite Works Behind the Scenes
• Vite starts a local server using native browser support
• It serves raw source files without bundling them
• During changes, it patches only the updated module
• This avoids rebuilding the full app like old tools
• For production, it bundles the app using Rollup
• It generates efficient, tree-shaken output
• Uses esbuild for fast transpiling
• Vite smartly switches between dev and production modes

©GyaniCode 31
Folder Structure of React + Vite Project

©GyaniCode 32
 Why Folder Structure is Important
• A proper folder structure makes the project easy to understand
• It helps students and developers to find files quickly
• Clean structure avoids confusion while adding more features
• It improves teamwork as everyone follows the same format
• Easy to debug and maintain code in the long run
• Ideal for both small and large projects
• Good structure supports reusability and scalability
• It creates a habit of professional coding practices

©GyaniCode 33
 Default Structure after Vite + React Setup
• After running the command to create the app, we get a structure like this:
my-react-app/
public/
src/
App.jsx
index.css
main.jsx
index.html
package.json
vite.config.js

©GyaniCode 34
 Explanation of Top-Level Files
index.html
• This is the main HTML file
• It contains one root div where React renders the full app
package.json
• This file stores the project name, version, dependencies, and scripts
vite.config.js
• This file contains configuration for the Vite build tool
• Mostly used for advanced settings
node_modules (auto-generated)
• It contains all packages installed using npm
.gitignore
• It tells Git which files to ignore
README.md
• A basic description of the project
• You can write your project details here
©GyaniCode 35
 Understanding the public Folder
• It stores static files like images, icons, and other assets
• Files inside this folder are not processed by Vite
• You can directly access these files in the browser
• Best place to store your logo or favicon
• You can keep robots.txt or manifest files here
• These files are copied as they are to the final build
• React will not recompile if you change files in public folder
• Keep only necessary items here to avoid confusion

©GyaniCode 36
 Understanding the src Folder
• This is the heart of the project. All coding happens here.
App.jsx
• This is the main component of the app
• Other components are imported and used here
main.jsx
• It is the entry point for React
• It connects App.jsx to the root div in index.html
index.css
• This is the global CSS file
• You can write your default styles here

• All your new components, pages, and assets go inside src

• You should create new folders like components, pages, assets, etc
• Keep all JavaScript, JSX, CSS and image files inside src only
• src folder should be clean and meaningful
• Follow naming conventions to keep things professional
©GyaniCode 37
 Recommended Custom Folder Structure (Clean Style)
src/
assets/ // images, videos, icons
components/ // reusable UI parts like Header, Button
pages/ // full pages like Home, About
App.jsx // main app component
main.jsx // entry point
index.css // global styling

This makes the project clean, readable, and scalable.

©GyaniCode 38
 Working Example of Vite + React
• Inside components, you can add Navbar.jsx, Footer.jsx, Button.jsx
• Inside pages, you can create files like Home.jsx, About.jsx, Contact.jsx
• Inside assets, you can store images like logo.png, banner.jpg
• You can also create folders like hooks, context, services as the app grows
• Keep file names meaningful and readable
• Use PascalCase for components like UserProfile.jsx
• Keep CSS files close to their component if needed
• Do not keep too many files in one place

©GyaniCode 39
 Flow of First React + Vite Application
1. You open your browser like Google Chrome.
2. You type the URL http://localhost:5173/ in the address bar.
3. You press the Enter key.
4. The browser sends a request to your local computer (localhost) on port 5173.
5. The Vite development server running on that port receives this request.
6. Vite checks your project and loads the index.html file.
7. Vite sends this index.html file to the browser.
8. Browser starts reading the HTML.
9. The HTML has a special <div id="root"></div> where your React app will be shown.
10. It also includes this line: <script type="module" src="/src/main.jsx">
11. Browser now asks Vite for the file main.jsx.
12. Vite reads and processes main.jsx, and sees that it imports App.jsx.
13. So Vite also loads App.jsx and prepares it.
©GyaniCode 40
 Flow of First React + Vite Application
14. Vite converts this modern code into a format that browsers understand.
15. Vite sends this processed JS code to the browser.
16. Now React starts working. It looks for the #root element in HTML.
17. It displays your React App component inside the root div.
18. React shows your UI on the screen using a virtual DOM and real DOM.
19. If you change any file, Vite updates it instantly using HMR (Hot Module
Replacement).
20. Your app works fast, smooth, and without reloading the whole page.

Browser Request -> Vite Server ->index.html -> main.jsx -> App.jsx -> JSX to
Virtual DOM -> Real DOM -> React Rendered

©GyaniCode 41
Chapter 3
Components

©GyaniCode 42
 Introduction to Components
• React is a component-based JavaScript library.
• Component is the heart of React application.
• It helps to build independent, reusable blocks.
• A complete UI is made using multiple small components.
• Components help in organizing code properly.
• A component has HTML for structure, CSS for style, and JSX/JS for logic.
• React encourages breaking UI into smaller pieces.
• Each piece works independently and can be reused.
• Component helps in reducing code duplication.
• Easy to test and maintain code.

©GyaniCode 43
 Two Types of Components in React
• There are two main types of components in React:
1. Class Component
2. Function Component
• Class component is the older style (legacy).
• Function component is the new modern way.
• React encourages using function components now.
• Function component is lightweight and easy to use.
• Class component uses ES6 classes.
• Function component uses plain functions.
• Hooks are used only in function components.
• You will rarely use class component now.
• We will focus only on function components in this chapter.

©GyaniCode 44
 What is a Function Component?
• A function component is just a JavaScript function.
• It returns a JSX (UI) element.
• Function name must start with uppercase.
• It should always return something.
• It should never return void.
• JSX is returned inside brackets ( ).
• Function component should return only one parent element.
• Code becomes clean and readable with function components.
• You can define function using function declaration or arrow syntax.
• This function can be exported and reused anywhere.

©GyaniCode 45
 Syntax of Function Component
function Welcome() {
return <h1>Hello Welcome to React</h1>;
}
• Function name is Welcome : capitalized.
• It returns a single JSX element : <h1>.
• JSX looks like HTML but is not.
• No semicolon is required after return JSX.
• Component name and file name should be same.
• Save this file as Welcome.js inside src folder.
• Export this component using export default Welcome;.

©GyaniCode 46
 Rules for Creating a Component
• Must be saved inside the src/ folder.
• File name should end with .js or .jsx.
• Function name and file name should match.
• Always use PascalCasing (e.g., LoginForm, UserCard).
• Function must return one parent JSX element.
• Always export the component using default export.
• You can only use JSX elements inside return.
• Avoid logic or loops directly inside return.
• Import component into main app file (App.js) to render.

©GyaniCode 47
 Valid and Invalid Returns
Valid
return (
<div>
<h1>Welcome</h1>
<p>This is Surendra's React App</p>
</div>
);
Invalid
return (
<h1>Hello</h1>
<p>World</p>
);
• JSX must have only one outer tag.
• Use <div> or React fragment (<> </>) to wrap.
• Helps in avoiding unexpected rendering errors.
©GyaniCode 48
 JSX Basics
• JSX means JavaScript + XML.
• It is not HTML, but looks like HTML.
• JSX makes UI easy to understand and write.
• JSX is converted to JavaScript code behind the scenes.
• You can write HTML-like code in JavaScript.
• JSX must return only one parent element.
• All tags must be closed properly.
• You can use JS logic inside JSX using {}.
• JSX is a core part of writing components.

©GyaniCode 49
 Writing JSX Properly
Valid JSX:
<img src="logo.png" alt="Logo" />
<input type="text" />

Invalid JSX:
<img>
<input>

• Every JSX tag must be closed properly.

• Use self-closing format for empty tags.
• JSX is strict, so small mistakes throw errors.

©GyaniCode 50
 Attributes in JSX
• JSX uses camelCase for attributes.
• Use className instead of class.
• htmlFor instead of for.

Example:
<img className="logo" />
<label htmlFor="name">Name</label>

• Some normal HTML attributes are not valid in JSX.

• Follow React-specific naming rules.
• Using wrong attributes causes error during build.

©GyaniCode 51
 Component Reusability
• Component can be used multiple times.
• Helps in DRY (Don't Repeat Yourself) coding.
• Example: You can use <Header /> on every page.
• Reusable components are like templates.
• It makes UI modular and scalable.
• Common examples:
• Header
• Footer
• Sidebar
• Button
• Image card
• Makes project clean and maintainable.

©GyaniCode 52
 Example of Multiple Components
function Header() {
return <h1>Welcome to CodeDais</h1>;
}
function Footer() {
return <p> ©2025 CodeDais. All rights reserved </p>;
}
function App() {
return (
<div>
<Header /> • Each component has its own file.
<Footer /> • Import and use them inside main App.
• This is how we build full layout.
</div>
);
}
©GyaniCode 53
 Arrow Function Components
const Welcome = () => {
return <h1>Hello, Priyanka</h1>;
};

• Arrow functions are short and modern.

• Easy to read and write.
• You can use either function declaration or arrow.
• Both are valid and behave the same.

©GyaniCode 54
 Component Export and Import
// Welcome.js
function Welcome() {
return <h1>Hello Jack</h1>;
}
export default Welcome;

// App.js
import Welcome from './Welcome';
• Every component must have default
function App() { export.
• To use, just import the function using file
return <Welcome />; path.
} • Don’t forget the relative path (./).

©GyaniCode 55
 Use of React Fragment
return (
<>
<h1>Priyanka is learning React</h1>
<p>From GyaniCode</p>
</>
);

• <></> is called React Fragment.

• Use it when you don't want to add extra <div>.
• It helps to return multiple elements without wrapper.

©GyaniCode 56
 Component Naming Conventions
• Always use PascalCase.
LoginForm -> valid
loginform -> Invalid
• File and function names should match.
• Helps in maintaining structure.
• Easy to understand and search in codebase.
• Consistent naming is professional practice.

©GyaniCode 57
 Why Use Components?
• Helps to break UI into pieces.
• Code becomes organized and easy to debug.
• Improves code reusability.
• Each component can be tested separately.
• Encourages modular design.
• Makes app development fast and scalable.
• You can manage big projects easily.
• Team members can work on separate components.

©GyaniCode 58
 Functional Components and Hooks
• Hooks work only in functional components.
Example hooks:
useState
useEffect
• These add state and logic inside simple functions.
• No need of class component anymore.
• Functional components with hooks = Modern React

©GyaniCode 59
 React.createElement Behind JSX
• const ele1 = <h1>Welcome</h1>;
• const ele2 = React.createElement("h1", null, "Welcome");

• JSX is just syntactic sugar.

What is syntactic sugar?
• Syntactic sugar refers to certain language features in programming that make the
code easier to read or write. It's like adding a bit of sweetness to your code syntax
to make it more pleasant to work with.(source : www.lenovo.com)
• Internally, it converts into React.createElement.
• JSX is easy to write and understand.
• Saves us from complex element creation code.

©GyaniCode 60
 Component Composition
• One component can contain another.
Example:
function Dashboard() {
return (
<div>
<Header />
<Sidebar />
<MainContent />
</div>
);
}
• This is called component composition.
• Makes your app structured like a tree.
• Root -> Branch -> Leaf like system.
©GyaniCode 61
 Summary
• Components are reusable JavaScript functions.
• They return JSX : looks like HTML.
• Always return only one JSX fragment.
• Use PascalCase for naming.
• Every component must be exported and imported.
• JSX is strict : tags must be closed.
• Component helps in breaking large UI.
• Write component using function or arrow function.
• Function components are the present and future of React.
Note : Learn component concept deeply : it is used everywhere.

©GyaniCode 62
©GyaniCode 63