React

1. What is React?

React is an open-source JavaScript library developed by Facebook (Meta) for building rich, interactive User Interfaces (UIs). Instead of manipulating raw browser HTML elements step-by-step with vanilla JavaScript, React lets you structure applications as reusable, self-contained Components that manage their own state and update automatically when data changes.

2. Declarative vs Imperative UI Programming

The defining mental shift when learning React is moving from Imperative instructions (telling the browser how to do every single step) to Declarative descriptions (telling React what the UI should look like for a given state).

Side-by-Side Code Comparison

// 1. IMPERATIVE (Vanilla JS): Step-by-step manual DOM mutations
const counterBtn = document.createElement("button");
let count = 0;
counterBtn.textContent = `Clicks: ${count}`;

counterBtn.addEventListener("click", () => {
    count++;
    counterBtn.textContent = `Clicks: ${count}`; // Manual DOM sync
    if (count >= 10) {
        counterBtn.style.backgroundColor = "gold"; // Manual style sync
    }
});
document.body.appendChild(counterBtn);

// 2. DECLARATIVE (React): UI is a pure function of State: UI = f(state)
function CounterButton() {
    const [count, setCount] = React.useState(0);

    return (
        <button 
            onClick={() => setCount(count + 1)}
            style={{ backgroundColor: count >= 10 ? "gold" : "#6C4CE8", color: "#fff", padding: "8px 16px", borderRadius: "6px" }}
        >
            Clicks: {count}
        </button>
    );
}

3. The Virtual DOM & Reconciliation Engine

The Virtual DOM (VDOM) is a lightweight JavaScript representation of the actual DOM stored in memory. Every React element is simply a plain JavaScript object (e.g. { type: 'button', props: { children: 'Clicks: 0' } }).

How the Diffing Algorithm Works ($O(n)$ Heuristic):

• Two Elements of Different Types produce different trees: If <div> changes to <section>, React tears down the old subtree completely and builds a new one from scratch.
• Two Elements of the Same Type preserve DOM nodes: If <div className="before" title="stuff" /> becomes <div className="after" title="stuff" />, React keeps the exact same DOM node and only mutates the changed attribute (className).
• Keys distinguish list children: React uses the key prop to match children in the original tree with children in the subsequent tree, preventing expensive re-renders when list items are reordered.

4. Unidirectional Data Flow (One-Way Binding)

In React, data always flows in a single downward direction: from Parent components down to Child components via props.

5. Modern React Tooling: Vite, npm & Project Anatomy

In modern web development, Vite has replaced legacy bundlers like Create React App (CRA) due to its lightning-fast Native ES Modules (ESM) hot reloading and optimized Rollup production builds.

Standard Vite React Project Structure

my-react-app/
├── node_modules/         # Installed third-party packages
├── public/               # Static assets (favicon.ico, robots.txt)
├── src/                  # Application source code
│   ├── assets/           # Images, SVG icons, local fonts
│   ├── components/       # Reusable UI components (Navbar.jsx, Card.jsx)
│   ├── App.jsx           # Root layout & state orchestrator
│   ├── App.css           # Component styles
│   ├── main.jsx          # App entry point (mounts ReactDOM root)
│   └── index.css         # Global design tokens & CSS resets
├── index.html            # Single HTML page shell (<div id="root"></div>)
├── package.json          # Project metadata, scripts, and dependencies
└── vite.config.js        # Vite build tool configuration

How React Mounts to the Browser DOM (main.jsx)

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

// 1. Target the single container div in index.html
const rootElement = document.getElementById('root');

// 2. Create the concurrent React 18 Root
const root = ReactDOM.createRoot(rootElement);

// 3. Render the App component inside StrictMode
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

6. Top Interview Questions & Common Pitfalls

7. Hands-On Practice Challenges

Solidify your understanding of React's mental model and data transformations with these interactive coding exercises. Click "Solve Challenge" to open the full interactive code workspace!