What Is JSX (JavaScript XML)?

What Is JSX (JavaScript XML)?

JSX is a syntax extension for JavaScript that allows you to write HTML-like structures directly inside JavaScript code. It was created by the Facebook team (now Meta) in 2013 as part of the React library and has since become a standard in the frontend ecosystem.

Instead of separating logic and markup into different files (JavaScript and HTML), JSX combines them in a single place. A compiler (such as Babel) transforms JSX syntax into regular JavaScript function calls.

So if you use JSX syntax in your code:

const element = <h1>Hello World!</h1>;

the compiler will convert it into plain JavaScript:

const element = React.createElement('h1', null, 'Hello World!');

JSX Code Examples

A rendering function with a condition:

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <p>Hello World!</p>
      ) : (
        <p>Log in please.</p>
      )}
    </div>
  );
}

A list with mapped elements:

const items = ["JSX", "React", "Hooks"];

function List() {
  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

A button with an action:

const element = (
  <button 
    onClick={() => console.log('clicked!)}
    style={{ backgroundColor: "blue", color: "white" }}
  >
    Click me
  </button>
);

Key differences compared to HTML

In JSX, className is used instead of class (since class is a reserved JavaScript keyword), htmlFor is used instead of for, and all tags must be properly closed, including self-closing ones like <img /> or <br />.

File extensions: .js vs .jsx – when to use which?

Traditionally, files containing plain JavaScript used the .js extension, while files that included JSX syntax were saved with the .jsx extension. Today, however, many projects use .js for both, even when the code contains JSX. Modern bundlers such as Vite, Webpack, or esbuild can easily detect and handle JSX in .js files.

The situation is different with TypeScript. The .tsx extension is required for files that contain JSX. The TypeScript compiler will throw an error if JSX is used in a .ts file. The .ts extension is reserved for files that contain only logic, without any UI elements.

Summary

JSX significantly simplifies building modern user interfaces by combining logic and structure in a clear and intuitive way. Thanks to its readability and flexibility, it has become a standard in many frontend libraries, not just React.