Module 2.1: React Overview - Why React?

🎯 Learning Objectives

By the end of this module, you will be able to:

• Understand what React is and why it’s a Library, not a Framework.
• Differentiate between Declarative and Imperative programming.
• Grasp Component-Based Architecture.
• Understand the Virtual DOM mechanism and why React is fast.
• Distinguish between SPA (Single Page Application) and MPA (Multi-Page Application).
• Get an overview of the React Ecosystem.

1. What is React?

1.1. Definition

React (or React.js) is a JavaScript Library for building user interfaces (UI). React was developed by Meta (Facebook) and first released in 2013.

Key Point: React is a Library, not a Framework.

1.2. Why is React Popular?

According to Stack Overflow trends:

Reasons for React’s Popularity:

1. Component-Based: Reusable UI components.
2. Virtual DOM: Excellent performance.
3. Large Ecosystem: Thousands of supporting libraries.
4. Meta Backing: Developed by a major tech company.
5. Community: A massive developer community.
6. Job Market: High demand for React developers.

2. Declarative vs Imperative

2.1. Imperative Programming

Imperative = “How” - Specifies every step explicitly.

// jQuery (Imperative) - Adding an item to a list
const button = document.getElementById('add-btn');
const list = document.getElementById('list');
const input = document.getElementById('input');
 
button.addEventListener('click', function () {
  const value = input.value; // Step 1: Get input value
  const li = document.createElement('li'); // Step 2: Create li element
  li.textContent = value; // Step 3: Set text content
  list.appendChild(li); // Step 4: Append to the list
  input.value = ''; // Step 5: Clear input
});

2.2. Declarative Programming

Declarative = “What” - Describes the desired outcome.

// React (Declarative) - Adding an item to a list
const TodoList = () => {
  const [items, setItems] = React.useState([]); // State hook for items
  const [input, setInput] = React.useState(''); // State hook for input
 
  const addItem = () => {
    setItems([...items, input]); // Declare the new state
    setInput('');
  };
 
  // Describe the UI you WANT to see; React handles the "how"
  return (
    <div>
      <input value={input} onChange={(e) = /> setInput(e.target.value)} />
      <button onClick={addItem}>Add</button>
      <ul>
        {items.map((item, i) => (
          <li key={i}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

2.3. Comparison

React’s Formula:

UI = f(State)

When State changes → React automatically re-renders the UI.

3. Component-Based Architecture

3.1. What is a Component?

A Component is a self-contained, reusable UI building block. Each component manages:

• Markup (JSX)
• Styling (CSS)
• Logic (JavaScript)

3.2. Breaking Down UI into Components

3.3. Example Component Hierarchy

// App.jsx
const App = () => {
  return (
    <div>
      <Header />
      <Main>
        <ProductList />
      </Main>
      <Footer />
    </div>
  );
};

// Header.jsx
const Header = () => {
  return (
    <header>
      <Logo />
      <Navigation />
    </header>
  );
};

// ProductCard.jsx - Reusable Component
const ProductCard = ({ name, price, image }) => {
  return (
    <div className="card">
      <img src={image} alt={name} />
      <h3>{name}</h3>
      <p>${price}</p>
    </div>
  );
};

// ProductList.jsx - Using ProductCard multiple times
const ProductList = () => {
  const products = [
    { id: 1, name: 'iPhone', price: 999, image: '/iphone.jpg' },
    { id: 2, name: 'MacBook', price: 1999, image: '/macbook.jpg' },
  ];
 
  return (
    <div className="product-grid">
      {products.map((product) => (
        <ProductCard key={product.id} {...product} />
      ))}
    </div>
  );
};

3.4. Benefits

4. Virtual DOM

4.1. The Problem with the Real DOM

The DOM (Document Object Model) is a tree representation of your HTML in the browser.

The Problem: Direct DOM manipulation is slow because:

• The browser must recalculate layouts (Reflow).
• The browser must repaint pixels (Repaint).
• Every small change triggers this entire process.

// jQuery - Each line triggers a DOM update
$('#list').append('<li>Item 1</li>'); // Reflow + Repaint
$('#list').append('<li>Item 2</li>'); // Reflow + Repaint
$('#list').append('<li>Item 3</li>'); // Reflow + Repaint
// Total: 3 reflows + repaints

4.2. What is the Virtual DOM?

The Virtual DOM is an in-memory representation of the Real DOM, stored as JavaScript objects.

4.3. How the Virtual DOM Works

Terminology:

• Diffing: Comparing two Virtual DOM trees to find differences.
• Reconciliation: The process of updating the Real DOM based on the diff.

4.4. Example Comparison

// React - Internal process
// Imagine a list with 100 items, and the user adds one more
 
// Step 1: State changes
setItems([...items, newItem]); // Now we have 101 items
 
// Step 2: React creates a new Virtual DOM (with 101 items)
// Step 3: Diffing - Compares the new VDOM to the old one (100 items)
// Step 4: The diff reveals only 1 new item
 
// Step 5: Update the Real DOM - Only appends the single new <li>
// It doesn't re-render the 100 existing items!

4.5. Performance Benefits

5. Single Page Application (SPA)

5.1. MPA vs SPA Comparison

Examples:

• MPA: Traditional websites - each link requests a new page from the server.
• SPA: Gmail, Facebook, Twitter, Spotify Web.

5.2. SPA vs MPA Comparison

5.3. SPA Advantages

1. User Experience: Seamless page transitions without full reloads.
2. Performance: After the initial load, only data is fetched.
3. Mobile-like Feel: Behaves more like a native application.
4. Offline Support: Can cache data and function offline.

5.4. SPA Disadvantages

1. SEO Challenges: Search engines can struggle to crawl JavaScript-heavy applications.
2. Initial Load: Large JavaScript bundles can lead to slower first loads.
3. Complexity: Requires handling routing and state management.
4. Browser History: Needs explicit implementation for history management.

Solutions to Disadvantages:

• SEO → SSR (Server-Side Rendering) with Next.js
• Initial Load → Code Splitting, Lazy Loading
• Routing → React Router

6. React Ecosystem Overview

6.1. React Core vs React DOM

• React (Core): Component logic, state management, hooks.
• React DOM: Renders to the browser’s DOM.
• React Native: Renders to iOS/Android native components.

6.2. Build Tools

6.3. Ecosystem Libraries

6.4. Learning Path