Day 11: My First Day with ReactJS: Introduction, SPA, Virtual DOM, JSX, MAP, NPM & NPX

Today, I began learning ReactJS, and it has already changed the way I think about building websites. React is modern, fast, and component-based. Below is a summary of the key concepts I explored today:

What is ReactJS?

ReactJS is a JavaScript library created by Facebook for building user interfaces. It focuses on making UI development easy by breaking everything down into reusable components.

SPA (Single Page Application)

A Single Page Application (SPA) is a type of app that:

Loads only one HTML file initially.

Updates content dynamically without refreshing the entire page.

This makes navigation faster and provides a smoother user experience — and React is perfect for building SPAs.

DOM vs Virtual DOM

DOM (Document Object Model)

The DOM represents the structure of your HTML page. JavaScript can interact with and modify the DOM to update your content.

Virtual DOM

React uses a Virtual DOM — a lightweight copy of the real DOM.

When something changes in your app, React updates the Virtual DOM first.

It then compares it with the previous version (this is called diffing).

Only the parts that changed are updated in the real DOM.

This makes updates faster and more efficient.

JSX (JavaScript XML)

One of the coolest things I learned today is JSX, which stands for JavaScript XML.

JSX lets you write HTML-like code inside JavaScript.

It makes React code more readable and easy to write.

Under the hood, JSX is converted to regular JavaScript using React.createElement().

Example

const greeting = <h1>Hello, React!</h1>;

This looks like HTML, but it’s actually JavaScript! You can also insert dynamic values using curly braces:

const name = "John";
const greeting = <h1>Hello, {name}!</h1>;

NPM & NPX

NPM(Node Package Manager)

Used to install libraries and manage project dependencies.

NPX
Runs Node packages without installing them globally — great for tools like create-react-app.