JSX — HTML in JavaScript

JSX stands for JavaScript XML. It's a syntax extension that lets you write HTML-like code inside JavaScript. At first it looks weird. After 20 minutes, you won't want to go back.

What JSX Looks Like

basic-jsx.jsx

// JSX: write HTML directly in JavaScript
const element = <h1 className="title">Hello, React!</h1>;

// Store JSX in variables
const user = { name: "Alex", age: 28 };
const greeting = <p>Welcome, {user.name}! You are {user.age} years old.</p>;

// Multi-line JSX needs parentheses
const card = (
  <div className="card">
    <h2>Card Title</h2>
    <p>Some content here.</p>
  </div>
);

The JSX gets compiled to plain JavaScript by a tool called Babel. The compiled output is just function calls — no magic.

compiled.js

// What Babel compiles JSX to (you never write this yourself):
// <h1 className="title">Hello!</h1>  becomes:
React.createElement("h1", { className: "title" }, "Hello!");

// <div><h2>Title</h2><p>Body</p></div>  becomes:
React.createElement("div", null,
  React.createElement("h2", null, "Title"),
  React.createElement("p", null, "Body")
);
// JSX is a prettier way to write createElement calls.

You write JSX because it's vastly more readable. The compiler does the translation.

JSX Rules

JSX looks like HTML but has a few important differences:

1. One Root Element

Every JSX expression must have a single root element. Wrap siblings in a <div> or use a Fragment:

root-element.jsx

// Wrong - two root elements
// return (
//   <h1>Title</h1>
//   <p>Paragraph</p>    <- syntax error
// );

// Correct - wrapped in div
return (
  <div>
    <h1>Title</h1>
    <p>Paragraph</p>
  </div>
);

// Also correct - Fragment (no extra DOM node)
return (
  <>
    <h1>Title</h1>
    <p>Paragraph</p>
  </>
);

2. JavaScript in Curly Braces

Use { } to embed any JavaScript expression inside JSX:

expressions.jsx

const name = "Alex";
const score = 95;
const isAdmin = true;

function UserInfo() {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Score: {score}/100 ({score >= 90 ? "A" : "B"})</p>
      {isAdmin && <span className="badge">Admin</span>}
      <p>Today: {new Date().toLocaleDateString()}</p>
    </div>
  );
}

3. className, not class

Since class is a reserved word in JavaScript, React uses className for CSS classes:

classname.jsx

// HTML:   class="container"    =>  JSX:  className="container"
// HTML:   for="email"          =>  JSX:  htmlFor="email"

function Card({ isActive }) {
  return (
    <div className={`card ${isActive ? "card--active" : ""}`}>
      <label htmlFor="email">Email</label>
      <input type="email" id="email" />
    </div>
  );
}

4. Self-Closing Tags

Elements without children must be self-closed with />:

self-close.jsx

// Must self-close elements without children:
<input type="text" />
<img src="photo.jpg" alt="A photo" />
<br />
<hr />

// Same for custom components
<MyComponent />
<UserAvatar size="large" />

5. camelCase Attributes

HTML attributes use camelCase in JSX: onclick becomes onClick, tabindex becomes tabIndex.

These are the most common JSX mistakes. Bookmark this page for your first week of React.

JSX is Optional

You can write React without JSX, but almost nobody does. The JSX syntax is so much cleaner that it became the standard way to write React components.

← What is React? Your First Component →