JSX Syntax
JSX lets you write HTML-like markup directly inside JavaScript.
Syntax
return <h1>Hello {name}</h1>;JSX is a syntax extension that lets you write markup that looks like HTML inside your JavaScript. A build tool (like Vite) converts it into regular React.createElement calls.
Rules of JSX
- A component must return one root element (wrap siblings in a parent or a Fragment).
- All tags must be closed, including self-closing ones like
<br />. - Return multi-line JSX inside parentheses for readability.
Example
function Card() {
return (
<div>
<h2>Title</h2>
<p>Some content here.</p>
<br />
</div>
);
}When to use it
- A designer-to-dev handoff tool generates JSX from Figma designs so engineers receive valid component templates they can drop straight into their React project.
- A linter rule enforces that all JSX components return a single root element, catching multi-root returns in pull requests before they reach CI.
- A code-gen script produces JSX templates for a component library, relying on self-closing tags and className conventions to match the design system.
More examples
Basic JSX return
Shows a component returning JSX with a single root div, className in place of class, and self-closing semantics.
function Card() {
return (
<div className="card">
<h2>Title</h2>
<p>Content goes here.</p>
</div>
);
}Self-closing tags in JSX
Demonstrates that tags without children must be explicitly self-closed with /> in JSX, unlike HTML.
function Avatar({ src, alt }) {
return (
<figure>
<img src={src} alt={alt} />
<hr />
</figure>
);
}JSX compiled to createElement
Reveals that JSX is syntactic sugar: the build tool transforms it into React.createElement calls at compile time.
// What you write:
// const el = <h1 className="title">Hello</h1>;
// What Vite/Babel compiles it to:
const el = React.createElement(
'h1',
{ className: 'title' },
'Hello'
);
Discussion