JSX stands for JavaScript XML — a syntax extension for JavaScript that lets you write HTML-like markup directly inside your JS files. It looks exactly like HTML at a glance, but it's actually much stricter and carries dynamic capabilities that plain HTML doesn't have.

JSX isn't strictly required to use React, but it's the overwhelmingly recommended approach because it gives component code a clear, visual structure that's easy to read at a glance.

Browsers don't natively understand JSX — running it directly in a JavaScript engine would throw a syntax error immediately. Before code reaches the browser, build tools like Babel compile JSX into standard JavaScript, transforming tags into React.createElement() calls.

This is why, in older versions of React, React had to be explicitly in scope wherever JSX was used: the compiled output referenced React.createElement directly, even though the source code never mentioned it.

Curly braces {} create a window that escapes out of JSX markup back into plain JavaScript. Inside them, you can place any valid expression — a variable name, a mathematical calculation, or a function call like name.toUpperCase() — and React evaluates it and injects the result into the DOM.

This is the mechanism that makes JSX dynamic instead of static: whatever the expression resolves to at render time is exactly what appears on screen.

Because JSX is closer to JavaScript than HTML, it must follow JavaScript's rules about reserved keywords. The most common pitfall is the class attribute — class is a reserved word in JavaScript for defining ES6 classes, so JSX cannot use it directly.

To apply CSS classes in JSX, you must use className instead, exactly as shown in <div className="container">. Forgetting this and writing class won't crash the app, but the styling simply won't apply.

Building on the reserved-word rule, React requires all multi-word HTML attributes and event handlers to be written in camelCase. onclick becomes onClick, tabindex becomes tabIndex, and the for attribute on labels — also a reserved JS loop keyword — becomes htmlFor.

This naming consistency mirrors how the DOM APIs themselves are exposed to JavaScript, so it isn't an arbitrary React convention but a bridge to how the underlying platform already names these properties.

A JSX expression must evaluate to exactly one root element — you can't return an <h1> and a <p> side by side from a component without a wrapper. Wrapping them in an extra <div> works, but it adds a node to the DOM that has no real purpose.

React's Fragment, written as empty tags <></>, solves this by grouping elements to satisfy the single-root rule without injecting an unnecessary wrapper element into the rendered output.

You can't use a traditional if/else statement directly inside a JSX block, because JSX expects an expression — a value — not a statement. The ternary operator (condition ? trueResult : falseResult) fills this gap for inline conditional rendering.

A pattern like {isLoggedIn ? <Logout /> : <Login />} is extremely common in React precisely because it lets a single expression decide which of two elements to render based on a boolean.

When you want an element to render only if a condition is true, and render nothing at all otherwise, the logical AND operator (&&) is the tool for the job. React evaluates the left side, and if it's truthy, renders whatever's on the right side of the &&.

If the condition is falsy, React ignores the right side entirely, so a pattern like {hasNewMessages && <Notification />} leaves the DOM clean rather than rendering an empty or broken element.

Standard HTML comments (<!-- -->) cause syntax errors inside JSX, and standard JavaScript // comments placed between tags will render directly to the screen as literal text instead of being hidden.

To comment inside a JSX tree, you first open a JavaScript expression window with curly braces, then place a block comment inside it: {/* comment */}. That's the only form of comment JSX actually recognizes as non-rendering.

Every value embedded with curly braces is automatically escaped by React before it touches the DOM. A comment or username containing <script>alert(1)</script> rendered as {comment.text} shows up as harmless, literal text — it is never parsed as an actual tag.

This is what protects a React app against XSS by default, without writing a single line of manual sanitization. The one deliberate escape hatch is dangerouslySetInnerHTML, whose intentionally alarming name is a reminder to only ever use it with content that's already been sanitized by a trusted library.

Every curly-brace expression in JSX is evaluated, not printed as text — <h1>{10 + 5}</h1> renders the number 15, not the literal string 10 + 5. That evaluation behavior is what ties together everything from embedded variables to ternaries to logical AND checks.

Keeping that mental model — curly braces mean 'evaluate this JavaScript and show the result' — is what makes the rest of JSX's syntax rules feel consistent rather than arbitrary.

The naming rules in this lesson — className instead of class, htmlFor instead of for, and camelCase for every multi-word attribute — all trace back to the same root cause: JSX attributes are JavaScript property names, not HTML attribute strings.

Once that connection clicks, the exceptions stop feeling like a list to memorize and start feeling like a predictable consequence of JSX being JavaScript underneath its HTML-like appearance.

Structurally, this lesson also covered how JSX keeps components clean: the single-root-element rule forces every component to return one coherent tree, and Fragments let you satisfy that rule without littering the DOM with meaningless wrapper <div>s.

Combined with conditional rendering via ternaries and &&, this is what lets a single component's markup adapt to different states while still compiling down to one predictable, minimal DOM structure.

