JSX Syntax in React

JSX (JavaScript XML) is a syntax extension that lets you write HTML-like markup directly inside JavaScript. It is not a separate template language and it is not required to use React, but it is by far the most common way to describe UI in React applications because it reads almost exactly like the HTML it produces.

Under the hood, JSX is not understood by browsers at all. A build tool such as Babel transforms every JSX element into a plain JavaScript function call — historically `React.createElement(type, props, ...children)`, and in modern tooling the newer automatic JSX runtime (`_jsx`/`jsx` from `react/jsx-runtime`). Either way, JSX is purely syntax sugar: `<h1>Hello</h1>` compiles down to a function call that returns a plain JavaScript object describing that element, which React then uses to build and update the actual DOM.

Why it matters

JSX is the syntax in which every React component is written. It looks like HTML, and the places where it differs are exactly where beginners lose time: className instead of class, braces for JavaScript, and the rule that a component returns one root element.

JSX Compiles to Function Calls

Every piece of JSX you write is converted at build time into a call that creates a React element object. Understanding this equivalence explains many JSX rules that otherwise look arbitrary.

• <h1>Hello</h1> compiles roughly to React.createElement("h1", null, "Hello").
• A React element is a plain JavaScript object with a type, props, and children — it is not a DOM node.
• Because JSX is just function calls, you can freely mix it with normal JavaScript: variables, conditionals, and loops all work around it.

Embedding Expressions with Curly Braces

Anything inside curly braces {} in JSX is evaluated as a JavaScript expression, and the result is inserted into the output. This works for variables, function calls, arithmetic, ternaries, and object property access — but not for statements like if or for, since those are not expressions. Attribute values also accept {} for dynamic values, for example <img src={imageUrl} />.

The Single Root Element Rule

A JSX expression must resolve to exactly one root element, because it ultimately becomes a single function call returning a single element object. Returning two sibling elements without a wrapper is a compile error. React provides a lightweight fragment, written as <>...</> or explicitly <React.Fragment>...</React.Fragment>, to group multiple elements without adding an extra DOM node like a <div>.

JSX Attribute Differences from HTML

JSX attributes use camelCase for most DOM properties (onClick, tabIndex, className instead of class) because they map to JavaScript object properties, not HTML attribute strings. Self-closing tags must include the trailing slash, for example <br /> and <img />, even for elements that are optional in raw HTML.

Example

function Greeting({ name, isLoggedIn }) {
  const currentHour = new Date().getHours();
  const greetingWord = currentHour < 12 ? 'Good morning' : 'Good evening';

  return (
    <>
      <h1 className="greeting-title">
        {greetingWord}, {name}!
      </h1>
      {isLoggedIn && <p>You are logged in.</p>}
    </>
  );
}

export default function App() {
  return <Greeting name="Asha" isLoggedIn={true} />;
}

Renders an <h1> reading "Good morning, Asha!" (or "Good evening, Asha!" depending on the time), followed by a paragraph "You are logged in." because isLoggedIn is true — with no extra wrapping DOM element thanks to the fragment.

Exercise

Do this in src/App.jsx of a Vite + React project. The component below has four JSX mistakes: it returns two sibling elements, uses class, puts a JavaScript value in quotation marks, and leaves an img tag unclosed. Fix them.

Expected result: the page shows "Hello, Asha", a paragraph with the class intro, and an image, with no errors in the console.

export default function App() {
  const name = "Asha";

  return (
    <h1>Hello, "name"</h1>
    <p class="intro">Welcome back.</p>
    <img src="/logo.png" alt="Logo">
  );
}

export default function App() {
  const name = "Asha";

  return (
    <>
      <h1>Hello, {name}</h1>
      <p className="intro">Welcome back.</p>
      <img src="/logo.png" alt="Logo" />
    </>
  );
}

Quick quiz

Interview questions