JSX is a syntax extension that lets you write HTML-like markup inside JavaScript/TypeScript. It is not HTML: className replaces class, and JavaScript expressions go inside curly braces.
Rules that trip up beginners
- One root element per return—or wrap siblings in a
fragment(<>...</>). - All tags must close:
<img />,<br />. - Embed expressions with
{expression}—variables, function calls, ternaries. - Use
classNameandhtmlForinstead ofclassandfor.
JSX compiles to function calls
<p>Hello, {name}</p>
// roughly becomes:
React.createElement('p', null, 'Hello, ', name);Understanding this helps when debugging or reading stack traces—you rarely write createElement by hand in modern code.
Self-check
- Why must you use
classNamein JSX? - How do you embed a variable in JSX?
Challenge
Hello JSX
- Change the greeting text inside
<p>. - Add a
{new Date().getFullYear()}expression in a second paragraph. - Click Run and confirm the preview updates.
Done when: the preview shows your greeting and the current year.
Tip: JSX must have one parent element—or use <>...</> fragments. The transpiler turns tags into React.createElement calls.
Interview prep
- What is JSX really?
Syntax sugar that compiles to
React.createElement—not HTML. UseclassName, camelCase events, and one parent or Fragment per return.