What is React?
React is a JavaScript library used to build user interfaces (UI), especially for single-page applications (SPA).
It was created by Facebook (Meta).
In simple words:
React helps you build fast and interactive websites like Instagram, Facebook, Netflix, etc.
Why use React?
React is popular because:
- Fast performance (uses Virtual DOM)
- Reusable components (write once, use anywhere) *Easy state management *Builds modern web apps easily
- Huge community support
Example:
Instead of writing same button code again and again, React lets you create a Button component and reuse it everywhere.
What is Library and Framework?
Library:
*A library is a collection of pre-written code that you call when needed.
*You are in control.
Example:
React (UI library)
jQuery
*You decide when to use it.
Framework :
*A framework is a complete structure where the framework controls your code flow.
Framework is in control.
Example:
Angular
Django (Python framework)
Difference between Library and Framework
| Feature | Library | Framework |
|---|---|---|
| Control | You control | Framework controls |
| Flexibility | High | Less flexible |
| Usage | Specific task | Full application structure |
| Example | React | Angular |
What is SPA ?
*SPA (Single Page Application)
*A SPA loads only ONE HTML page and updates content dynamically.
Example:
Gmail
Facebook
Instagram
How it works:
*Page does NOT reload
*Only content changes
*Faster user experience
MPA (Multi Page Application)?
A MPA loads a new page every time you click something.
Example:
Amazon
Traditional websites
How it works:
*Every click loads a new HTML page
*Full page refresh happens
*Slower compared to SPA
SPA vs MPA ?
| Feature | SPA | MPA |
|---|---|---|
| Pages | One page | Multiple pages |
| Speed | Fast | Slower |
| Reload | No reload | Full reload |
| Example | React apps | Traditional websites |
What is Create React App (CRA)?
*Create React App (CRA) is a tool to set up a React project quickly.
Command:
npx create-react-app my-app
Problem:
- Slow startup *Heavy build system *CRA is now less popular.
What is Vite?
*Vite is a modern build tool for React (and other frameworks).
*It is much faster than CRA.
Why Vite is popular:
*Very fast startup
*Instant hot reload
*Lightweight setup
*Better developer experience.
Command:
npm create vite@latest my-app
Learning Recap
*React = UI library for building web apps
*Library = you control flow
*Framework = full structure controls you
*SPA = single page, no reload
*MPA = multiple pages, reload happens
*CRA = old React setup tool
*Vite = modern, fast React tool
What is Node.js?
Node.js is a JavaScript runtime environment.
Node.js allows you to run JavaScript outside the browser (like in your computer terminal).
JavaScript runs only in the browser (Chrome, Firefox)
JavaScript can run on your system like Python or Java.
Why was Node.js created?
Before Node.js:
*JavaScript was only used for frontend (browser)
After Node.js:
*JavaScript can be used for backend, tools, servers, build systems.
Why Node.js is needed for React?
React does NOT run directly in the browser during development in raw form.
React code needs to be:
compiled
bundled
optimized
That’s where Node.js comes in.
Main reasons Node.js is needed for React:
*Package Manager (npm / npx)
*Node.js comes with npm (Node Package Manager).
React needs npm to install libraries like:
react
react-dom
vite
Example:
npm install react
Without Node.js → no npm → no React setup.
Top comments (0)