JSX Syntax and Expressions

Analogy categoryAnalogies

Introduction

JSX (JavaScript XML) is a syntax extension for JavaScript that lets you write HTML-like markup directly inside your JavaScript code. React uses JSX to describe what the UI should look like, combining the expressive power of JavaScript with a familiar, declarative markup syntax. Under the hood, JSX is not understood by browsers directly; it is compiled by tools like Babel into plain JavaScript function calls such as React.createElement().

🏏

Cricket analogy: JSX looking like HTML but compiling to React.createElement() calls is like a scorer writing shorthand notation on a scoresheet that ultimately gets converted into the official digital scorecard format behind the scenes.

Syntax

jsx

function Greeting() {
  const name = "Ava";
  return (
    <div className="greeting">
      <h1>Hello, {name}!</h1>
      <p>Today is {new Date().toLocaleDateString()}</p>
    </div>
  );
}

Explanation

Curly braces {} embed JavaScript expressions inside JSX, allowing you to render variables, call functions, or evaluate expressions like ternaries. JSX attributes use camelCase (className instead of class, onClick instead of onclick) because they map to DOM properties in JavaScript, not HTML attribute names. Every JSX expression must return a single root element, though React.Fragment (or the shorthand <>) lets you group multiple elements without adding an extra DOM node.

🏏

Cricket analogy: Curly braces embedding JavaScript expressions in JSX is like a commentator inserting live stats mid-sentence, and camelCase attributes like onClick mapping to DOM properties is like using the official scorer's terminology instead of casual broadcast slang.

Example

jsx

function ProductCard({ product }) {
  const isOnSale = product.price < product.originalPrice;
  return (
    <>
      <h2>{product.name}</h2>
      <p>{isOnSale ? `Now ${product.price}` : `${product.price}`}</p>
      <ul>
        {product.tags.map((tag) => (
          <li key={tag}>{tag}</li>
        ))}
      </ul>
    </>
  );
}

Output

The compiled output renders a heading with the product name, a paragraph showing a sale price or regular price depending on the isOnSale condition, and a bulleted list of tags. Because JSX expressions are just JavaScript, you can use array methods like map() directly inside markup to render dynamic lists.

🏏

Cricket analogy: Rendering a product heading, conditional sale price, and a list of tags using array methods like map() is like a scorecard showing the player's name, their conditional 'not out' status, and a mapped list of boundary counts, all generated from the same data.

JSX expressions can only contain expressions, not statements. You cannot use if statements, for loops, or variable declarations directly inside curly braces — use ternaries, logical && operators, or compute values before the return statement instead.

Key Takeaways

JSX compiles to React.createElement() calls (or the newer JSX transform) via Babel, not directly interpreted by browsers.
Use curly braces {} to embed any valid JavaScript expression inside JSX markup.
JSX attributes use camelCase naming and differ slightly from HTML (className, htmlFor, onClick).
A JSX expression must return a single root element; use Fragments (<>) to avoid extra wrapper DOM nodes.
Only expressions, not statements, are allowed inside JSX curly braces.