React: The Magic Behind Fast UIs

If you’ve spent any time exploring modern web development, you’ve almost certainly heard of React. Created by Meta back in 2013, React has become one of the most popular JavaScript library for building user interfaces.

And whenever React comes up, there’s always this question:
👉 Is React a library or a framework?

Well, React is actually a library, not a framework. A framework usually comes with strict rules about how you must structure your code and folders. React doesn’t force any of that. It gives you the freedom to organize your project however you like, which means teams can set things up in a way that best fits their workflow.

Of course, React is often used along with other libraries to handle things like routing or state management, which together make it feel almost like a complete framework. But at its core, React is a flexible, lightweight library focused on building user interfaces.

React was created to help developers build powerful single-page applications (SPAs) — apps that load once and then dynamically update as you interact with them. The main goals behind React were to keep things easy to maintain, make code reusable, and ensure the app stays fast and responsive, even as it grows bigger.

In this blog, we’ll cover:

• How React’s Virtual DOM differs from the traditional browser DOM, and why it matters.

• What JSX is and how it lets you write HTML-like code directly in JavaScript.

• A quick, step-by-step guide to setting up a basic React app.

• And we’ll visualize how React updates your UI efficiently.

💡 Traditional DOM vs Virtual DOM

The Traditional Or Real DOM

The DOM, or Document Object Model, is a way of representing a web page as a tree-like structure. Each node in this tree corresponds to an element on the page — like a paragraph, a button, or a div.

The DOM acts as an interface that lets programming languages (like JavaScript) access, modify, and update the content and structure of a web page. Whenever you click a button that adds new content or changes styles, it’s usually the DOM that’s being updated behind the scenes.

But here’s the catch:

• Updating the real DOM can be slow and expensive, especially when lots of changes happen close together.

• Even if you make a small change, like updating the text inside a single button, the browser might have to traverse and update the entire DOM tree.

Virtual DOM

React solved this problem by introducing the concept of a Virtual DOM, often called VDOM.Instead of directly updating the real DOM every time something changes, React keeps a lightweight copy of the DOM in memory. When your data changes, React updates this Virtual DOM first. It then figures out exactly what parts of the real DOM actually need to change, and only updates those specific elements — avoiding a full page re-render. Behind the scene it uses a diffing algorithm to figure out the changes.

Here’s how it works:

• When you update the UI — for example, by opening a dropdown menu — React first updates this change in the Virtual DOM (VDOM).

• Next, React’s diffing algorithm runs. It compares the new Virtual DOM with the previous Virtual DOM to figure out exactly what has changed.

  Coming back to our example — when React compares the two Virtual DOMs, it spots that the dropdown needs to be rendered.

• Once React knows the differences, it updates only those specific parts of the real DOM. In this case, it updates just the section where the dropdown exists. This means the entire page doesn’t have to re-render, keeping everything fast and efficient.

💡 Understanding JSX

Have you ever noticed, when you first looked at React code, that it seemed like HTML was written right inside JavaScript? That’s not actually HTML — it’s something called JSX.

JSX stands for JavaScript XML. It’s a special syntax that allows you to write HTML-like code directly inside your JavaScript files.

return (
    <div>
      <h1>Hello</h1>
    </div>
  );

Why Use JSX :-

1️⃣ Enhanced Readability and Maintainability - JSX offers us a more cleaner and intuitive way to define UI
structure compared to React.createElement(). It’s the same as HTML or closely resembles it, so it is very easy to visualize and maintain the component structure.

2️⃣ Component Composition - JSX enables us to build reusable components, which leads us to create complex UI’s in a cleaner and more optimised way.

3️⃣ Dynamic Content Rendering - We can render components or content dynamically based on conditions using JavaScript by embedding expressions inside curly braces {}

4️⃣ Tight Integration with JavaScript - JSX is just a wrapper over JavaScript, so we can use all of JavaScript’s power — loops, conditionals, and more — right inside our components.

5️⃣ Optimized Rendering - It is JSX — obviously your browser doesn’t understand it. It is transpiled (by Babel) into efficient JavaScript calls to React.createElement, ensuring optimized updates and compatibility across browsers.

🚀 Setting Up a Basic React App

🔧 Step-by-Step Setup Guide

1️⃣ . Install Node.js & npm
React relies on Node.js and npm.

• ✅ Download from nodejs.org

• ✅ Verify installation:

• ✅ Just to verify if it’s installed correctly or not, run these commands in terminal

    node -v 
    npm -v
  

2️⃣ . Create a New React App

Previously, we used commands like create-react-app to set up React projects. But it’s now considered outdated, and React’s official documentation recommends using bundlers like Vite to create React apps instead.

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

When you run these commands, it will create a basic React app named my-app. If you want to create and configure your app yourself, you can run:

npm create vite@latest

without any flags. It will prompt you with questions like:

• Project name: my-custom-app

• Select a framework: React, Vue, Svelte, Vanilla, etc.

• Select a variant: JavaScript or TypeScript

Just answer according to your needs, and Vite will scaffold the project for you.

3️⃣ Project Structure

When you create a new React app with Vite, your project will look something like this:

my-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md

### 📂 Project Folder Structure

- 📁 **`node_modules/`** – Keeps all the packages your app needs. You don’t touch this folder.
- 📁 **`public/`** – Holds static files like images or icons that will be copied as-it-is when you build your app.
- 📁 **`src/`** – This is where you write all your React code and components.
- 📄 **`index.html`** – The main HTML page that your React app gets attached to.
- 📄 **`main.jsx`** – The starting point of your app. It puts your React app into the HTML page.
- 📄 **`App.jsx`** – The main React component where you build your app’s UI.
- 📄 **`vite.config.js`** – Settings file for Vite. Helps customize how your app runs and builds.
- 📄 **`package.json`** – Lists all the packages your app uses and scripts to run it.
- 📄 **`.gitignore`** – Tells Git which files or folders not to track.
- 📄 **`README.md`** – A simple file to explain what your project is about.

Conclusion

• You’ve set up a modern React app with Vite.

• Learned about React, the Virtual DOM, JSX, and how your project is structured.

🎯 Next:
We’ll dive deeper into how React actually renders UI and manages updates by building a simple app from scratch using CDN scripts — no build tools!