ReviseAlgo Logo

Fundamentals

Introduction to React

Learn the fundamentals of React, covering Virtual DOM mechanics, declarative programming, component architectures, and basic setup.

Last Updated: July 15, 2026 • 10 min read

1. Learning Objectives

In this lesson, you will learn the core design philosophy of React. By the end of this topic, you will be able to:

  • Differentiate between declarative and imperative programming styles.
  • Explain how the Virtual DOM and the Reconciliation algorithm optimize rendering.
  • Describe component-based architecture and its benefits for modularity.
  • Set up a minimal React workspace using CDN scripts.

2. Overview

React is a declarative, component-based JavaScript library developed by Meta for building user interfaces. Instead of manually updating individual DOM elements when data changes, React allows developers to describe what the UI should look like for any given state. React then efficiently handles updating the real browser DOM to match this description.

3. Why This Topic Matters

React is the most popular framework in modern front-end development:

  • Performance at Scale: Writing manual DOM updates (like document.getElementById) becomes slow and error-prone as applications grow. React's Virtual DOM ensures only changed elements are updated in the browser.
  • Component Reusability: Building UI elements as self-contained blocks (components) allows you to reuse code, keep styles consistent, and simplify testing.

4. Real-World Analogy

Think of React like Blueprint Drafting:

  • Imperative Programming (Traditional DOM): Giving step-by-step instructions to a construction worker: "Knock down this wall, move that window three feet to the left, and paint the door blue." If one instruction is wrong, the entire house can break.
  • Declarative Programming (React): Handing the worker a new set of blueprints (the state description): "Build a house that looks exactly like this drawing." The worker compares the new blueprints to the existing structure, figures out the best way to make the changes (the Diffing process), and only updates what is necessary.

5. Core Concepts

Below is a comparison of Declarative and Imperative programming:

Feature Imperative (Vanilla JS) Declarative (React)
Approach "How to do it" (step-by-step instructions). "What to do" (describe target output).
DOM manipulation Manual (e.g. appendChild(), innerHTML). Automated via Virtual DOM reconciliation.
State tracking Stored manually in variables and synced with the DOM. Automatically synced; UI updates whenever state updates.

6. Syntax & API Reference

This example shows how a minimal React component is defined:

7. Visual Diagram

This diagram displays how React uses the Virtual DOM to batch and update the real browser layout:

8. Live Example — Full Working Code

Below is a complete, single-file HTML page containing a React application loaded directly from a CDN:

What just happened? The HTML imports React libraries and Babel script compilers. The

element is the mounting target. The