Why React? JSX & Component Thinking

Why React? JSX & Component Thinking

React is the most widely-used UI library in the world — and for good reason. It solves the real problem of keeping the DOM in sync with your data by letting you describe what the UI should look like, not how to update it.

The Core Problem React Solves

Without React, when data changes you manually update the DOM:

// Vanilla JS — imperative
function updateUserCount(count) {
    document.querySelector("#count").textContent = count;
    document.querySelector("#badge").className = count > 0 ? "badge active" : "badge";
    if (count === 0) document.querySelector("#empty-msg").style.display = "block";
}

With React, you describe the UI based on state, and React handles the DOM:

// React — declarative
function UserCount({ count }) {
    return (
        <div>
            <span className={`badge ${count > 0 ? "active" : ""}`}>{count}</span>
            {count === 0 && <p>No users yet</p>}
        </div>
    );
}

JSX

JSX looks like HTML but it's JavaScript. Babel transforms it to React.createElement() calls:

// JSX
const element = <h1 className="title">Hello, {name}!</h1>;

// What Babel transforms it to:
const element = React.createElement("h1", { className: "title" }, "Hello, ", name, "!");

JSX rules:

// 1. One root element (or Fragment)
return (
    <div>
        <h1>Title</h1>
        <p>Paragraph</p>
    </div>
);

// Fragment — no extra DOM node
return (
    <>
        <h1>Title</h1>
        <p>Paragraph</p>
    </>
);

// 2. className instead of class, htmlFor instead of for
<div className="card">
<label htmlFor="email">Email</label>

// 3. Self-close empty tags
<input type="text" />
<br />
<img src="photo.jpg" alt="..." />

// 4. JavaScript expressions in curly braces
<p>{user.name}</p>
<p>{2 + 2}</p>
<p>{condition ? "Yes" : "No"}</p>
<p>{items.length > 0 ? <span>{items.length}</span> : null}</p>

// 5. Styles as objects
<div style={{ backgroundColor: "blue", fontSize: "16px" }}>

// 6. Event handlers are camelCase
<button onClick={handleClick}>
<input onChange={handleChange}>
<form onSubmit={handleSubmit}>

Your First Component

// Function component — the modern standard
function Greeting({ name, role = "user" }) {
    return (
        <div className="greeting">
            <h2>Hello, {name}!</h2>
            <span className={`badge badge-${role}`}>{role}</span>
        </div>
    );
}

// Usage
<Greeting name="Alice" role="admin" />
<Greeting name="Bob" />  // role defaults to "user"

Thinking in Components

Break every UI into small, reusable pieces:

┌─────────────────────────────────────┐
│ App                                 │
│  ┌─────────────────────────────┐    │
│  │ Header                      │    │
│  │  ┌──────────┐  ┌─────────┐  │    │
│  │  │ Logo     │  │ NavMenu │  │    │
│  │  └──────────┘  └─────────┘  │    │
│  └─────────────────────────────┘    │
│  ┌─────────────────────────────┐    │
│  │ ProductGrid                 │    │
│  │  ┌────────┐  ┌────────┐    │    │
│  │  │ Card   │  │ Card   │    │    │
│  │  └────────┘  └────────┘    │    │
│  └─────────────────────────────┘    │
└─────────────────────────────────────┘

function ProductCard({ product }) {
    return (
        <div className="card">
            <img src={product.imageUrl} alt={product.name} />
            <h3>{product.name}</h3>
            <p className="price">${product.price.toFixed(2)}</p>
            <button onClick={() => addToCart(product.id)}>Add to Cart</button>
        </div>
    );
}

function ProductGrid({ products }) {
    return (
        <div className="grid">
            {products.map(product => (
                <ProductCard key={product.id} product={product} />
            ))}
        </div>
    );
}

Conditional Rendering

function UserStatus({ user }) {
    // Early return
    if (!user) return <p>Loading...</p>;
    
    return (
        <div>
            <h2>{user.name}</h2>
            {/* && operator */}
            {user.isPremium && <span className="badge">Premium</span>}
            {/* Ternary */}
            {user.isOnline ? <span className="online">Online</span> : <span>Offline</span>}
            {/* Null hides the element */}
            {user.bio ?? null}
        </div>
    );
}

Next lesson: Props, State & Re-rendering — how React knows when to update.