📝 JSX Syntax and Expression Integration

What Is JSX?

JSX (JavaScript XML) is a syntax extension that lets you write markup that looks like HTML directly inside JavaScript. It's React's signature feature and the reason describing UIs in React feels so intuitive.

// This is JSX
const element = <h1>Hello, world!</h1>;

JSX is optional — you could write React without it — but almost nobody does, because the alternative (raw createElement calls) is far harder to read. If you know HTML, you already know most of JSX; the superpower it adds is embedding real JavaScript inside the markup.

💡 Why blend markup and logic? The React team argues that rendering logic and markup are inherently coupled — a button's label, its click handler, and whether it's disabled all belong together. JSX keeps them in one component instead of splitting them across an HTML template and a separate script file.

JSX Under the Hood

Browsers don't understand JSX. Before your code runs, a compiler (Babel or SWC, set up by Vite) transforms every JSX element into a function call. Understanding this transformation explains almost every JSX rule you'll meet.

A nested example makes the pattern clear:

// JSX
<div className="container">
  <h1>{title}</h1>
</div>

// Compiled (conceptually)
React.createElement(
  'div',
  { className: 'container' },
  React.createElement('h1', null, title)
);

JSX vs. HTML

JSX looks like HTML but is really JavaScript, so it follows a few different rules. These differences trip up every newcomer exactly once:

🏛️ An analogy: plain HTML is a static floor plan drawn on paper. JSX is an interactive 3D model — the same structure, but able to respond to conditions and data. That extra power is exactly why the rules are a little stricter.

Embedding Expressions

The heart of JSX is the pair of curly braces { }. Anything inside them is evaluated as a JavaScript expression and its result is inserted into the markup.

const name = 'John';
const greeting = <h1>Hello, {name}!</h1>;

const product = { name: 'Laptop', price: 999.99 };
const info = (
  <div>
    <h2>{product.name}</h2>
    <p>Price: ${product.price.toFixed(2)}</p>
    <p>With tax: ${(product.price * 1.08).toFixed(2)}</p>
  </div>
);

What can go inside the braces

Any expression that produces a value:

• Variables and property access: {user.firstName}
• Function calls: {formatDate(post.date)}
• Arithmetic and string work: {price * quantity}, {`Hi, ${name}`}
• Ternary expressions: {isLoggedIn ? 'Logout' : 'Login'}
• Array methods that return elements: {items.map(...)}

Conditional Rendering

Because JSX is just JavaScript, you render different UI by using ordinary JavaScript operators.

Ternary — for either/or

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
    </div>
  );
}

Logical && — for show-or-nothing

function Notifications({ messages }) {
  return (
    <div>
      {messages.length > 0 && (
        <h2>You have {messages.length} unread messages.</h2>
      )}
    </div>
  );
}

// Bug: renders "0" when count is 0
{count && <p>{count} items</p>}

// Fix: force a boolean
{count > 0 && <p>{count} items</p>}

Compute before the return — for complex cases

When conditions get involved, the cleanest approach is to build the element in a variable first, then drop it into the JSX:

function WeatherInfo({ temperature }) {
  let message;
  if (temperature < 32) {
    message = <p>It's freezing!</p>;
  } else if (temperature < 70) {
    message = <p>It's cool.</p>;
  } else {
    message = <p>It's warm!</p>;
  }

  return <div>{message}</div>;
}

Lists and Keys

To render a collection, map an array to JSX elements. React needs a key — a stable, unique identifier — on each item so it can track which is which across renders.

function UserList({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>
          {user.name} — {user.email}
        </li>
      ))}
    </ul>
  );
}

🏷️ Keys are name tags: at a conference, name tags let you recognize each person even after everyone shuffles seats. Keys do the same for React — when a list reorders, keys tell React "this is still the same item, just moved," so it can reuse the existing DOM instead of rebuilding it.

Fragments

A component must return a single parent, but you don't always want an extra wrapper <div> polluting the DOM (and possibly breaking your layout). Fragments group children without adding a node.

// Shorthand fragment — renders no wrapper element
function ListItems() {
  return (
    <>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </>
  );
}

When you map a list of fragments and need a key, use the full <Fragment> form (the shorthand <> can't take a key):

import { Fragment } from 'react';

function Glossary({ terms }) {
  return (
    <dl>
      {terms.map((term) => (
        <Fragment key={term.id}>
          <dt>{term.name}</dt>
          <dd>{term.definition}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

Best Practices

Here's the "extract logic" guideline in practice:

// Better — logic lifted out of the JSX
function ProductGrid({ products, filter }) {
  const visible = products
    .filter((p) => p.category === filter.category)
    .filter((p) => p.price <= filter.maxPrice)
    .sort((a, b) => a.price - b.price);

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

Hands-on Exercise

<div class="user-profile">
  <img src="profile.jpg" alt="User Profile" class="avatar">
  <label for="status">Status:</label>
  <button onclick="editProfile()">Edit</button>
</div>

// Part A — valid JSX
<div className="user-profile">
  <img src="profile.jpg" alt="User Profile" className="avatar" />
  <label htmlFor="status">Status:</label>
  <button onClick={editProfile}>Edit</button>
</div>

// Part B — ProductCard
function ProductCard({ product }) {
  const { name, price, discountPercent, inStock } = product;
  const hasDiscount = discountPercent > 0;
  const salePrice = price * (1 - discountPercent / 100);

  return (
    <div className="product-card">
      <h3>{name}</h3>

      {hasDiscount ? (
        <p>
          <s>${price.toFixed(2)}</s>{' '}
          <strong>${salePrice.toFixed(2)}</strong>
        </p>
      ) : (
        <p>${price.toFixed(2)}</p>
      )}

      <p style={{ color: inStock ? 'green' : 'red' }}>
        {inStock ? 'In Stock' : 'Out of Stock'}
      </p>

      <button disabled={!inStock}>Add to Cart</button>
    </div>
  );
}

Summary & Quiz

📚 Further Reading

• react.dev — Writing Markup with JSX
• JavaScript in JSX with Curly Braces
• Rendering Lists (keys explained)

🚀 What's Next?

You can now describe any UI with JSX. Next we'll formalize the building block you've been writing all along — the component — and compare modern function components with the older class-based style.