The TSX file (.tsx)

The basics

What is a TSX file?

Anatomy

What's inside a TSX file

A TSX file is TypeScript in which an expression can also be a JSX element: a tag like <section>, with attributes and children, that a compiler turns into a function call. Here is a typical React component, part by part.

import { useState, type ReactNode } from "react";

type Props = {
  title: string;
  initial?: number;
  children?: ReactNode;
};

export function Counter({ title, initial = 0, children }: Props) {
  const [count, setCount] = useState<number>(initial);

  return (
    <section className="counter">
      <h2>{title}</h2>
      {children}
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </section>
  );
}

export const First = <T,>({ items }: { items: T[] }) => (
  <p>First: {String(items[0])}</p>
);

1. 1import { useState, type ReactNode } from "react";

   Imports

   A hook and a type from React. With the automatic JSX runtime, the file doesn't need to import React itself just to use tags.

2. 2type Props = { … };

   The props type

   Describes the attributes the component accepts. <Counter /> without a title, or with initial="5" as a string, is a compile error.

3. 3children?: ReactNode;

   Children

   Whatever goes between <Counter> and </Counter>. ReactNode covers text, numbers, elements, lists and nothing.

4. 4export function Counter(…)

   A component

   A function that takes props and returns JSX. Its name must start with a capital letter: lowercase tags are treated as HTML elements.

5. 5useState<number>(initial)

   A typed hook

   TypeScript generics work as usual in a .tsx file when they follow a function name.

6. 6<section className="counter">

   A JSX element

   Looks like HTML but is an expression. In React, attributes use their DOM property names: className rather than class, htmlFor rather than for.

7. 7{title}

   An embedded expression

   Curly braces hold any TypeScript expression. Text inserted this way is escaped, so it can't inject HTML.

8. 8onClick={() => setCount(count + 1)}

   An event handler

   A function, not a string of code as in HTML. TypeScript knows the event's type, so event.currentTarget is an HTMLButtonElement.

9. 9<T,>({ items }: { items: T[] }) =>

   A generic arrow function

   The comma after T is needed in .tsx only: without it, <T> is read as the start of a JSX tag.

Under the hood

What the tags in a TSX file compile to

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
export function Counter({ title, initial = 0, children }) {
    const [count, setCount] = useState(initial);
    return (_jsxs("section", { className: "counter", children: [_jsx("h2", { children: title }), children, _jsxs("button", { onClick: () => setCount(count + 1), children: ["Clicked ", count, " times"] })] }));
}

return (React.createElement("section", { className: "counter" },
    React.createElement("h2", null, title),
    children,
    React.createElement("button", { onClick: () => setCount(count + 1) },
        "Clicked ",
        count,
        " times")));

Configuration

Setting up tsconfig.json for React, Preact or Solid

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "strict": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "noEmit": true
  }
}

Syntax

What works differently in .tsx than in .ts

Related formats

.tsx vs .ts vs .jsx vs .js

How to

How to run, build and open a TSX file

Troubleshooting

The TSX errors people hit most, and what they mean

Security

Is it safe to open a TSX file?

Free downloads

Sample TSX files to download

Free sample TSX files for testing compilers, bundlers, editors, syntax highlighters, upload filters and size limits. Each .tsx file passes tsc --noEmit in strict mode and runs with tsx and Bun with the same output.

Loading…

What's inside sample-component.tsx

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-component.tsx prints the HTML it renders.

1. The first line: the JSX runtime

   /** @jsxRuntime automatic */ makes this one file use React's automatic runtime, so it runs even without a tsconfig.json.

2. Comments 1 to 3: imports, props and a component

   Type-only imports with the type keyword, a BadgeProps interface with a union-typed tone, and a Badge component with a default prop value.

3. Comment 4: JSX syntax

   className, a template literal inside an attribute, and {…} for values and children.

4. Comments 5 and 6: a generic component

   List is written <T,>(…) => so the type parameter isn't mistaken for a tag, and gives each item a key.

5. Comment 7: state and events

   useState<number> and a click handler typed as MouseEvent<HTMLButtonElement>.

6. Comment 8: type assertions

   JSON.parse(…) as { … }; the older <Type>value form would be a syntax error in a .tsx file.

7. Comments 9 and 10: composition and rendering

   A fragment, a conditional, and renderToStaticMarkup to print HTML in a terminal instead of drawing in a browser.

All sample TSX files

• Commented React components

  sample-component.tsx · 3.3 KB (3,391 bytes)

  Typed props, a generic list component, state, an event handler, a fragment and conditional rendering, with numbered comments explaining each part. Needs react, react-dom and their @types packages to run and check.

  • Checking a bundler or editor handles TSX and generics
  • Teaching typed React components
  DownloadOpen

• TSX with no library

  sample-no-react.tsx · 2.7 KB (2,807 bytes)

  Uses @jsxRuntime classic and @jsx h comments to compile its tags to calls to a small h() function that builds escaped HTML. Runs with npx tsx or bun without installing anything, and declares its own JSX types.

  • Testing JSX pragmas and custom factories
  • Seeing what JSX compiles to without React
  DownloadOpen

• sample-component.tsx after compiling

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

  The featured file compiled by TypeScript 7.0.2 with --jsx react-jsx: no types, and every tag a _jsx() or _jsxs() call. Runs with node where React is installed.

  • Comparing TSX with its JavaScript output
  • Checking a minifier or linter on compiled React code
  DownloadOpen

• 100 KB TSX file

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

  1,800 typed colour swatches rendered into an HTML table by a tiny JSX factory, 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

• JSX settings: run sample-no-react.tsx through your bundler. If it fails while npx tsx works, the tool is ignoring the @jsx pragma comments.
• Generics: sample-component.tsx contains a <T,> arrow function; tools that parse .tsx as plain TypeScript, or .ts as TSX, will choke on one or the other.
• Compiled output: compile sample-component.tsx with your settings and compare it with sample-compiled.js.
• Upload filters and limits: .tsx is unknown to many upload filters. sample-100kb.tsx 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

TSX files, frequently asked