React Intro

React Intro: Core Architecture & Virtual DOM

React is a popular open-source JavaScript library developed by Meta for building interactive, component-based user interfaces. Rather than manipulating browser DOM nodes directly using native JavaScript (document.getElementById), React uses a declarative model with a Virtual DOM to minimize costly browser reflows and repaints.

flowchart LR
    A["State Update"] --> B["Virtual DOM Tree"]
    B --> C["Diffing Algorithm (Reconciliation)"]
    C --> D["Batch Operations"]
    D --> E["Real Browser DOM Update"]

Key Architectural Concepts

• Declarative Markup: Describe how the UI should look for any given state, and React handles rendering the DOM changes.
• Component-Driven Design: Split web pages into isolated, reusable building blocks (Navbar, Sidebar, Card Grid).
• Virtual DOM & Reconciliation: React maintains a lightweight copy of the real DOM in memory. When state updates, React compares the new Virtual DOM with the previous snapshot (diffing) and patches only changed elements in the real DOM.
• Unidirectional Data Flow: State flows down from parent components to child components via read-only properties (props).

Simple Functional Component Example

Here is a minimal functional React component written using modern React 18 standards:

import React from 'react';

export default function WelcomeBanner({ username, unreadCount }) {
  return (
    <header className="welcome-banner">
      <h1>Welcome back, {username}!</h1>
      {unreadCount > 0 ? (
        <p>You have {unreadCount} new notifications.</p>
      ) : (
        <p>All caught up!</p>
      )}
    </header>
  );
}

Best Practices & Gotchas

• React Is a Library, Not a Full Framework: React handles only the view layer. Routing, global state management, and data fetching require supplementary libraries (like React Router, TanStack Query, or Zustand) or meta-frameworks like Next.js.
• Never Mutate DOM Directly: Avoid using document.querySelector inside React components. Always manage UI updates through React state (useState).

Self-Check Challenge

Explain how React's Virtual DOM diffing algorithm improves application performance over direct DOM manipulation during frequent data updates.