JSX: HTML-like syntax
📚 What is JSX? JSX is a special syntax that lets you write HTML-like code directly inside JavaScript. React components return JSX, which the build tool converts to regular JavaScript calls. It looks like HTML but has the full power of JavaScript available inside {} expressions.
Appy Says…
JSX looks like HTML inside JavaScript — and that's exactly what it is. React uses JSX so you can describe your UI directly in your component code. It's not magic; it compiles to plain JavaScript function calls. Once you see how, it all makes sense.
What is JSX?
JSX (JavaScript XML) is a syntax extension that lets you write HTML-like code inside JavaScript. Babel transforms it into React.createElement() calls before it runs in the browser.
- •
return <div className="card"><h1>{title}</h1></div>; - •Use
{ }to embed any JavaScript expression:{2 + 2},{name.toUpperCase()} - •HTML attributes differ:
class→className,for→htmlFor - •Self-closing tags:
<img />,<br />,<input /> - •Must return ONE root element (or use a Fragment:
<>...</>) - •Comments:
{/* comment */}
Think of it like a Minecraft command with templating
Imagine a Minecraft command block that uses variables: /say Hello ${playerName}!. JSX works the same — write your structure like HTML, then insert dynamic values with {curly braces}.
How It Works
- •1. You write JSX:
const el = <h1>Hello {name}</h1>; - •2. Babel compiles it to:
const el = React.createElement('h1', null, 'Hello ', name); - •3. React takes those element objects and builds the real DOM
- •4.
{ expression }evaluates any valid JS and inserts the result - •5. Conditional rendering:
{isLoggedIn && <UserMenu />} - •6. List rendering:
{items.map(i => <Li key={i.id}>{i.name}</Li>)}
Real-World Examples
- •Dynamic greeting:
<h1>Welcome, {user.name}!</h1> - •Conditional:
{error && <ErrorBanner message={error} />} - •List:
{songs.map(s => <SongRow key={s.id} song={s} />)} - •Style:
<div style={{ color: 'red', fontSize: '16px' }}>(object with camelCase props)
Key Facts
- •JSX is NOT HTML — it's syntax sugar for
React.createElement() - •In React 17+, you don't need to
import Reactat the top — the transform handles it - •JSX expressions must return a value — statements like
if/fordon't work inside{} - •TypeScript + JSX uses
.tsxfile extensions
Watch Out!
JSX must have ONE root element. Returning two sibling elements causes an error. Use a Fragment <>...</> to wrap without adding an extra DOM node: return <><Title /><Body /></>;
Remember
{ } embeds JS expressions. className not class. Must return one root element — use <></> fragments.
What You Learned
- •JSX: HTML-like syntax in JS; compiles to React.createElement()
- •{ } embeds expressions; className/htmlFor differ from HTML; one root element rule
- •Unlocks: dynamic UIs, conditional rendering, list rendering in React
Key Facts
- →JSX is NOT HTML — it's syntax sugar for
React.createElement() - →In React 17+, you don't need to
import Reactat the top — the transform handles it - →JSX expressions must return a value — statements like
if/fordon't work inside{} - →TypeScript + JSX uses
.tsxfile extensions
Real-World Examples
Remember
{ } embeds JS expressions. className not class. Must return one root element — use <></> fragments.
Quick Quiz
JSX is?