JSX: Syntax, Expressions & Transformation

JSX is syntax that lets you write a UI tree using JavaScript expressions embedded in markup-like syntax. JSX is not HTML and browsers do not execute JSX directly. A build tool or compiler transforms it into JavaScript expressions.

Use {} to embed JavaScript expressions. Expressions can produce strings, numbers, elements, arrays, or null. Statements such as if cannot be placed directly inside JSX braces, although conditional expressions, logical operators, helper functions, and variables can be used.

JSX also has JavaScript naming rules. For example, className maps to the DOM class property, and htmlFor represents the HTML for attribute. Custom components use capitalized names while intrinsic DOM elements use lowercase names.

Conditional JSX

function Status({ loading, error }) {
  if (loading) return <p>Loading…</p>;
  if (error) return <p role="alert">Failed to load.</p>;
  return <p>Ready</p>;
}

💡 Early returns are often clearer than deeply nested ternaries when UI states become substantial.

Key Takeaways

JSX is JavaScript syntax transformed before it reaches the browser.
Only expressions can appear directly inside JSX braces.
Keep complex rendering decisions readable with variables or early returns.

Knowledge Check

Which value can be returned directly from a JSX expression?

JSX: Syntax, Expressions & Transformation

STAY UPDATED WITH BYTES!