React JSX

React JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. JSX is not required to use React, but almost everyone uses it because it makes components easy to read.

Behind the scenes, a build tool such as Vite turns each JSX tag into a regular JavaScript function call that creates a React element.

Embedding Expressions in JSX

Inside JSX, curly braces {} open a window back into JavaScript. You can put any expression there: a variable, a calculation, or a function call.

function Profile() {
  const name = 'Ayesha';
  const year = new Date().getFullYear();
  return (
    <p>
      {name} has {3 + 4} new messages. It is {year}.
    </p>
  );
}

Ayesha has 7 new messages. It is 2026.

Expressions produce a value. Statements like if or for cannot go directly inside the braces, but you can use the ternary operator or call a function instead.

JSX Rules

• Return a single root element. Wrap siblings in a <div> or a fragment <>...</>.
• Close every tag, including empty ones: <img />, <br />, <input />.
• Use className instead of class, and htmlFor instead of for.
• Attribute names are camelCase: onClick, tabIndex, maxLength.
• Inline styles take an object: style={{ color: "red", fontSize: 18 }}.

React Fragments

A fragment groups elements without adding an extra node to the page. This keeps your HTML clean, for example inside a table row or a list.

function Name() {
  return (
    <>
      <h2>Naeem Amin</h2>
      <p className="role">Full-stack developer</p>
    </>
  );
}

Naeem Amin
Full-stack developer

Attributes and Inline Styles

You can pass strings with quotes or JavaScript values with braces. The style attribute needs an object, which is why you see double braces: the outer pair means JavaScript, the inner pair is the object.

const avatar = 'https://example.com/me.png';

function Avatar() {
  return (
    <img
      src={avatar}
      alt="Profile photo"
      width={80}
      style={{ borderRadius: '50%', border: '2px solid teal' }}
    />
  );
}

(an 80px round image with a teal border)

What JSX Compiles To

Knowing what JSX becomes helps explain its rules. The tag <h1 className="title">Hi</h1> compiles roughly to jsx("h1", { className: "title", children: "Hi" }). Because it is a function call that returns one object, a component can only return one root element.

Frequently asked questions

Is JSX HTML?

No. JSX looks like HTML but is JavaScript syntax. It is compiled into function calls, which is why it uses className, camelCase attributes and requires closed tags.

Why do I need to use className in React?

class is a reserved word in JavaScript, so JSX uses the DOM property name className instead. React outputs it as a normal class attribute in the browser.

Can I write if statements in JSX?

Not directly inside curly braces. Use a ternary operator, the && operator, or put the if statement before the return and store the result in a variable.