What is React?
React is a front-end JavaScript library.
React was developed by the Facebook Software Engineer Jordan Walke.
React is also known as React.js or ReactJS.
React is a tool for building UI components.
How does React Work?
React creates a VIRTUAL DOM in memory.
React only changes what needs to be changed!
React Dom vs JS DOM:
| Feature | JavaScript DOM (Browser DOM) | React DOM |
|---|---|---|
| Definition | Direct representation of the HTML structure in the browser. | React’s virtual representation of the DOM. |
| Nature | Real, live DOM nodes you see in the browser. | Abstracted, virtual DOM created by React. |
| Owner | Controlled by the browser (via JS APIs). | Controlled by the React library. |
Single Page Application (SPA)
Definition:
An SPA is a web application that loads a single HTML page and dynamically updates content without refreshing the entire page.
Examples: Gmail, Google Maps, Facebook
Multi Page Application (MPA)
Definition:
An MPA is a traditional web application where each action or page load fetches a new HTML page from the server.
Examples: Amazon, eBay, Wikipedia
Comparison Table:
| Feature | SPA | MPA |
|---|---|---|
| Page Reloads | No (dynamic update) | Yes (new HTML for each page) |
| Speed | Fast after first load | Slower, due to reloads |
| SEO | Harder (without SSR/Prerendering) | Easier |
| User Experience | Smooth, app-like | Traditional, less dynamic |
| Development | More JS-focused (React, Vue, etc.) | Backend-focused (PHP, JSP, etc.) |
| Example | Facebook, Twitter | Amazon, Wikipedia |
Step 1: Install create-react-app:
npx create-react-app demo
- npx runs a package without installing it globally.
- demo is your project folder name.
Step 2: Move into your project and start the server:
cd demo
npm start
npm:
- npm stands for Node Package Manager.
- A tool to install packages (like React).
- npm is like an app store for your React project.
Purpose: Used to install, manage, and run scripts from packages in your Node.js projects.
Common commands:
npm install <package> — installs a package locally.
npm install -g <package> — installs a package globally.
npm run <script> — runs a script defined in your package.json.
npx:
- npx is a tool that comes with npm.
- Purpose: Runs Node packages without installing them globally or locally.
- How it works: Downloads and executes a package on the fly, or runs a package from your local node_modules/.bin if available.
- When to use: Great for running CLI tools once or testing packages without polluting your global installs.
- We commonly use npx to create a new React app:
npx create-react-app demo
JSX:
- JSX stands for JavaScript XML.
- JSX stands for JavaScript XML.
- JSX allows us to write HTML in React.
- JSX makes it easier to write and add HTML in React.
- JSX converts HTML tags into react elements.
- With JSX you can write expressions inside curly braces { }.
- It is a syntax extension for JavaScript that lets you write HTML inside JavaScript — mainly used in React to describe UI components.
Top comments (0)