What is JSX?

Topic 3 of 6

JSX is not HTML. It’s also not a string. It’s a syntax extension for JavaScript that gets transformed (by tools like Babel or the built-in React compiler in modern setups) into regular JavaScript calls like React.createElement().
Here’s a simple example:
jsx

const element =<h1>Hello, world!</h1>;

This looks like HTML, but it’s valid JavaScript thanks to JSX. When React renders it, it becomes a real DOM element on the page.

Why use JSX?

It’s more readable than writing createElement() calls.
It allows you to mix logic (JavaScript) and markup in the same place.
It encourages thinking in terms of components rather than plain strings or templates.

Note: In React 19 and modern projects (using Vite, Next.js, or Create React App with the new JSX transform), you don’t need to import React at the top of every file anymore. The transformation happens automatically.