1.1 JSX Is HTML-Plus

JSX: the markup language of React

Every React component produces some visual output -- a button, a card, a whole page. That output is written in JSX, which stands for JavaScript XML. JSX looks almost identical to HTML, and that is intentional. The React team designed it so that anyone who can read HTML can read JSX with just a few adjustments.

Here is a piece of HTML you might find on any webpage:

<div class="greeting">
  <h1>Hello, world</h1>
  <img src="logo.png" alt="Company logo">
</div>

And here is the same thing in JSX:

<div className="greeting">
  <h1>Hello, world</h1>
  <img src="logo.png" alt="Company logo" />
</div>

Spot the differences? There are exactly two: class became className, and the <img> tag gained a forward slash before the closing bracket. That is the gap between HTML and JSX. Let us walk through every difference you will encounter.

Difference 1: className instead of class

In HTML, you write class="header" to apply a CSS class. In JSX, you write className="header" instead. The reason is technical -- class is a reserved word in JavaScript, and since JSX lives inside JavaScript files, React uses className to avoid the conflict.

You do not need to understand the technical reason. You just need to recognize the pattern:

// HTML version
<div class="sidebar active">

// JSX version
<div className="sidebar active">

When you see className in code, mentally translate it to "CSS class." That is all it means.

Difference 2: Self-closing tags

HTML is forgiving about tags. You can write <img src="photo.jpg"> or <br> without closing them, and the browser figures it out. JSX is stricter -- every tag must be explicitly closed. For tags that have no children (no content between an opening and closing tag), you use a self-closing tag with a />:

<img src="photo.jpg" />
<br />
<input type="text" />
<hr />

The rule is simple: if a tag has no children, it ends with />. If it has children, it has a separate closing tag:

// No children -- self-closing
<img src="photo.jpg" />

// Has children -- opening and closing tags
<div>
  <p>This div has children.</p>
</div>

Difference 3: Curly braces = "insert JavaScript here"

This is the most important difference between HTML and JSX, and the one that gives JSX its power. Curly braces {} let you embed any JavaScript expression directly into your markup:

const userName = "Sarah";
const itemCount = 3;

return (
  <div>
    <h1>Welcome back, {userName}</h1>
    <p>You have {itemCount} items in your cart.</p>
    <p>Total: ${itemCount * 29.99}</p>
  </div>
);

This renders:

Welcome back, Sarah

You have 3 items in your cart.

Total: $89.97

Anything inside {} is evaluated as JavaScript. A variable name gets replaced with its value. A math expression gets calculated. A function call gets executed and the result is inserted.

Think of curly braces as a window from the markup world into the JavaScript world. Everything outside the braces is literal text or HTML-like structure. Everything inside the braces is live JavaScript.

Here are common things you will see inside curly braces:

// A variable
<h1>{title}</h1>

// A property of an object
<p>{user.email}</p>

// A function call
<span>{formatDate(order.createdAt)}</span>

// A ternary expression (if/else)
<p>{isLoggedIn ? "Welcome back" : "Please sign in"}</p>

// A math expression
<p>{price * quantity}</p>

Difference 4: Fragments -- wrapping without adding HTML

A React component can only return one element. This is a rule of JSX. So what do you do when you want to return two sibling elements?

// This will cause an error -- two sibling elements
return (
  <h1>Title</h1>
  <p>Description</p>
);

You could wrap them in a <div>, but that adds an extra HTML element to the page for no reason. Instead, React provides fragments -- empty angle brackets that group elements without producing any HTML output:

// This works -- fragment wraps siblings
return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

The <> and </> are a fragment. They tell React "these elements belong together" without adding a <div> or any other element to the actual page. When you see empty angle brackets in React code, you are looking at a fragment.

Putting it all together

Here is a realistic piece of JSX that uses all four differences:

const ProductCard = () => {
  const product = { name: "Wireless Headphones", price: 79.99, inStock: true };

  return (
    <>
      <div className="product-card">
        <img src="/images/headphones.jpg" alt={product.name} />
        <h2 className="product-title">{product.name}</h2>
        <p className="product-price">${product.price}</p>
        <p>{product.inStock ? "In Stock" : "Out of Stock"}</p>
      </div>
    </>
  );
};

You can now read every line of this:

• className is used instead of class for CSS classes
• <img /> is self-closing because it has no children
• {product.name}, {product.price} insert JavaScript values into the markup
• {product.inStock ? "In Stock" : "Out of Stock"} is a conditional expression inside curly braces
• <> and </> are a fragment wrapping the content

Common JSX patterns you will see in the wild

A few more patterns worth recognizing:

Style attributes use double curly braces -- the outer pair says "JavaScript expression here" and the inner pair is a JavaScript object:

<div style={{ color: "red", fontSize: "16px" }}>
  Warning message
</div>

Event handlers use camelCase -- onclick becomes onClick, onchange becomes onChange:

<button onClick={handleSubmit}>Submit</button>

Boolean attributes -- in HTML you might write <input disabled>. In JSX, you write <input disabled /> or <input disabled={true} />:

<button disabled={isLoading}>Submit</button>

const name = "Alex";
const role = "Designer";

return (
  <div className="profile">
    <h1>{name}</h1>
    <p>Role: {role}</p>
  </div>
);