Unit 1: Introduction to React

You describe what the user interface should look like for any given state, and React handles the tedious, error-prone mutations required to update the browser DOM automatically.

UIs are broken down into self-contained, independent, and reusable building blocks (buttons, navigation bars, modals, tables) that can be composed to build complex applications.

Data flows in a single downward direction: from parent components to child components via props. This makes application state predictable, reproducible, and easy to debug.

Knowledge of React transfers directly to mobile native applications (React Native for iOS and Android), desktop apps (Electron), and server-side rendered enterprise portals (Next.js).

A syntactic extension to JavaScript that allows developers to write HTML-like markup directly inside JavaScript files. JSX combines visual template layout with the full programmatic power of JavaScript (loops, conditions, expressions) within a single file.

An in-memory lightweight representation of the real browser DOM. React computes differences between UI states in memory and performs only the minimal necessary updates to the actual browser, guaranteeing rapid rendering.

Encapsulating HTML, CSS styling, and JavaScript logic together inside reusable functional components. Fosters clean separation of concerns based on functional domains rather than file extensions.

Introduced in React 16.8, Hooks (such as useState, useEffect, useMemo, and useCallback) allow functional components to manage local state, execute lifecycle side-effects, and extract reusable business logic without writing legacy ES6 classes.

The modern re-implementation of React's core algorithm. Fiber allows React to pause, abort, or prioritize rendering work across frames, ensuring the user interface remains responsive and smooth even during heavy state updates.

Whenever state changes, React calls the component function and produces a new Virtual DOM Tree—a lightweight JavaScript object tree mirroring the desired UI structure.

React's Reconciliation algorithm compares the new Virtual DOM tree against the previous Virtual DOM tree snapshot to identify exactly what changed.

React applies only the minimal calculated delta (the patch) to the Real browser DOM in a single batched operation, minimizing costly browser reflows.

You must write explicit step-by-step instructions telling the browser how to find DOM nodes, create elements, attach event listeners, and mutate inner text.

// Imperative: Manual DOM Manipulation
let count = 0;
const btn = document.getElementById("inc-btn");
const display = document.getElementById("count-display");

btn.addEventListener("click", () => {
  count += 1;
  // Manually update the DOM
  display.innerText = "Count: " + count;
  if (count > 10) {
    display.style.color = "red";
  }
});

Problem: As apps grow, UI state and DOM elements become desynchronized, leading to ghost bugs.

You declare state variables and describe what the UI should look like for that state: UI = f(state). When state updates, React handles the DOM updates automatically.

// Declarative: React handles DOM sync
import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p style={{ color: count > 10 ? "red" : "black" }}>
        Count: {count}
      </p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Advantage: Impossible for the display text to become out of sync with the underlying count variable.

Unlike traditional multi-page web sites with dozens of HTML files, a React SPA has only one index.html. Inside the <body> sits a single empty container element:

<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>

React attaches itself to this root container and injects all dynamic UI components into it.

The entry script that bridges React to the real browser DOM using the createRoot API from react-dom/client:

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

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);