What is the difference between JSX and TSX?

JSX (.jsx) is JavaScript XML — a JavaScript file that contains JSX syntax for React components. TSX (.tsx) is the TypeScript equivalent — a TypeScript file that also contains JSX syntax. The core difference is that .tsx files use TypeScript, so component props and state must be typed.

Should I use .jsx or .tsx for React components?

Use .tsx if your project uses TypeScript. Use .jsx if your project uses plain JavaScript. In new projects, TypeScript (.tsx) is the recommended choice for better tooling, autocomplete, and type safety.

JSX vs TSX

What the file extensions mean, how they differ, and when to use each.

The Short Answer

.jsx — JavaScript + JSX

A JavaScript file that contains JSX syntax. Used in React projects that don't use TypeScript. Props have no type checking.

.tsx — TypeScript + JSX

A TypeScript file that contains JSX syntax. Used in React projects that use TypeScript. Props are typed interfaces or types.

Both files produce the same runtime output. The difference is purely at development time — TypeScript adds type checking to .tsx files.

Side-by-Side Code Comparison

Button.jsx (JavaScript)

// No type checking on props
function Button({ label, onClick, disabled }) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className="btn"
    >
      {label}
    </button>
  );
}

export default Button;

// No error if you pass wrong types:
<Button label={42} onClick="not a function" />

Button.tsx (TypeScript)

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

function Button({ label, onClick, disabled }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className="btn"
    >
      {label}
    </button>
  );
}

export default Button;

// Compile-time errors:
<Button label={42} />          // ✗ number not string
<Button onClick="not a fn" />  // ✗ string not function

File Extension Rules

Extension	Contains JSX?	TypeScript?	Use for
.js	No	No	Plain JavaScript utilities, logic
.ts	No	Yes	TypeScript utilities, non-UI logic
.jsx	Yes	No	React components in JavaScript projects
.tsx	Yes	Yes	React components in TypeScript projects

Common Questions

Can I use JSX in a .tsx file?

Yes — .tsx files support JSX syntax. That is the point of the extension. You write JSX plus TypeScript types in the same file.

Can I rename .jsx to .tsx without any other changes?

Usually yes for simple components, but TypeScript will require you to add types to props. The compiler will show errors for untyped function parameters — add an interface or inline types to fix them.

Does Next.js use .jsx or .tsx?

Next.js supports both. New projects created with create-next-app default to .tsx files when TypeScript is selected. Page files, components, and API routes all use .tsx.

Is .jsx still used in new projects?

Less and less. Most new React projects in 2024 use TypeScript by default and therefore .tsx files. .jsx remains in older codebases and tutorials targeting JavaScript beginners.

From the blog

View all →

Convert HTML to JSX/TSX syntax automatically?

Use the HTML to JSX Converter →