JSX — JavaScript XML

JSX stands for JavaScript XML. It is a special syntax used in React that allows writing HTML-like code directly inside JavaScript files. JSX is not standard JavaScript or HTML — it is a syntax extension that React uses to describe what the user interface should look like.

When a React project is built, a tool called Babel converts JSX into regular JavaScript that the browser can understand. So what looks like HTML in a React file is actually JavaScript under the hood.

Why Use JSX?

Without JSX, creating UI elements in React would look like this:

// Without JSX
React.createElement('h1', null, 'Hello, World!');

With JSX, the same thing is written much more simply:

// With JSX
<h1>Hello, World!</h1>

JSX makes code easier to read and write. It closely resembles the HTML that most developers are already familiar with, which speeds up development.

JSX Rules — Important Differences from HTML

JSX looks like HTML but has some important differences. These rules must be followed for JSX to work correctly.

Rule 1 — Every JSX Component Must Return One Root Element

A component cannot return multiple elements side by side without a parent wrapper. The following code will cause an error:

// ❌ Incorrect — two sibling elements without a wrapper
function App() {
  return (
    <h1>Hello</h1>
    <p>Welcome to React</p>
  );
}

The fix is to wrap everything in a single parent element, such as a <div> or a React Fragment:

// ✅ Correct — wrapped in a Fragment
function App() {
  return (
    <>
      <h1>Hello</h1>
      <p>Welcome to React</p>
    </>
  );
}

The empty tags <></> are called a Fragment. They group elements together without adding an extra HTML element to the page.

Rule 2 — All Tags Must Be Closed

In HTML, some tags like <br> or <img> do not need a closing tag. In JSX, every tag must be self-closed or have a closing tag:

// ❌ Incorrect in JSX
<img src="photo.jpg">
<br>

// ✅ Correct in JSX
<img src="photo.jpg" />
<br />

Rule 3 — Use className Instead of class

In HTML, the attribute to add a CSS class is class. In JSX, this is replaced with className because class is a reserved keyword in JavaScript:

// ❌ Incorrect in JSX
<p class="intro">Welcome!</p>

// ✅ Correct in JSX
<p className="intro">Welcome!</p>

Rule 4 — Use camelCase for Attributes

HTML attributes with dashes are written in camelCase in JSX:

// HTML style
<button onclick="handleClick()">Click me</button>

// JSX style (camelCase)
<button onClick={handleClick}>Click me</button>

Embedding JavaScript Expressions in JSX

One of the most powerful features of JSX is the ability to embed JavaScript expressions directly inside the HTML-like code using curly braces {}.

function Greeting() {
  const name = "Alice";
  const currentYear = 2025;

  return (
    <>
      <h1>Hello, {name}!</h1>
      <p>The year is {currentYear}.</p>
      <p>Two plus two equals {2 + 2}.</p>
    </>
  );
}

In this example, the values of name and currentYear are inserted directly into the JSX output. Anything inside curly braces is treated as a JavaScript expression.

JSX and Conditional Expressions

JavaScript conditions can also be used inside JSX. A common approach is the ternary operator:

function StatusMessage() {
  const isLoggedIn = true;

  return (
    <p>
      {isLoggedIn ? "Welcome back!" : "Please log in."}
    </p>
  );
}

If isLoggedIn is true, the message "Welcome back!" is shown. Otherwise, "Please log in." is displayed.

JSX and Styling

Inline styles in JSX are written as a JavaScript object with camelCase property names:

function StyledText() {
  const textStyle = {
    color: "blue",
    fontSize: "20px",
    fontWeight: "bold"
  };

  return <p style={textStyle}>This text is styled with inline CSS.</p>;
}

Notice that the style value is wrapped in two sets of curly braces: the outer pair {} tells JSX "this is a JavaScript expression," and the inner pair {} defines the JavaScript object.

A Full JSX Example

function UserCard() {
  const userName = "Bob";
  const userAge = 28;
  const isPremium = true;

  return (
    <div className="user-card">
      <h2>{userName}</h2>
      <p>Age: {userAge}</p>
      <p>Account: {isPremium ? "Premium" : "Free"}</p>
      <img src="avatar.jpg" alt="User Avatar" />
    </div>
  );
}

This component displays a user card with a name, age, account type, and avatar image — all built using JSX.

Key Points

• JSX is a syntax extension that allows writing HTML-like code inside JavaScript.
• Babel converts JSX into regular JavaScript before the browser sees it.
• Every JSX component must return a single root element — use Fragments <></> when needed.
• All tags must be closed in JSX, including self-closing tags like <img />.
• Use className instead of class, and camelCase for all event attributes.
• JavaScript expressions can be embedded inside JSX using curly braces {}.

The next topic covers React Components — the fundamental building blocks of every React application.