Why React? JSX & Component Thinking

University learning companion

Start with a real-world problem

Web Development Bootcamp 2026 · Why React? JSX & Component Thinking

Case study: a page that breaks on a real phone

A feature looks correct on a developer’s large monitor but fails on a slow connection and a small screen. Use this topic to inspect structure, state, loading/error behaviour, accessibility and the user journey—not just the happy path.

Visual map: where this topic fits

Use this course-level map to place “Why React? JSX & Component Thinking” in the larger system. It complements—not replaces—a topic-specific worked diagram.

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:

javascript

// 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:

jsx

// 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

// 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:

jsx

// 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

jsx

// 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:

code

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

jsx

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

jsx

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.

University learning companion

Apply, test and verify

Web Development Bootcamp 2026 · Why React? JSX & Component Thinking

Guided lab and self-check

Complete the steps without looking at the answer first; record evidence rather than only a final result.

Implement or demonstrate “Why React? JSX & Component Thinking” in the smallest useful example, then write down the expected result before running it.
Test a normal input, an empty or boundary input, and an invalid input. Compare expected and actual behaviour.
Explain the main assumption, one likely failure mode, and how you would verify the concept in a real project.

Reflection: Which assumption matters most in “Why React? JSX & Component Thinking”, what edge case could break it, and what evidence would convince you the solution is correct?

Authoritative sources and further reading

These are primary or established learning references for this subject. Check the relevant chapter or specification for the exact topic and version.

💬 DiscussionPowered by GitHub Discussions

📱

Get this course's notes on Telegram!

Free cheat sheets, summaries & practice exercises

Get Notes Free →