React.js Explained: Components, State & the Virtual DOM

// ─── VANILLA JS APPROACH ───────────────────────────────────────────
// Manually track and update every affected DOM node when data changes.
// This gets chaotic the moment your UI has more than a handful of states.

let likeCount = 0;

function handleLikeClick() {
  likeCount += 1;

  // Manually update the counter label
  document.getElementById('like-count').textContent = likeCount;

  // Manually update the button colour based on whether we've liked it
  const likeButton = document.getElementById('like-btn');
  likeButton.style.color = likeCount > 0 ? 'blue' : 'grey';

  // Manually show a 'Popular' badge once it crosses a threshold
  const badge = document.getElementById('popular-badge');
  badge.style.display = likeCount >= 10 ? 'block' : 'none';

  // ... and it keeps growing. Every new rule = more manual syncing.
}


// ─── REACT APPROACH ────────────────────────────────────────────────
// Describe WHAT the UI should look like for any given likeCount.
// React calculates the minimum DOM changes needed — you never touch the DOM.

import React, { useState } from 'react';

function LikeButton() {
  // likeCount is our single source of truth. React re-renders this
  // component whenever likeCount changes — we don't manually update anything.
  const [likeCount, setLikeCount] = useState(0);

  const hasLiked = likeCount > 0;
  const isPopular = likeCount >= 10;

  return (
    <div>
      {/* The UI is a pure function of likeCount — no manual DOM calls */}
      <button
        onClick={() => setLikeCount(likeCount + 1)}
        style={{ color: hasLiked ? 'blue' : 'grey' }}
        id="like-btn"
      >
        👍 {likeCount}
      </button>

      {/* Conditional rendering: React handles show/hide based on state */}
      {isPopular && <span id="popular-badge">🔥 Popular</span>}
    </div>
  );
}

export default LikeButton;

// ─── ProductCard.jsx ────────────────────────────────────────────────
// A reusable 'dumb' component — it receives product data as props
// and renders it. It has no idea where the data came from.

import React from 'react';

// Destructure props directly in the parameter list for clarity.
// This component will re-render whenever its props change.
function ProductCard({ name, price, imageUrl, isOnSale }) {
  return (
    <div className="product-card">
      <img src={imageUrl} alt={name} />

      <h3>{name}</h3>

      <div className="price-block">
        {/* Conditional: show a sale badge only when isOnSale is true */}
        {isOnSale && <span className="sale-badge">SALE</span>}

        {/* Template literal makes the price format explicit */}
        <p className="price">${price.toFixed(2)}</p>
      </div>
    </div>
  );
}


// ─── ProductList.jsx ─────────────────────────────────────────────────
// The 'smart parent' — it owns the data and maps it into ProductCards.
// ProductCard doesn't care how many products there are or where they come from.

import React from 'react';
import ProductCard from './ProductCard';

function ProductList() {
  // In a real app this data would come from an API via useEffect/fetch.
  // For now, hardcoded to keep the focus on component composition.
  const products = [
    {
      id: 1,
      name: 'Mechanical Keyboard',
      price: 129.99,
      imageUrl: '/images/keyboard.jpg',
      isOnSale: false,
    },
    {
      id: 2,
      name: 'Ergonomic Mouse',
      price: 49.99,
      imageUrl: '/images/mouse.jpg',
      isOnSale: true,
    },
    {
      id: 3,
      name: 'USB-C Hub',
      price: 34.99,
      imageUrl: '/images/hub.jpg',
      isOnSale: true,
    },
  ];

  return (
    <section className="product-list">
      <h2>Our Products</h2>

      {/* Map over the array — each item becomes a ProductCard */}
      {/* The 'key' prop is mandatory here. React uses it to track */}
      {/* which items changed, added, or removed in the list. */}
      {products.map((product) => (
        <ProductCard
          key={product.id}
          name={product.name}
          price={product.price}
          imageUrl={product.imageUrl}
          isOnSale={product.isOnSale}
        />
      ))}
    </section>
  );
}

export default ProductList;

// ─── ShoppingCart.jsx ───────────────────────────────────────────────
// A practical example that shows: useState, state updates via setter,
// and derived state (calculating total from cart items).

import React, { useState } from 'react';

// Initial product catalogue — would normally come from an API.
const AVAILABLE_PRODUCTS = [
  { id: 101, name: 'React T-Shirt', price: 25 },
  { id: 102, name: 'JavaScript Mug', price: 12 },
  { id: 103, name: 'TypeScript Hoodie', price: 55 },
];

