What Is JSX in React? Syntax, Rules, and Examples

JSX is a syntax extension for JavaScript that lets you write markup that looks like HTML inside your components. React turns that markup into plain JavaScript objects and then renders them into the browser. The JSX syntax rules matter because JSX is stricter than HTML: it closes every tag, it uses camelCase for most attributes, and it lets you embed JavaScript expressions with curly braces.

Here is a tiny component written in JSX:

App.jsx

function Greeting() {
  return <h1>Hello from JSX</h1>;
}

React renders a heading that says "Hello from JSX." The JSX inside the return statement is not HTML. It is syntax that a build tool compiles into JavaScript, and only then does React create the matching DOM node.

JSX is separate from React

JSX and React are two different things. JSX is a syntax extension for JavaScript, while React is the library that reads the resulting element descriptions and updates the page. You can use JSX without React, but in a React project the two almost always appear together.

JSX keeps the markup next to the logic that renders it, which is why it reads so naturally inside a component. You will see the pairing everywhere in this course, because components are where markup and logic meet.

Browsers do not understand JSX. A tool such as Vite transforms it into JavaScript before it ships to the browser. If you do not have a project yet, the guide on creating a React app with Vite sets one up with JSX support built in.

The rules of JSX

JSX borrows the familiar shape of HTML but enforces a few stricter rules. These rules feel like extra work at first, but they remove a whole class of silent HTML mistakes.

First, a component must return one root element. When two tags sit side by side, wrap them in a parent element or an empty fragment:

App.jsx

function TodoList() {
  return (
    <>
      <h1>My tasks</h1>
      <p>Three tasks left.</p>
    </>
  );
}

The fragment groups the two children without adding an extra element to the page. This rule exists because JSX compiles to JavaScript objects, and a function can return only one value.

Second, every tag must be closed. A self-closing image tag in JSX is written with a slash:

App.jsx

<img src="logo.png" alt="Site logo" />

HTML allows some unclosed tags, but JSX does not. React prints a clear error message when a tag is missing its closing slash.

Third, most attributes use camelCase. The word class is reserved in JavaScript, so JSX uses className.

Dashed SVG attributes such as strokeWidth become camelCase here too. Two exceptions stay hyphenated: aria-* and data-* attributes.

How JSX compiles to objects

Each JSX element compiles into a plain JavaScript object that describes the element type and its props. React reads that object and creates the matching DOM node.

This is why JSX is stricter than a template string. The object must be well formed before React can use it, so the compiler catches malformed tags at build time instead of at runtime.

JSX is not rendered text either. The heading in the first example becomes an object, and React decides how to commit it to the page. That single object is also why a component returns one root element: React hands back one description per component.

One common confusion is the double curly braces you see around inline styles. They are an object inside the expression braces, not a special syntax. The guide on JSX versus HTML compares every attribute difference in a table.

What to learn next

JSX is the language you will use to describe every React screen. Next, learn how to embed variables and expressions with curly braces, then move on to rendering lists with the map method. For the full attribute-by-attribute comparison, the guide on rendering variables and expressions in JSX is the natural follow-up.