Tutorials › React Modern Development › JSX

JSX

5 min read Quiz at the end

JSX looks like HTML inside JavaScript. Use className instead of class, camelCase for events like onClick, and curly braces for JavaScript expressions. Every JSX expression must have one root element or use an empty Fragment <>.

JSX — JavaScript XML

// JSX
const el = Hello, {name}!;

// Compiled JavaScript
const el = React.createElement("h1",
  { className: "title" },
  "Hello, ", name, "!"
);

// JSX rules:
// 1. One root element (or <>...)
// 2. className instead of class
// 3. camelCase attributes
// 4. Self-close empty tags: <img />

← Create React App / Vite Next: Components →

Topic Quiz · 5 questions

Test your understanding before moving on

1. What replaces class in JSX?

💡 JSX uses className instead of class because class is a reserved JavaScript keyword.

2. How do you embed JavaScript in JSX?

💡 JavaScript expressions in JSX are wrapped in curly braces: {expression}.

3. Why must JSX have one root element?

💡 JSX compiles to React.createElement() which returns one element — use <> for fragments.

4. What is <> </> in React?

💡 <> </> is shorthand for React.Fragment — groups elements without adding a DOM node.

5. How are self-closing tags written in JSX?

💡 JSX requires self-closing tags like <img /> or <br /> — both are valid.

Quick Access

JSX

JSX — JavaScript XML

Hello, {name}!

Test your understanding before moving on