With JSX syntax mastered — compilation to React.createElement, curly-brace expressions, camelCase and reserved-keyword exceptions, Fragments, and conditional rendering — you have everything needed to read and write real component markup fluently.

The next step is learning how components pass data to one another through props, building on this same JSX foundation to create genuinely reusable pieces of UI.

Welcome to JSX. Welcome to JSX Architecture. JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like markup directly inside your JavaScript files. While it may look exactly like HTML, it is actually much stricter and has dynamic capabilities. JSX is not strictly required to use React, but it is highly recommended because it provides a clear, visual structure to your component code.

The Compilation Secret. Browsers don't natively understand JSX. If you tried to run JSX in a normal JavaScript engine, it would throw a syntax error immediately. Before your code reaches the browser, build tools like Babel compile your JSX into standard JavaScript function calls. Specifically, it transforms your tags into React.createElement() invocations. This is why React must always be in scope when using JSX in older versions of React.

Embedding Expressions. The true power of JSX lies in its ability to embed JavaScript directly within the markup. By using curly braces {}, you create a window that escapes out of HTML syntax and back into JavaScript. Inside these braces, you can place any valid JavaScript expression, such as variable names, mathematical calculations, or function calls. React will evaluate the expression and inject the result into the DOM.

To execute mathematical calculations dynamically inside your markup, which syntax is required to escape the JSX scope?

• →( 10 + 5 ) Parentheses
• →{ 10 + 5 } Curly Braces

Reserved Keywords. Because JSX is closer to JavaScript than it is to HTML, it must adhere to JavaScript's strict rules regarding reserved keywords. The most common pitfall for beginners is the 'class' attribute. In JavaScript, 'class' is a reserved word used for defining ES6 classes. Therefore, to apply CSS classes in JSX, you must strictly use the 'className' attribute instead.

In standard HTML, you bind an inline click handler using the 'onclick' attribute. How must this be written in React JSX?

• →onclick
• →onClick (camelCase)

camelCase Attributes. Building upon the reserved word rule, React dictates that all HTML attributes and event handlers must be written in camelCase. This means 'onclick' becomes 'onClick', 'tabindex' becomes 'tabIndex', and the 'for' attribute in labels (which is also a reserved JS loop keyword) becomes 'htmlFor'. This strict naming consistency helps bridge the gap between DOM APIs and JavaScript logic.

The Root Element Rule. A fundamental limitation of JSX is that an expression must evaluate to a single root element. You cannot return multiple parallel elements (like an h1 and a p tag side-by-side) from a component without wrapping them in a parent. If you do not want to add unnecessary div wrappers that bloat your DOM tree, React provides a feature called 'Fragments', denoted by empty tags: <></>.

Conditionals: Ternary. You cannot use traditional if/else statements directly inside a JSX block because JSX expects an expression (a value), not a statement. Instead, you must use the JavaScript ternary operator (condition ? trueResult : falseResult) for inline conditional rendering. This pattern is incredibly common in React for toggling UI states based on boolean variables.

Conditionals: Logical AND. When you only want to render an element if a condition is true, and render absolutely nothing if it is false, you can use the Logical AND (&&) operator. React will evaluate the condition, and if it is truthy, it will render the JSX on the right side of the &&. If it is falsy, React will ignore it entirely, leaving the DOM clean.

Because curly braces execute JavaScript inside JSX, what will physically render to the screen when React processes <h1>{ 10 + 5 }</h1>?

• →The string '10 + 5'
• →The evaluated number '15'

Complete the following ternary logic to render 'Admin Dashboard' if the isAdmin boolean is true, and 'User Profile' if it is false.

• →User Profile
• →Admin Dashboard

If a component attempts to return both an <h1> and a <p> element at the same hierarchy level, how should you wrap them to prevent a compiler error?

• →Use a <div> to bloat the DOM
• →Use a React Fragment <>

Comments in JSX. Standard HTML comments <!-- --> will cause syntax errors in JSX. Standard JavaScript comments // will render directly to the screen as text if placed between tags. To write a comment inside a JSX tree, you must first open a JavaScript expression window using curly braces, and then place a multi-line JavaScript block comment inside it: {/* comment */}.

Automatic Escaping Prevents Injection. Every value you embed with curly braces is automatically escaped by React before it touches the DOM. If a comment or username contains something like '<script>alert(1)</script>', rendering it as {comment.text} shows that string as harmless, literal text on the page — it is never parsed as an actual tag. This is what protects a React app against XSS by default, without you writing a single line of sanitization code.

Mastery Achieved. JSX Syntax Mastery achieved! You understand how JSX compiles to JS, how to use camelCase, embed expressions, manage conditionals, and utilize Fragments to keep your DOM clean. You are fully ready to leverage these structures inside powerful React components.