Role of JavaScript Libraries and Frameworks
What are JavaScript Libraries?
A JavaScript library is a collection of pre-written code that helps developers perform specific
tasks more easily.
Example:
jQuery
React
Uses of Libraries:
DOM manipulation
Event handling
AJAX requests
Date and time management
Animations and effects
What are JavaScript Frameworks?
A JavaScript framework provides a complete structure and set of rules for building
applications.
Examples:
Angular
[Link]
Remix
Features of Frameworks:
Component-based architecture
Routing management
State management
Project structure guidelines
Built-in development tools
Difference Between Library and Framework
Library Framework
Provides specific functionality Provides complete application structure
Developer controls the flow Framework controls the flow
More flexible More opinionated and structured
Example: React, jQuery Example: Angular, [Link]
Why Are Libraries and Frameworks Used in the Industry?
1. Faster Development
Provide ready-made solutions for common problems.
Reduce development time.
2. Reusable Code
Developers can reuse existing components and functions instead of writing everything from
scratch.
3. Well-Tested and Reliable
Most popular libraries and frameworks are tested and maintained by large communities.
4. Better Code Quality
Encourage coding standards and best practices.
Produce cleaner and more maintainable code.
5. Scalability
Help build large and complex applications efficiently.
6. Community Support
Extensive documentation, tutorials, and third-party plugins are available.
7. Easier Maintenance
Structured code makes applications easier to update and debug.
Examples
Library Example: jQuery
Simplifies DOM manipulation.
Handles events and animations easily.
Popular in the early 2010s.
Framework Example: Angular
Provides a complete structure for application development.
Includes routing, state management, and services.
Single Page Applications (SPAs)
What is a Single Page Application (SPA)?
A Single Page Application (SPA) is a web application that loads a single HTML page and
updates content dynamically without reloading the entire page.
Examples: React, Angular, Vue applications.
How SPAs Work
Load one HTML page initially.
Use JavaScript to update content dynamically.
Fetch data asynchronously from the server.
Manipulate the DOM without full page refreshes.
Advantages of SPAs
Faster user experience after initial load.
Smooth and responsive interface.
Reduced server requests for page reloads.
Better user interaction and navigation.
Issues/Challenges of SPAs
1. Accessibility Issues
Screen readers may not detect dynamically updated content.
Users with disabilities may miss important updates.
2. Navigation and Browser History Problems
Back and forward buttons may not work correctly if routing is not handled properly.
Users may face navigation confusion.
3. Bookmarking Issues
Without proper URL routing, users cannot bookmark specific pages or views.
4. Refresh Problems
Refreshing the page may reset the application state.
Users may lose their current progress or view.
5. SEO Challenges
Search engines may have difficulty indexing JavaScript-generated content.
Pages may not appear properly in search results.
6. Performance Issues
Large JavaScript bundles increase initial loading time.
Users may see a blank screen while the application loads.
Slow internet connections can worsen the experience.
Solutions to SPA Issues
Accessibility
Use ARIA attributes.
Announce dynamic content changes to screen readers.
Navigation
Implement client-side routing properly.
Manage browser history using routing libraries.
SEO
Use Server-Side Rendering (SSR).
Use Pre-rendering.
Create SEO-friendly URLs.
Performance
Code splitting.
Lazy loading.
Asset optimization and caching.
React and Its Uses
What is React?
React is a JavaScript library used to build user interfaces (UI) for web applications.
It was developed and is maintained by Facebook (Meta).
React is one of the most popular and widely used libraries in modern web development.
What is React Commonly Used For?
React is used to build:
Single Page Applications (SPAs)
Dynamic websites
Interactive user interfaces
Dashboards
Social media applications
E-commerce websites
Key Features of React
1. Reusable Components
React allows developers to create reusable components such as:
Buttons
Cards
Navigation bars
User profiles (avatars)
These components can be reused throughout the application, reducing code duplication.
Example
A button component can be created once and used in multiple places.
2. Component-Based Architecture
Applications are built by combining small components together.
Components can be nested inside other components to create complex interfaces.
Example:
App
├── Navbar
├── Sidebar
├── Product Card
└── Footer
3. Virtual DOM
React uses a Virtual DOM instead of directly updating the real DOM.
Benefits:
Faster updates
Better performance
Improved user experience
4. State Management
State is the data that controls how a component looks and behaves.
React allows developers to:
Store data
Update data
Automatically update the UI when data changes
Example:
Counter value
User login status
Shopping cart items
5. Efficient Rendering
When data changes, React updates only the necessary parts of the page instead of reloading the
entire page.
This makes applications faster and more responsive.
Advantages of React
Reusable components
Faster performance with Virtual DOM
Easy state management
Large community support
Easy to maintain
High industry demand
React Components
What Are Components?
Components are the building blocks of a React application.
They help developers divide a large user interface into smaller, reusable, and manageable pieces.
Think of components like LEGO blocks. Small blocks are combined together to build a complete
application.
Why Are Components Important?
Components make applications:
Easier to develop
Easier to maintain
Reusable
More organized
Instead of writing the same code multiple times, a component can be created once and reused
anywhere.
Types of Components
1. Functional Components ✅ (Modern React)
These are simple JavaScript functions that return JSX.
Example:
function Welcome() {
return <h1>Hello World</h1>;
}
Modern React mainly uses functional components.
2. Class Components
These are older React components written using JavaScript classes.
Example:
class Welcome extends [Link] {
render() {
return <h1>Hello World</h1>;
}
}
Class components are still supported but are rarely used in new projects.
How Do Components Work?
A React component:
1. Receives data (Props)
2. Processes the data
3. Returns JSX
4. React renders the UI on the screen
Flow:
Data → Component → JSX → UI
What is JSX?
JSX (JavaScript XML) is a syntax used in React that looks similar to HTML.
Example:
const element = <h1>Hello React</h1>;
JSX makes it easier to create user interfaces in React.
Real-Life Example
A Facebook page can be divided into components:
Navbar Component
Profile Component
Post Component
Comment Component
Footer Component
Together, these components create the complete page.
Benefits of Components
Reusability
Write once and use many times.
Maintainability
Changes can be made in one component without affecting the entire application.
Better Organization
Code is easier to read and manage.
Scalability
Large applications become easier to build and expand.
Default and Named Exports in React
Why Do We Use Exports?
In React, applications are divided into multiple components and files.
To use a component in another file, we need to:
1. Export the component
2. Import the component where needed
This helps keep code organized and reusable.
1. Default Export
A file can have only ONE default export.
Example
[Link]
function Cat() {
return <h1>Mr. Whiskers</h1>;
}
export default Cat;
Importing
import Cat from "./Cat";
Important Points
Only one default export per file.
While importing, the name can be changed.
Example:
import MyCat from "./Cat";
This still works because default exports can be renamed during import.
2. Named Export
A file can have MULTIPLE named exports.
Example
export function Cat() {
return <h1>Mr. Whiskers</h1>;
}
export function Dog() {
return <h1>Buddy</h1>;
}
Importing
import { Cat, Dog } from "./Animals";
Important Points
Multiple named exports are allowed.
Must use curly braces {} when importing.
Import name must match the exported name.
Example:
✅ Correct
import { Cat } from "./Animals";
❌ Incorrect
import { MyCat } from "./Animals";
Unless you rename it explicitly:
import { Cat as MyCat } from "./Animals";
Default Export vs Named Export
Default Export Named Export
One per file Multiple per file
No curly braces needed Curly braces required
Can be renamed freely Must match export name
Default Export Named Export
export default Cat export function Cat()
Example Using Both
export default function Cat() {
return <h1>Cat</h1>;
}
export function Dog() {
return <h1>Dog</h1>;
}
Import:
import Cat, { Dog } from "./Animals";
Why Are Exports Important?
Reuse components across files
Keep code modular
Improve project organization
Make large React applications easier to manage
Quick Exam Summary
React uses exports and imports to share components between files. A default export allows one
component to be exported from a file and imported without curly braces. A named export allows
multiple components to be exported and must be imported using curly braces. These features
help organize and reuse components in React applications.
Vite and Setting Up a React Project
What is Vite?
Vite (pronounced "veet") is a modern build tool used to create and run web applications quickly.
The word Vite means "fast" in French.
It is commonly used to create:
React projects
Vue projects
Svelte projects
Vanilla JavaScript projects
Why Use Vite?
Advantages
Fast project setup
Fast development server
Lightweight configuration
Hot Module Replacement (HMR)
Minimal boilerplate code
Vite provides only the files needed to start a project.
Steps to Create a React Project Using Vite
Step 1: Install [Link]
Before using Vite, install [Link].
[Link] is required because it includes npm (Node Package Manager).
Step 2: Create a New React Project
Run:
npm create vite@latest my-react-app -- --template react
Explanation
npm create vite@latest → Creates a Vite project
my-react-app → Project name
--template react → Uses the React template
Step 3: Move into the Project Folder
cd my-react-app
This changes the current directory to the project folder.
Step 4: Install Dependencies
npm install
What Does This Do?
Installs all required packages such as:
React
ReactDOM
Other project dependencies
After installation, a node_modules folder is created.
Step 5: Run the Development Server
npm run dev
Open:
[Link]
You will see the React starter application.
Step 6: Start Coding
Go to:
src/[Link]
Modify the code, save it, and Vite will automatically update the browser.
Important Files and Folders
[Link]
A configuration file that contains:
Project name
Version
Dependencies
Scripts
Project settings
Example Scripts
{
"scripts": {
"dev": "vite",
"build": "vite build"
}
}
node_modules
Contains all installed packages and dependencies required by the project.
This folder is automatically created after running:
npm install
src Folder
Contains the main React source code.
Common files:
src
├── [Link]
├── [Link]
└── assets
Stopping the Server
To stop the development server:
CTRL + C
Quick Exam Summary
Vite is a fast build tool used to create modern web applications, including React projects. To
create a React project using Vite, use:
npm create vite@latest my-react-app -- --template react
Then run:
cd my-react-app
npm install
npm run dev
Vite provides a fast development environment, minimal configuration, and quick project setup.