React Basics

1. What is Node.js?

Node.js is a JavaScript runtime environment that allows JavaScript to run outside the browser.

Before Node.js, JavaScript could only run inside browsers like Chrome or Firefox.

Node.js is built on Google's V8 JavaScript Engine, the same engine used by Chrome.

It allows developers to create

• Backend servers
• APIs
• File systems
• Command line tools
• Real-time applications

without learning another language.

Real Example

When you type,

      npm create vite@latest

Node.js executes this command.

Without Node.js this command won't work.

Is Node.js a programming language? No.

Node.js is a runtime environment.

JavaScript is the programming language.

2. What is npm?

npm stands for Node Package Manager

It is the world's largest package manager.

It installs libraries and dependencies.

Why npm?

Instead of writing everything yourself,you install ready-made libraries.

Example

Instead of writing an HTTP client,
npm install axios

package.json

This file stores project information and dependencies.

package-lock.json

Stores exact versions ,dependency tree
to make sure every developer installs the same versions.

node_modules

• Contains all installed packages.
• Usually thousands of files.
• Never edit manually.

Difference between npm install and npm update?

install-Installs dependencies.
update-Updates installed packages

1. What is Vite?

Modern Build Tool
Vite is a modern frontend build tool used to create fast web applications with frameworks like React, Vue, and Svelte.

Fast Development Server
It uses native ES Modules (ESM), so the development server starts almost instantly without bundling the entire project first.

Hot Module Replacement (HMR)
It updates only the changed module in the browser without refreshing the whole page, making development faster.

Optimized Production Build
Vite uses Rollup to generate optimized, smaller, and production-ready files.

Easy to Use
It has a simple setup, minimal configuration, and is faster than older tools like Create React App (CRA).

*CRA *- Create React App Problems

• slow startup
• slow build
• slow refresh

HTML vs JSX

HTML -(HyperText Markup Language) is the standard markup language used to create and structure web pages. Browsers understand HTML directly.

JSX- (JavaScript XML) is a syntax extension for JavaScript used in React. It looks like HTML but is not HTML. JSX is converted into JavaScript by Babel before the browser can understand it.

What is Babel?

Babel is a JavaScript compiler (or transpiler) that converts modern JavaScript (ES6+) and JSX into JavaScript that browsers can understand.Because, Browsers do not understand JSX directly, and some older browsers do not support newer JavaScript features.

In React, Babel is mainly used to:

• Convert JSX into JavaScript.
• Convert modern JavaScript features into older JavaScript for better browser compatibility

Babel is commonly called a JavaScript compiler, but more specifically, it is a transpiler because it converts one version of JavaScript into another version of JavaScript