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 `
View Solution

Diagnosis: The component returns two adjacent sibling elements (h2 and hr) without a single parent wrapper, which is a JSX syntax violation. Additionally, in JSX, all tags must be explicitly closed (<hr /> instead of <hr>).

Fix: Group the elements inside a React Fragment wrapper and close the horizontal rule tag:

15. Practice Exercises

Exercise 1: Create a profile card component

Build a component named ProfileCard that renders a user's profile picture, name, bio, and list of skills. Render the component in the CDN starter page.

16. Scenario-Based Challenge

The Multi-Platform UI Framework Selection:

Your company is planning to build a web application that will eventually expand to iOS and Android mobile platforms. Explain how React's virtual representation framework allows developers to write shared component logic that can be reused across both platforms (using React Native), and why this is easier than reusing logic from traditional DOM-centric libraries.

17. Quick Quiz

Q1: Which library is responsible for rendering React components in the browser DOM?

A) React Core

B) ReactDOM

C) Babel

Answer: B — ReactDOM mounts and updates React components in the browser's DOM tree.

18. Summary & Key Takeaways

  • React uses declarative rendering, allowing you to describe UI states rather than writing step-by-step updates.
  • The Virtual DOM is an in-memory tree that React uses to compute the minimal set of changes needed for updates.
  • React components are modular, self-contained UI blocks that can be nested and reused.
  • JSX compiles into standard JavaScript nested calls, meaning all tag elements must be closed and wrapped in a single root element.

19. Cheat Sheet

API / Concept Purpose
ReactDOM.createRoot(container) Creates a React root instance inside the mounting container.
root.render(element) Mounts the React component tree into the container.
<Fragment> or <> Wraps adjacent sibling elements in JSX without creating a wrapper DOM node.
---