JSX

Every webpage consists of two ingredients. One describes what is to be seen: headings, paragraphs, buttons, images. The other describes what happens when someone clicks or taps. These two ingredients used to be written in separate files. JSX brings them together: you write the visible structure right in the middle of the program text, in a notation with angle brackets like <button>Buy</button>. Before execution, a helper program automatically converts this notation into ordinary program code that every browser understands.

Why interface and logic belong together

A button on a webpage is rarely just a button. It has a label, it can be gray and unclickable, sometimes it shows a loading spinner. All of this depends on the state of the program. If you separate appearance and logic into two files, you constantly have to jump back and forth while reading. JSX places both side by side.

The second advantage is reuse. You can describe a product tile once and then use it a hundred times, each time with different data. Such reusable building blocks are called components. At its core, a component is a perfectly ordinary function that returns JSX. This allows a large interface to be assembled from small, manageable parts.

The approach was controversial at first. Many developers considered the mixing a step backwards. Today, JSX is the standard notation in the most widely used tools for web interfaces. Anyone reading job postings for web development will almost inevitably come across it.

From angle-bracket text to executable code

Browsers don’t understand JSX. That’s why a translation step runs before publication, handled by tools like Babel or Vite. <button>Buy</button> becomes an ordinary function call, something like createElement('button', null, 'Buy'). JSX is thus pure convenience for humans. Technically, nothing is produced in the end that couldn’t also be typed by hand — it would just be much less readable.

Within JSX, you can draw on program code at any time. Everything in curly braces is calculated and then inserted. So <h1>Hello </h1> results in a different heading depending on the value of the variable. Lists are created this way too: a loop automatically turns an array of products into twenty tiles.

A typical stumbling block is the small deviations from HTML. Because class already has a different meaning in JavaScript, you write className instead. Every element must be properly closed, even an image: <img /> instead of <img>. Such rules seem finicky, but they prevent the translator from having to guess.

JSX in projects, job postings, and company announcements

JSX is most commonly encountered together with React, a library for web interfaces developed by Meta. Large parts of Facebook, Instagram, Netflix, and countless online shops are built this way. Next.js, a widely used framework for building websites, also relies on it. Anyone who sees a file with the extension .jsx or .tsx is dealing with this notation.

JSX rarely appears directly in the news, but it does show up in job postings and technical discussions. There is regular debate over whether React with JSX or competitors like Vue and Svelte are the better approach. These alternatives use their own notations but follow the same underlying idea of reusable building blocks.

A common misconception is that JSX is its own programming language. That is not true. It is an additional notation for JavaScript, comparable to a form of shorthand. You can learn it in a few hours. The real effort lies in understanding the tool behind it — that is, React itself.