JSX is markup inside JavaScript

JSX is a syntax for writing element descriptions inside JavaScript.

const heading = <h1>Latest notes</h1>

This is not an HTML string. A build tool transforms it into JavaScript that describes the element type, properties, and children React should render.

JSX looks like HTML because React ultimately creates DOM elements, but it follows JavaScript module rules. Values come from variables and imports in the current file.

Because JSX is an expression, you can return it, assign it, pass it to a function, or choose it with a condition:

function Status({ saved }) {
  const message = saved
    ? <p>Changes saved.</p>
    : <p>You have unsaved changes.</p>

  return message
}

Pass saved={true} and the page shows Changes saved. Pass saved={false} and you get the unsaved message.

The browser does not execute JSX directly. Vite transforms it during development and build.

Do not build JSX by joining untrusted strings and inserting them as HTML. Normal text expressions are escaped by React. APIs that inject raw HTML bypass that protection and need a separate security review.

That transformation is why JSX can live inside .jsx files treated as JavaScript modules. Your editor and bundler both understand imports, exports, and variables in the same file as the markup.

Tools like the TypeScript playground or the React docs JSX compiler show the output as a tree of React.createElement calls. Each call names the tag type and passes props as a plain object.

You can store JSX in a variable, as the Status example shows, and return that variable later. The stored value is already an element description, not a string of HTML.

Open the built JavaScript or a JSX compiler tool and inspect one transformed element. You do not need to memorize the output. Notice that JSX becomes JavaScript data, not an HTML file.