JSX Syntax and Transformation

JSX (JavaScript XML) is a syntax extension that lets you write HTML-like markup directly inside JavaScript files. It is not valid JavaScript on its own — a build tool such as Babel or the Vite/React plugin transforms JSX into `React.createElement()` calls before the browser ever sees it. The result is fully ordinary JavaScript, so there is no runtime overhead from JSX itself. JSX follows HTML conventions closely but has a few important differences. Every element must be explicitly closed, including void elements like `` and `
`. Attribute names use camelCase (`className`, `htmlFor`, `tabIndex`) because `class` and `for` are reserved words in JavaScript. Inline styles are objects with camelCase property names rather than CSS strings. Expressions are embedded using curly braces `{}`. Any valid JavaScript expression — variable references, arithmetic, function calls, ternary operators — can appear inside braces. Statements (like `if` blocks or `for` loops) are not allowed directly inside JSX; use ternary expressions or helper functions instead. Understanding the distinction between JSX syntax and the underlying function calls demystifies error messages and helps you reason about what React actually does.

Example

// JSX is syntactic sugar — Babel transforms it:
// Before:  <h1 className="title">Hello</h1>
// After:   React.createElement('h1', { className: 'title' }, 'Hello')

// ── Rules ─────────────────────────────────────────────────────

// 1. className, not class
<div className="container">Content</div>

// 2. All tags must close (including void elements)
<img src="logo.png" alt="Logo" />
<input type="text" />
<br />

// 3. Return one root element — wrap siblings in a Fragment
function Layout() {
  return (
    <>
      <header>Header</header>
      <main>Main content</main>
      <footer>Footer</footer>
    </>
  );
}

// 4. Embed JS expressions with { }
const user = { name: 'Alice', score: 42 };
const element = (
  <p>
    {user.name} scored {user.score * 2} points!
  </p>
);

// 5. Inline styles use camelCase objects
const box = (
  <div style={{ backgroundColor: '#e8f4fd', borderRadius: 8, padding: 16 }}>
    Styled box
  </div>
);

HTML

Full Editor

Related Resources

React Reference

Complete tag & property list

React How-To Guides

Step-by-step practical guides

React Exercises

Practice what you've learned