JSX (JavaScript XML)

JSX is a syntax extension for JavaScript that allows you to write HTML-like markup inside a JavaScript file. While it looks similar to HTML, it is fundamentally JavaScript, offering the full programmatic power of JS while maintaining a readable, declarative structure for your UI.

Why JSX?

React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how state changes over time, and how data is prepared for display. Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns by using loosely coupled units called "components" that contain both.

Embedding Expressions

You can embed any JavaScript expression in JSX by wrapping it in curly braces {}.

const name = "Josh Perez";
const element = <h1>Hello, {name}</h1>;

This includes variables, function calls, arithmetic, or conditional logic:

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

JSX is an Expression Too

After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects. This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions.

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

Differences from HTML

Because JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.

For example:

• class becomes className in JSX.
• tabindex becomes tabIndex.
• onclick becomes onClick.

// HTML
// <button class="btn" onclick="handleClick()">Click Me</button>

// JSX
const element = <button className="btn" onClick={handleClick}>Click Me</button>;

Fragments

Components often return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

There is also a shorter syntax for declaring fragments:

function ListItem() {
  return (
    <>
      <li>Item 1</li>
      <li>Item 2</li>
    </>
  );
}

How JSX is Compiled

Browsers don't understand JSX out of the box. Tools like Babel or TypeScript compile JSX down to React API calls (historically React.createElement, and in modern React, special JSX runtime functions).

For example, this JSX:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

Historically compiled to:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Modern React (17+) introduces a new JSX transform that automatically imports special functions from the React package, so you no longer need to import React from 'react' just to use JSX.

Summary

• JSX allows writing markup within JavaScript.
• It leverages the full power of JavaScript expressions.
• It uses camelCase for attributes.
• Under the hood, it transforms into regular JavaScript objects representing the DOM (the Virtual DOM).