CodePark/ questions / Fundamentals & JSX
START PRACTICINGPRACTICE
Frontend question · React › Fundamentals & JSX

What is JSX, and what does it compile to?

JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. Browsers cannot run it. So a compiler such as Babel, SWC or esbuild turns each tag into a function call at build time.

With the modern automatic runtime (React 17 and later), <h1 className="title">Hi</h1> compiles to roughly jsx('h1', { className: 'title', children: 'Hi' }). The compiler imports jsx from react/jsx-runtime for you. The older classic runtime produced React.createElement('h1', { className: 'title' }, 'Hi'). That is why files used to need import React.

Either way, the result is a plain object called a React element. It describes what to render. It is not a DOM node.

Because JSX is JavaScript, a few rules follow:

  • Use className instead of class.
  • Write attributes in camelCase, like onClick and tabIndex.
  • Use curly braces to embed JavaScript expressions, like {user.name}.
  • Return a single root element, or wrap siblings in a fragment.
  • JSX is syntax sugar that a compiler removes at build time.
  • The automatic runtime calls jsx() from react/jsx-runtime. The classic runtime calls React.createElement.
  • JSX produces plain React element objects, not DOM nodes.
  • Curly braces embed JavaScript expressions. Props use className and camelCase names.
  • Each expression has one root. Use a fragment to group siblings.