The JSX file (.jsx)

The basics

What is a JSX file?

Anatomy

What's inside a JSX file

A JSX file is ordinary JavaScript in which an expression can also be an element written as a tag. Here is a small React component, a to-do list, part by part.

import { useState } from "react";
import "./TodoList.css";

export default function TodoList({ initial = [] }) {
  const [items, setItems] = useState(initial);
  const [text, setText] = useState("");

  function add(event) {
    event.preventDefault();
    if (text.trim()) setItems([...items, text.trim()]);
    setText("");
  }

  return (
    <form onSubmit={add} className="todo">
      <label htmlFor="todo-text">New item</label>
      <input id="todo-text" value={text}
        onChange={(e) => setText(e.target.value)} />
      {items.length === 0 ? (
        <p>Nothing to do yet.</p>
      ) : (
        <ul>
          {items.map((item) => <li key={item}>{item}</li>)}
        </ul>
      )}
    </form>
  );
}

1. 1import { useState } from "react";

   An ES module import

   JSX files are almost always ES modules. useState is a React hook; with the automatic JSX runtime the file doesn't import React itself to use tags.

2. 2import "./TodoList.css";

   A stylesheet import

   Not JavaScript at all: a bundler such as Vite or webpack understands it and adds the CSS to the page. Without a bundler this line fails.

3. 3export default function TodoList({ initial = [] })

   A component

   A function whose name starts with a capital letter. Its one argument holds the props, unpacked here with a default value.

4. 4const [items, setItems] = useState(initial);

   State

   A value React keeps between renders. Calling setItems stores a new value and redraws the component.

5. 5event.preventDefault();

   An event handler

   Plain JavaScript: stops the browser submitting the form and reloading the page.

6. 6return ( <form …> … </form> );

   The returned JSX

   A component returns one root element (or a fragment <>…</>). The brackets only let the JSX span several lines.

7. 7className="todo" / htmlFor="todo-text"

   DOM property names

   In React, class and for are written className and htmlFor, the names the browser's DOM uses, because class and for are JavaScript keywords.

8. 8<input … />

   A self-closing tag

   Every element must be closed in JSX, including ones HTML leaves open, like <input>, <img> and <br>.

9. 9{items.length === 0 ? ( … ) : ( … )}

   A condition

   Curly braces hold any JavaScript expression. if statements can't go inside JSX, so conditions use ? : or &&.

10. 10<li key={item}>

    A list with keys

    map turns an array into elements. The key lets React tell items apart when the list changes.

Under the hood

Why browsers can't run a .jsx file, and what it compiles to

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// …
  return /*#__PURE__*/_jsxs("form", {
    onSubmit: add,
    className: "todo",
    children: [/*#__PURE__*/_jsx("label", {
      htmlFor: "todo-text",
      children: "New item"
    }), /*#__PURE__*/_jsx("input", {
      id: "todo-text",
      value: text,
      onChange: e => setText(e.target.value)
    }), items.length === 0 ? /*#__PURE__*/_jsx("p", {
      children: "Nothing to do yet."
    }) : /*#__PURE__*/_jsx("ul", {
      children: items.map(item => /*#__PURE__*/_jsx("li", {
        children: item
      }, item))
    })]
  });

return React.createElement("form", { onSubmit: add, className: "todo" },
  React.createElement("label", { htmlFor: "todo-text" }, "New item"),
  …

Tools

Compiling JSX with Babel, esbuild, Vite and others

Naming

.jsx vs .js: which extension to use

Related formats

JSX vs JS vs TSX vs HTML

Same extension

The other .jsx: Adobe ExtendScript

Troubleshooting

The JSX errors people hit most, and what they mean

How to

How to open and edit a JSX file, and is it safe?

Free downloads

Sample JSX files to download

Free sample JSX files for testing compilers, bundlers, syntax highlighters, encodings, upload filters and size limits. Each was compiled with Babel or esbuild and run with Bun and, where Node.js allows, tsx, with matching output.

Loading…

What's inside sample-app.jsx

The file is commented: open it in a text editor and each numbered comment marks one of these parts. With React installed, npx tsx sample-app.jsx prints the HTML it renders.

1. The header and pragma

   How to set up, run and build the file, and a /** @jsxRuntime automatic */ comment so it compiles the same way in every tool.

2. Comments 1 and 2: imports and a component

   Only useState is imported from React. Greeting takes props with a default value for lang.

3. Comments 3 and 4: JSX syntax

   className, a self-closing <br />, an expression choosing the greeting, and a comment written inside JSX with {/* … */}.

4. Comment 5: lists

   map over an array of menu items, each <li> with a key.

5. Comment 6: state and events

   A like button with useState, an onClick arrow function and an aria-pressed attribute.

6. Comments 7 and 8: composition and rendering

   A fragment holding several components, && to show the menu only when it has items, and renderToStaticMarkup to print HTML in a terminal.

All sample JSX files

• Commented React components

  sample-app.jsx · 2.6 KB (2,704 bytes)

  Props, lists with keys, state, an event handler, a fragment and conditional rendering, with numbered comments explaining each part. Needs react and react-dom installed to run.

  • Checking a bundler, linter or highlighter handles JSX
  • Teaching React components
  DownloadOpen

• sample-app.jsx after compiling

  sample-compiled.js · 3.3 KB (3,427 bytes)

  The featured file compiled by Babel 8 with @babel/preset-react for production: the same comments, and every tag now a _jsx() or _jsxs() call.

  • Seeing what JSX turns into
  • Comparing your build's output
  DownloadOpen

• JSX in a .js file

  sample-jsx-in-js.js · 1.2 KB (1,262 bytes)

  JSX in a file with a .js extension, as some projects do. node and a default esbuild reject it; esbuild --loader:.js=jsx builds it. Uses a tiny h() factory, so it needs no React.

  • Testing how tools treat JSX in `.js` files
  • Checking lint rules about file extensions
  DownloadOpen

• UTF-8 with BOM and CRLF

  sample-utf8.jsx · 1.5 KB (1,499 bytes)

  Text in ten languages, including right-to-left Arabic and Hebrew, emoji, and HTML entities inside JSX (€,  ), saved with a UTF-8 byte order mark and Windows line endings. Needs no React.

  • Spotting encoding bugs in compilers and pipelines
  • Testing BOM and CRLF handling
  DownloadOpen

• 100 KB JSX file

  sample-100kb.jsx · 100 KB (102,400 bytes)

  A table of 823 Latin, Greek and Cyrillic letters with their Unicode names, rendered by a tiny JSX factory and padded with comments to exactly 102,400 bytes. Needs no npm packages.

  • Upload and size-limit tests
  • Compiler and highlighter performance
  DownloadOpen

Ways to test with them

• Encodings: run sample-utf8.jsx through your build and compare the output. Any Ã or â€ means a step didn't read it as UTF-8; a stray  at the start means the byte order mark wasn't stripped.
• Loader settings: sample-jsx-in-js.js should fail in a default esbuild or Vite setup and build once JSX is enabled for .js.
• Compiler output: compile sample-app.jsx with your settings and compare it with sample-compiled.js.
• Upload filters and limits: some filters block .jsx (it's also an Adobe script extension). sample-100kb.jsx is exactly 102,400 bytes, for testing a limit at the boundary.

Free to use for testing, teaching and demos, commercially or not, with no attribution needed. A link back to this page is always appreciated.

Questions

JSX files, frequently asked