What is JSX in React?

This article provides a comprehensive overview of JSX (JavaScript XML) in React, explaining what it is, why it is used, and how it functions under the hood. You will learn the core differences between JSX and standard HTML, how to embed JavaScript expressions within your UI code, and how compilers like Babel translate JSX into regular JavaScript that web browsers can understand.

Understanding JSX

JSX stands for JavaScript XML. It is a syntax extension for JavaScript used primarily with React to describe what the user interface (UI) should look like. Although it resembles HTML, JSX is actually a powerful template language that comes with the full power of JavaScript.

Using JSX is not strictly required to write React applications, but it is highly recommended because it makes code easier to write, read, and maintain. Instead of separating your markup (HTML) and logic (JavaScript) into different files, React uses components that contain both, and JSX is the tool that makes this integration seamless.

How JSX Works Under the Hood

Web browsers cannot read JSX directly because it is not valid JavaScript. Before the code reaches the browser, a build tool (like Babel or Vite) must compile the JSX into standard JavaScript.

Every JSX element is syntactic sugar for calling React.createElement().

For example, this JSX code:

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

Is compiled into this standard JavaScript:

const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
);

The React.createElement() function performs validation checks and creates an object representing the virtual DOM element, which React then uses to update the actual DOM efficiently.

Key Rules of JSX

Because JSX is closer to JavaScript than HTML, there are a few important rules and differences you must follow:

1. You Must Return a Single Root Element

JSX expressions must have exactly one outermost element. If you want to return multiple sibling elements, you must wrap them in a container element (like a <div>) or use a React Fragment (<> and </>).

// Correct usage with a Fragment
function MyComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph</p>
    </>
  );
}

2. CamelCase Attribute Naming

Since JSX compiles into JavaScript objects, attributes are treated as JavaScript keys. Therefore, React uses camelCase naming conventions for attributes instead of standard HTML lowercase names.

• Use className instead of class
• Use htmlFor instead of for
• Use onClick instead of onclick
• Use tabIndex instead of tabindex

3. All Tags Must Be Closed

In standard HTML, some tags like <img>, <input>, and <br> do not require a closing tag. In JSX, every tag must be explicitly closed. Self-closing tags must end with a forward slash.

// Self-closing tag in JSX
<img src="logo.png" alt="Logo" />
<br />

Embedding Expressions in JSX

One of the greatest benefits of JSX is the ability to write JavaScript expressions directly inside the markup. To do this, you wrap the JavaScript code in curly braces {}.

function UserGreeting() {
  const name = "Alex";
  return <h1>Hello, {name}!</h1>;
}

You can put any valid JavaScript expression inside the curly braces, including variable names, arithmetic operations, function calls, and ternary operators for conditional rendering.