{movie.title}
\n//{movie.year}
\n//JSX looks like HTML, so your first instinct is to write HTML. Most of the time that works. Then you write class="card" and get a console warning, or put an if inside curly braces and get a compile error that points at the wrong line. Every one of these surprises makes sense once you see what JSX really is.
Vite compiles each JSX tag into a function call. This component:
\nfunction MovieCard() {\n return <h2 className=\"title\">Arrival</h2>;\n}compiles to roughly this:
\nimport { jsx } from 'react/jsx-runtime';\n\nfunction MovieCard() {\n return jsx('h2', { className: 'title', children: 'Arrival' });\n}The call returns a plain JavaScript object, a React element: a lightweight description of what should be on screen, with a type and some props. You can model the idea with a tiny function of your own:
function h(type, props, ...children) {\n return { type, props: { ...props, children } };\n}\n\nconst card = h('article', { className: 'card' },\n h('h2', null, 'Arrival'),\n h('p', null, 2016),\n);\n\nconsole.log(card.type); // article\nconsole.log(card.props.className); // card\nconsole.log(card.props.children[0].props.children); // [\"Arrival\"]React’s real elements carry a little more information, but the shape is the same. React walks this tree of objects and creates or updates the DOM to match.
\nNotice that the compiled code imports jsx for you. That’s why modern React files don’t start with import React from 'react'. Older tutorials include that line because the previous compiler turned JSX into React.createElement(…) calls, which needed React in scope. Since React 17’s automatic JSX runtime it’s unnecessary, so leave it out.
Once you know JSX is function calls, the rules below stop feeling arbitrary.
\nInside JSX, { } switches back to JavaScript. Whatever goes inside becomes an argument to a function call, so it must be an expression: something that produces a value.
function MovieCard() {\n const movie = { title: 'Arrival', year: 2016, rating: 8 };\n const age = 2026 - movie.year;\n\n return (\n <article>\n <h2>{movie.title.toUpperCase()}</h2>\n <p>{movie.year} · {age} years old</p>\n <p>{movie.rating >= 8 ? 'Must watch' : 'Maybe'}</p>\n </article>\n );\n}Variables, property access, method calls, arithmetic and the ternary operator a ? b : c are all expressions. if, for and const are statements, so they can’t go inside braces, in the same way you can’t pass if (x) {} as a function argument. When the logic gets bigger, compute a variable above the return and use that.
Here’s the same card with a label that needs real branching. The if lives in plain JavaScript above the return, and JSX only receives the finished value:
function MovieCard({ movie }) {\n let label;\n if (movie.rating >= 9) {\n label = 'Masterpiece';\n } else if (movie.rating >= 7) {\n label = 'Must watch';\n } else {\n label = 'Maybe';\n }\n\n return <p>{movie.title}: {label}</p>;\n}This pattern scales. Your JSX stays a readable picture of the output, and the decisions sit in ordinary code you can read, test and debug like any other function. (The { movie } in the parameter list is a prop; you’ll learn props properly in the next section.)
Attributes take braces too: <img src={movie.poster} alt={movie.title} />. Don’t wrap braces in quotes; src="{poster}" is the literal string {poster}.
Because props become keys of a JavaScript object, they follow JavaScript naming:
\nclass → className, for → htmlFor (both are reserved words in JS).onClick, tabIndex, autoComplete, maxLength.aria-* and data-* attributes keep their dashes: aria-label="Remove", data-id="42".style takes an object, with camelCase CSS properties: style={{ marginTop: 8 }}. A bare number means pixels for most properties. The double braces are an object literal inside a JSX expression.JSX is stricter than HTML. Every element closes: <img />, <input />, <br />. A component returns one root, wrapped in a fragment <>…</> if you need siblings. Comments go inside braces: {/* like this */}.
| You put in braces | \nWhat appears | \n
|---|---|
| A string or number | \nThe text (0 included) | \n
| A React element | \nThat element | \n
| An array of elements | \nEach element in order | \n
null, undefined, true, false | \nNothing | \n
| A plain object | \nError: “Objects are not valid as a React child” | \n
The “nothing” row is what makes conditional rendering work, and the 0 in the first row is a classic trap you’ll meet in the Conditional Rendering lesson.
You can now read any JSX and predict what it does. In the next section you’ll stop hard-coding “Arrival” and learn to think in components, splitting a whole screen into pieces that receive their data through props.
\n","toc":[{"id":"sec-1","text":"JSX is function calls","level":2},{"id":"sec-2","text":"Curly braces hold expressions","level":2},{"id":"sec-3","text":"Attributes are JavaScript names","level":2},{"id":"sec-4","text":"Close every tag","level":2},{"id":"sec-5","text":"What can be rendered","level":2}],"takeaways":["JSX compiles to function calls that create plain JavaScript objects describing the UI; React turns those objects into DOM.","Curly braces embed any JavaScript expression (a value), but never a statement such asif or for.","Attributes are camelCase JavaScript names, so you write className, htmlFor, onClick and pass style an object.","Strings and numbers render as text, while null, undefined, true and false render nothing and plain objects throw."],"further":[{"title":"Writing Markup with JSX","url":"https://react.dev/learn/writing-markup-with-jsx"},{"title":"JavaScript in JSX with Curly Braces","url":"https://react.dev/learn/javascript-in-jsx-with-curly-braces"},{"title":"Common components (props on every DOM element)","url":"https://react.dev/reference/react-dom/components/common"}],"quiz":[{"q":"What does <h2 className="title">{movie.title}</h2> become after Vite compiles it?
'h2' and props { className: 'title', children: movie.title }.","why":"Correct. JSX is syntax for creating element objects. React reads those objects to decide what DOM to create or update."},{"text":"A string of HTML that React inserts with innerHTML.","why":"React never builds HTML strings for rendering. That’s also why JSX text is safe from HTML injection by default."},{"text":"A real HTMLHeadingElement created with document.createElement.","why":"JSX only produces lightweight description objects. React creates or reuses DOM nodes later, during commit."},{"text":"It stays as JSX and the browser parses it natively.","why":"Browsers don’t understand JSX. Without a compiler step the page throws a syntax error."}],"answer":0},{"q":"Which line is valid JSX?
","options":[{"text":"<p>{if (watched) 'Seen'}</p>","why":"if is a statement, not an expression, so it can’t go inside curly braces. Use a ternary or compute the value before return."},{"text":"<img src="{poster}">","why":"Quotes make it the literal string “{poster}”, and the tag isn’t closed. Write src={poster} and self-close with />."},{"text":"<label class="field" for="title">Title</label>","why":"In JSX these are className and htmlFor, because class and for are reserved words in JavaScript."},{"text":"<div style={{ marginTop: 8, fontWeight: 'bold' }}>Hi</div>","why":"Correct. The outer braces enter JavaScript, the inner braces are an object, and CSS properties are camelCase. A bare number means pixels."}],"answer":3},{"q":"movie is { title: 'Arrival', year: 2016 }. What happens with <p>{movie}</p>?
{movie.title}."},{"text":"It renders the object as JSON.","why":"React never serializes objects for you. Use JSON.stringify(movie) if you really want to show JSON."},{"text":"It renders nothing, like null.","why":"Only null, undefined and booleans render nothing. A plain object is an error."}],"answer":1},{"q":"A movie’s description from your API contains <b>Must watch</b>. You render <p>{movie.description}</p>. What appears?
<b>Must watch</b>, tags and all.","why":"Correct. React escapes text content, so markup in data shows up as characters instead of running. That’s a key defence against cross-site scripting."}],"answer":2}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// A tiny stand-in for what JSX compiles to.\nfunction h(type, props, ...children) {\n return { type, props: { ...props, children } };\n}\n\n// Write the h() calls this JSX compiles to:\n//\n// {movie.year}
\n//{movie.year}
\n//JSX is function calls. The starter gives you h(type, props, ...children), a simplified version of what the compiler produces. Complete buildCard(movie) so it returns exactly what this JSX would create:
<article className=\"card\">\n <h2>{movie.title}</h2>\n <p>{movie.year}</p>\n</article>Use the movie argument, not hard-coded values.
null), and every argument after that is a child.","Attributes go in the props object: { className: 'card' }.","Children can be other h() calls: h('article', { className: 'card' }, h('h2', null, movie.title), …)."],"explanation":"Each JSX tag becomes one call: the tag name, then an object of attributes, then the children in order. Curly-brace expressions like {movie.title} are just arguments, which is why only expressions are allowed inside them. React’s real jsx() differs in details (it receives children already inside the props object instead of as extra arguments, a single child isn’t wrapped in an array, and keys are passed separately), but the tree of plain objects is the same idea.