function ShoppingCart() {
  // cartItems holds an array of products the user has added.
  // We initialise it as empty — nobody has added anything yet.
  const [cartItems, setCartItems] = useState([]);

  function addToCart(product) {
    // NEVER do: cartItems.push(product) — this mutates state directly.
    // React won't detect the change and the UI won't update.
    //
    // CORRECT: create a NEW array with the spread operator.
    // React sees a new reference → triggers a re-render.
    setCartItems([...cartItems, product]);
  }

  function removeFromCart(productId) {
    // Filter returns a new array — again, no mutation.
    setCartItems(cartItems.filter((item) => item.id !== productId));
  }

  // Derived state: calculate the total from cartItems on every render.
  // Don't store total in its own useState — it's always derivable from cartItems.
  // Storing it separately would create two sources of truth that can drift apart.
  const cartTotal = cartItems.reduce((total, item) => total + item.price, 0);

  return (
    <div className="shopping-cart">
      {/* ── Product Catalogue ── */}
      <section className="catalogue">
        <h2>Catalogue</h2>
        {AVAILABLE_PRODUCTS.map((product) => (
          <div key={product.id} className="catalogue-item">
            <span>{product.name} — ${product.price}</span>
            <button onClick={() => addToCart(product)}>Add to Cart</button>
          </div>
        ))}
      </section>

      {/* ── Cart ── */}
      <section className="cart">
        <h2>Your Cart ({cartItems.length} items)</h2>

        {cartItems.length === 0 ? (
          // React renders this when the array is empty
          <p>Your cart is empty. Add something!</p>
        ) : (
          cartItems.map((item, index) => (
            // Using index as key here is acceptable ONLY because we remove
            // from the end and items don't reorder — see the callout below.
            // In production, use item.id (or a cart-entry UUID) instead.
            <div key={`${item.id}-${index}`} className="cart-item">
              <span>{item.name}</span>
              <span>${item.price}</span>
              <button onClick={() => removeFromCart(item.id)}>Remove</button>
            </div>
          ))
        )}

        {cartItems.length > 0 && (
          <div className="cart-total">
            <strong>Total: ${cartTotal}</strong>
          </div>
        )}
      </section>
    </div>
  );
}

export default ShoppingCart;

// ─── UserProfilePage.jsx ────────────────────────────────────────────
// Real-world pattern: fetch user data when a userId changes,
// handle loading & error states, and clean up properly to avoid
// updating state on an unmounted component.

import React, { useState, useEffect } from 'react';

function UserProfilePage({ userId }) {
  const [userProfile, setUserProfile] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [fetchError, setFetchError] = useState(null);

  useEffect(() => {
    // AbortController lets us cancel the fetch if userId changes
    // before the previous request finishes — avoids race conditions.
    const abortController = new AbortController();

    // Reset state before each fresh fetch so stale data doesn't linger
    setIsLoading(true);
    setFetchError(null);
    setUserProfile(null);

    async function loadUserProfile() {
      try {
        const response = await fetch(
          `https://jsonplaceholder.typicode.com/users/${userId}`,
          { signal: abortController.signal } // tie the request to the controller
        );

        if (!response.ok) {
          throw new Error(`Server returned ${response.status}`);
        }

        const data = await response.json();
        setUserProfile(data);     // update state with the fetched profile
      } catch (error) {
        // AbortError is expected when we clean up — not a real error
        if (error.name !== 'AbortError') {
          setFetchError(error.message);
        }
      } finally {
        // Only mark loading as done if the request wasn't aborted
        if (!abortController.signal.aborted) {
          setIsLoading(false);
        }
      }
    }

    loadUserProfile();

    // Cleanup: cancel the in-flight request if userId changes or
    // the component unmounts before the fetch completes.
    return () => {
      abortController.abort();
    };

  }, [userId]); // Re-run this entire effect whenever userId changes


  // ── Render the right UI for each data-fetching state ──

  if (isLoading) {
    return <div className="skeleton-loader">Loading profile...</div>;
  }

  if (fetchError) {
    return (
      <div className="error-banner">
        <p>Could not load profile: {fetchError}</p>
        <p>Check your connection and try again.</p>
      </div>
    );
  }

  return (
    <div className="user-profile">
      <h1>{userProfile.name}</h1>
      <p>📧 {userProfile.email}</p>
      <p>🏢 {userProfile.company?.name}</p>
      <p>🌐 {userProfile.website}</p>
    </div>
  );
}

export default UserProfilePage;