JSX is a syntax extension that lets you write HTML-like markup directly inside JavaScript. It looks like HTML, but it isn't — it gets converted into regular JavaScript function calls before it ever reaches a browser.
const element = <h1>Hello, world!</h1>;This isn't a string, and it isn't HTML — it's JavaScript, compiled by the build tooling from your last lesson into something like React.createElement('h1', null, 'Hello, world!'). You'll never write that longer form yourself; JSX is simply a more readable way to write the same thing.
Curly braces { } drop any JavaScript expression directly into JSX:
const name = "Priya";
const element = <h1>Hello, {name}!</h1>;
const total = <p>Total: {2 + 2}</p>;Expressions, not statements
Only expressions work inside { } — something that produces a value. Statements like if or a for loop don't fit directly; the Conditional Rendering lesson later in this section covers the expression-based patterns JSX actually uses instead.
A handful of real differences trip up almost everyone coming from HTML:
| HTML | JSX | Why |
|---|---|---|
| class="box" | className="box" | `class` is a reserved word in JavaScript |
| `for` is also reserved | ||
| Every tag must be closed, even ones HTML allows to stay open | ||
| onclick="..." | onClick={...} | Event names are camelCase, and take a real function, not a string |
A component can only return one top-level element — this trips up nearly everyone the first time:
// This is an error — two sibling elements with no single parent:
// return (
// <h1>Title</h1>
// <p>Text</p>
// );
// Wrap them in one element instead:
return (
<div>
<h1>Title</h1>
<p>Text</p>
</div>
);The Fragments and Portals lesson later in this section covers a way to satisfy this rule without adding an extra, meaningless <div> to the actual page.