Skip to main content

JavaScript XML (JSX)

PropertyValue
descriptionJavaScript XML (JSX)
tagsref
rating

Overview​

JSX is a syntax extension that lets developers write markup-like structures directly inside JavaScript.

It matters because it shapes how many modern frontend codebases represent UI, especially in react and adjacent tooling.

What JSX Actually Is​

JSX looks similar to HTML, but it is not raw HTML.

Instead, it is source code that gets transformed into JavaScript function calls or runtime instructions during build or compilation steps.

That means JSX is best understood as developer-facing syntax rather than a browser-native format.

Where JSX Is Used​

JSX is most closely associated with React, but the syntax can be supported by multiple tools and runtimes.

In practice, teams encounter JSX in:

  • React components
  • TypeScript projects using TSX
  • MDX content with embedded components
  • build pipelines powered by Babel, TypeScript, or framework compilers

Because of that, JSX often sits between js, ts, react, and mdx.

JSX vs HTML​

JSX resembles html, but the rules are different.

  • Attributes use JavaScript-friendly names in some cases.
  • Expressions can be embedded with braces.
  • Components can appear as custom tags.
  • Everything still follows JavaScript parsing rules.

That mix is powerful, but it also confuses people who assume JSX is just pasted HTML.

JSX vs TSX​

TSX is not a separate UI language.

It is simply JSX used in a ts file so the code can also include TypeScript types.

That distinction matters when teams discuss compiler settings, file extensions, or framework conventions.

Why JSX Matters​

JSX matters because it keeps structure and behavior close together in component-based UI systems.

Supporters usually like:

  • readable component trees
  • direct access to JavaScript expressions
  • easier composition of reusable UI pieces

Critics usually point to:

  • mixed markup and logic in one file
  • build-step dependency
  • occasional syntax confusion for newcomers

Both views are reasonable depending on the project and team style.

Practical Caveats​

JSX is convenient, but it introduces tooling requirements.

  • Browsers do not execute author-written JSX directly.
  • Linting and formatting rules become more important.
  • Component and attribute casing rules need to be understood.
  • Escaping from JSX to plain strings, raw HTML, or MDX has its own edge cases.

That is why JSX-heavy projects usually rely on strong compiler and editor support.

Frequently Asked Questions​

Is JSX required for React?​

No. React can be written without JSX, but JSX is the most common authoring style.

Is JSX a standard web technology?​

No. It is a widely used ecosystem convention rather than a browser standard.

Does JSX only work with Babel?​

No. Babel is common, but TypeScript and framework-specific compilers can also handle JSX transforms.

Resources​