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
}

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.

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.