US Trends

what compiles jsx into code

JSX is typically compiled into plain JavaScript by a compiler such as Babel or TypeScript. In React, that usually becomes calls like React.createElement(...) or the newer automatic JSX runtime helpers.

Quick Scoop

Browsers do not understand JSX directly, so it must be transformed before runtime.

What it becomes

Example:

jsx

const element = <h1 className="greeting">Hello</h1>;

Can compile to something like:

js

const element = React.createElement("h1", { className: "greeting" }, "Hello");

or, in newer setups, to JSX runtime helper calls instead of React.createElement.

In practice

  • Babel is the most common JSX compiler.
  • TypeScript can also compile JSX in .tsx files.
  • The output is not HTML; it is JavaScript that describes UI elements.

If you want, I can also show the difference between the classic JSX transform and the new automatic transform.