What is JSX?

Difficulty: Beginner

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. While it looks like HTML, JSX is actually syntactic sugar for React.createElement() calls. Under the hood, a tool like Babel or SWC transforms JSX into plain JavaScript function calls that React can understand.

The key difference between JSX and HTML is that JSX is embedded within JavaScript, so you can use the full power of JavaScript expressions inside your markup. You wrap JavaScript expressions in curly braces {} to embed them. This includes variables, function calls, ternary operators, and more. However, you cannot use statements like if/else or for loops directly inside JSX - only expressions that produce a value.

There are several important differences between JSX and HTML. In JSX, you use `className` instead of `class` (since class is a reserved word in JavaScript), `htmlFor` instead of `for`, and all attribute names use camelCase (like `onClick`, `tabIndex`, `autoFocus`). Self-closing tags like `<img>` and `<input>` must include the closing slash: `<img />`, `<input />`. Every JSX expression must have a single root element - you cannot return two sibling elements without wrapping them.

JSX also differs from HTML in how styles are applied. The `style` attribute in JSX accepts a JavaScript object with camelCased property names rather than a CSS string. For example, `style={{ backgroundColor: 'red', fontSize: '16px' }}`. The outer curly braces denote a JSX expression, and the inner ones define the JavaScript object.

Understanding JSX is fundamental because every React component returns JSX. When you see JSX in code, remember that it compiles to React.createElement calls, creating a tree of JavaScript objects (the virtual DOM) that React uses to update the real DOM efficiently.

Code examples

Basic JSX Syntax

// JSX looks like HTML but lives inside JavaScript
const element = <h1>Hello, world!</h1>;

// Under the hood, this compiles to:
const elementCompiled = React.createElement('h1', null, 'Hello, world!');

console.log(typeof element); // 'object'
console.log(element.type);   // 'h1'

JSX compiles to React.createElement calls which return plain JavaScript objects describing the UI. These objects are called React elements.

Embedding Expressions in JSX

const name = 'Alice';
const age = 25;

// Use curly braces {} to embed JavaScript expressions
const greeting = <p>Hello, {name}! You are {age} years old.</p>;

// You can use any valid JavaScript expression
const math = <p>2 + 2 = {2 + 2}</p>;
const upper = <p>{name.toUpperCase()}</p>;

console.log(greeting.props.children.join(''));
console.log(math.props.children.join(''));

Curly braces inside JSX let you escape back into JavaScript. Any valid expression - variables, function calls, arithmetic - can go inside the braces.

JSX vs HTML Differences

// HTML:  <div class="box"><label for="name">Name</label></div>
// JSX:
const form = (
  <div className="box">
    <label htmlFor="name">Name</label>
    <input type="text" id="name" autoFocus />
    <img src="logo.png" alt="Logo" />
  </div>
);

// Style uses objects, not strings
const styled = (
  <div style={{ backgroundColor: 'blue', fontSize: '16px' }}>
    Styled content
  </div>
);

console.log(form.props.className);
console.log(styled.props.style.backgroundColor);

JSX uses className instead of class, htmlFor instead of for, camelCase attributes, mandatory self-closing tags, and object-based styles.

Key points

JSX is not required to use React - you can use React.createElement directly - but JSX makes the code much more readable and is used by virtually every React project.
Curly braces in JSX can contain any JavaScript expression but not statements. Use ternary operators instead of if/else inside JSX.
JSX prevents injection attacks by default. React DOM escapes any values embedded in JSX before rendering them, so you can never inject anything that is not explicitly written in your code.

Concepts covered

JSX syntax, JSX expressions, JSX vs HTML, JSX compilation, React.createElement