React — JSX

What is JSX?

JSX (JavaScript XML) is a syntax extension that lets you write HTML-like code inside JavaScript. It's not valid JavaScript on its own — tools like Babel or Vite transform it into regular function calls.

// What you write:
const element = <h1>Hello, World!</h1>;

// What it compiles to:
const element = React.createElement('h1', null, 'Hello, World!');

JSX Expressions

Embed any JavaScript expression inside curly braces {}:

const name = "Alice";
const element = <h1>Hello, {name}!</h1>;

// Works with any expression
const element = <p>2 + 2 = {2 + 2}</p>;
const element = <p>Today is {new Date().toLocaleDateString()}</p>;

// Function calls
function formatName(user) {
  return `${user.firstName} ${user.lastName}`;
}
const element = <h1>Hello, {formatName(user)}!</h1>;

JSX Attributes

Use className instead of class, and htmlFor instead of for:

// className (not class)
const element = <div className="container">Content</div>;

// htmlFor (not for)
const element = <label htmlFor="email">Email</label>;

// Inline styles use objects
const element = <div style={{ color: "red", fontSize: "16px" }}>Styled</div>;

// Data attributes
const element = <div data-testid="my-component">Tested</div>;

Self-Closing Tags

All tags must be closed in JSX:

// Self-closing tags
const element = <img src="photo.jpg" alt="Photo" />;
const element = <input type="text" />;
const element = <br />;
const element = <hr />;

// HTML allows this, JSX does not:
// <img src="photo.jpg">  ← WRONG

Fragments

Group multiple elements without adding extra DOM nodes:

// Fragment syntax
function List() {
  return (
    <>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </>
  );
}

// Named fragment (when you need a key)
import { Fragment } from 'react';
function List({ items }) {
  return (
    <Fragment>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </Fragment>
  );
}

Conditional Rendering

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

// Logical AND
function Notification({ count }) {
  return (
    <div>
      {count > 0 && <span className="badge">{count}</span>}
    </div>
  );
}

// Early return
function UserProfile({ user }) {
  if (!user) return <p>Please log in.</p>;
  return <h1>Hello, {user.name}!</h1>;
}

List Rendering

function NumberList({ numbers }) {
  return (
    <ul>
      {numbers.map(number => (
        <li key={number}>{number}</li>
      ))}
    </ul>
  );
}

// Usage
<NumberList numbers={[1, 2, 3, 4, 5]} />

Always provide a unique key prop when rendering lists — it helps React track which items changed.

JSX Rules

1. Return a single root element — wrap in <div> or <>
2. Close all tags — <img />, <br />, <input />
3. camelCase attributes — className, onClick, strokeWidth
4. JavaScript expressions only — no if statements, only expressions
5. className, not class — class is a reserved word in JavaScript

Common Patterns

Inline event handlers

<button onClick={() => alert("Clicked!")}>Click me</button>
<button onClick={handleClick}>Click me</button>

Template literals in JSX

const name = "Alice";
const element = <h1>{`Hello, ${name}!`}</h1>;

Multi-line JSX

const element = (
  <div className="card">
    <h2>Title</h2>
    <p>Content goes here.</p>
    <button>Action</button>
  </div>
);

Mini Practice

1. Create a component that displays a user's name using a prop
2. Use a ternary to show "logged in" or "logged out"
3. Render a list of 5 items from an array
4. Use a fragment to return multiple elements
5. Add a click handler to a button

Up Next

Next: React Elements →