React Intro

React Intro: Virtual DOM, Components, and Modern UI Design

React is an open-source JavaScript library built by Meta for creating interactive user interfaces. Instead of calling manual DOM methods like document.getElementById, you describe how the screen should look for each state. React then compares snapshots and updates only the changed browser nodes.

How the Virtual DOM Works

Direct browser DOM updates trigger expensive layout recalculations and repaints. React keeps a lightweight tree of JavaScript objects in memory called the Virtual DOM. When component state changes, React builds a new tree, compares it with the previous version, and applies minimal DOM mutations in one batch.

flowchart LR
    A["State Update"] --> B["New Virtual DOM"]
    B --> C["Reconciliation Diff"]
    C --> D["Batched Changes"]
    D --> E["Real Browser DOM"]

Core Building Blocks in React 19

• Declarative Views: You write UI markup for a given state rather than step-by-step DOM instructions.
• Component Composition: You split pages into small, reusable JavaScript functions such as Navbar, ProductCard, and CheckoutForm.
• Unidirectional Data Flow: Parent components pass read-only props down to children, which makes bugs easier to trace.
• React 19 Features: Modern React supports Server Components, Actions for async forms, and automatic batching out of the box.

import { useState } from 'react';

export function CounterButton() {
  const [clicks, setClicks] = useState(0);

  return (
    <button onClick={() => setClicks((prev) => prev + 1)}>
      Clicked {clicks} times
    </button>
  );
}

Common Mistakes Beginners Make

• Mutating State Directly: Pushing items into a state array without creating a copy prevents React from detecting changes. Always pass a new array or object to your state setter.
• Mixing Imperative DOM Code: Calling document.querySelector inside React components bypasses reconciliation and causes out-of-sync screens.

Frequently Asked Questions

Is React a framework or a library?

React is a UI library focused on rendering components and managing state. Teams pair it with frameworks like Next.js or routers like React Router for full-stack routing and data loading.

Do I need TypeScript before learning React?

No. You can build React apps with standard ES6 JavaScript first, then adopt TypeScript later for stronger prop and state type checks.

What changed in React 19?

React 19 introduced Actions, useActionState, direct ref props without forwardRef, and first-class support for async transitions and Server Components.