So what is jsx? In React, JSX is a syntax extension for JavaScript that lets you write markup that looks like HTML directly inside your code. It is not a separate template language and it is not actually HTML — it is JavaScript wearing an HTML-shaped costume. Understanding that one idea clears up most of the confusion beginners hit in 2026.
What changed in 2026
- No more
import React at the top of every file. The modern JSX transform (shipped back in React 17, now universal) injects the runtime for you. That boilerplate line is gone.
- TSX is the default. Most new React projects use TypeScript, so files end in
.tsx and your editor type-checks JSX props as you type.
- Some JSX runs on the server. React Server Components (stable in Next.js) mean parts of your JSX render on the server and never ship to the browser — but the syntax you write is identical.
- Bundlers do the work. Vite, esbuild, and SWC all transpile JSX out of the box, so the old Babel-config ceremony is mostly gone.
None of this changed what JSX is. It changed how little setup you need to use it.
JSX is not HTML, and that matters
At a glance JSX looks like HTML, but it compiles to plain JavaScript. That is why the rules differ in small, annoying ways:
| HTML |
JSX |
Why it differs |
class="btn" |
className="btn" |
class is a reserved word in JS |
for="email" |
htmlFor="email" |
for is reserved too |
onclick="..." |
onClick={fn} |
camelCase events, real function refs |
style="color:red" |
style={{ color: 'red' }} |
style is a JS object, not a string |
<img> |
<img /> |
every tag must be closed |
Anything inside { } is live JavaScript: variables, function calls, ternaries. That is the real payoff — your markup and your logic share one language.
How JSX actually compiles
This is the part that demystifies everything. When you write:
const greeting = <h1 className="title">Hello, {name}</h1>
the compiler turns it into a function call:
const greeting = _jsx('h1', { className: 'title', children: ['Hello, ', name] })
So JSX is syntactic sugar over React.createElement (or the newer _jsx runtime). It returns a plain JavaScript object — a lightweight description of what the UI should look like — not a real DOM node. React reads that object and decides what to render. Once you internalize "JSX is a function call that returns an object," the weird bits stop being weird.
The rules that trip people up
- One parent element. A component returns a single root. Wrap siblings in a
<div> or, better, an empty <>...</> fragment so you do not add junk to the DOM.
{ } takes expressions, not statements. A ternary works inside JSX; an if block or a for loop does not. Use .map() for lists and condition && <Thing /> for conditional rendering.- Keys on lists. When you
.map() to elements, give each a stable key prop. Skipping this is the single most common React warning.
- Comments look odd. Inside JSX you write
{/* like this */}, not <!-- html style -->.
What to skip
- Skip memorizing
React.createElement. You almost never write it by hand in 2026. Knowing it exists is enough.
- Skip a manual Babel setup. Vite and Next.js configure the JSX transform for you; hand-rolling a
.babelrc is wasted effort for new projects.
- Skip the
import React line. With the modern transform it is unnecessary noise. If your linter still demands it, update the config rather than adding the import back.
- Do not cram heavy logic into JSX. If a return statement grows a three-level nested ternary, pull the logic into a variable above the
return. JSX is for describing UI, not for hiding a control-flow puzzle.
JSX versus the alternatives
You do not strictly need JSX, but the alternatives explain why nearly everyone uses it. Verify the current state of any library yourself.
| Approach |
Looks like |
Reality in 2026 |
| JSX |
HTML-ish markup |
The standard; assumed by every tutorial and job |
React.createElement |
Nested function calls |
Verbose; fine to read, painful to write |
htm tagged templates |
Backtick strings |
No build step, but niche and less tooling |
| Vue/Svelte templates |
Separate template block |
Different framework, different mental model |
FAQ
Is JSX required to use React?
No. You can call React.createElement directly or use a library like htm. But JSX is the standard, and essentially every tutorial, codebase, and job description assumes it.
Does the browser understand JSX?
No. Browsers only run plain JavaScript. A build step (Vite, SWC, or Babel) transpiles JSX before it ever reaches the browser.
Is JSX only for React?
It started with React but is now used by Preact, Solid, and others. The syntax is shared; what each library does with the compiled output differs.
What is the difference between JSX and TSX?
TSX is JSX inside a TypeScript file. Same syntax, plus type checking on your props and state. Most 2026 projects use TSX by default.
Where to go next
Still weighing frameworks and tooling? Compare the two dominant frontend options in React vs Vue in 2026, pick an editor for writing all this JSX in VS Code vs Cursor in 2026, and when your app needs deployment, sort out Docker vs Kubernetes in 2026.