How does JSX differ from TSX?

ReactJunior~2 min read

1. Basic definition

File format	Language	What it's used for
`.jsx`	JavaScript + JSX	React components with no typing
`.tsx`	TypeScript + JSX	React components with types (TypeScript support)

In simpler terms: JSX = "JavaScript with React syntax", TSX = "TypeScript with React syntax".

2. What JSX is

JSX (JavaScript XML) is a syntax extension of JS that lets you write React components as "HTML-like" code:

javascript

function Hello() {
  return <h1>Hello, world!</h1>;
}

At compile time, Babel turns this into a plain JS call:

javascript

function Hello() {
  return React.createElement("h1", null, "Hello, world!");
}

.jsx files have no typing, everything is only checked at runtime.

3. What TSX is

TSX (TypeScript + JSX) is an extension of JSX syntax that adds static typing via TypeScript.

A .tsx file is the same JSX, but TypeScript knows the types of all elements, props, hooks, and contexts.

Example:

javascript

type Props = {
  name: string;
};

function Hello({ name }: Props) {
  return <h1>Hello, {name}</h1>;
}

// Correct
<Hello name="Tim" />;

// Compile error - type mismatch
<Hello name={42} />;

TSX adds "brains" to JSX: it knows that name should be a string and immediately warns about a type violation.

4. Key differences between JSX and TSX

Trait	JSX	TSX
Language	JavaScript	TypeScript
Typing	None (dynamic)	Present (static)
Prop checking	Only at runtime	At compile time
IDE hints	Limited	Full (props, state, contexts)
Safety	Low	High
Use in large projects	Usually in prototypes	The de facto standard

5. How the compiler handles them

JSX -> compiled by Babel -> plain JS.
TSX -> compiled by TypeScript -> JS with types stripped + JSX -> then Babel or SWC turns it into JS.

TypeScript simply strips out the types at compile time, there are no types in production code, but every check runs ahead of time.

6. When to use which

Scenario	What to choose
A quick prototype / demo component	`.jsx` (if TS isn't set up)
Any production project	`.tsx`
Collaborative development / a large codebase	`.tsx`
A UI library, a design system	`.tsx` (mandatory)
An old JS project	`.jsx` (or migrate gradually to `.tsx`)

7. A JSX vs TSX comparison example

JSX:

javascript

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

// Errors only at runtime
<Button label={42} />;

TSX:

javascript

type ButtonProps = {
  label: string;
  onClick: () => void;
};

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

// Error already at build time
<Button label={42} />; // label must be a string

8. Conclusion

Parameter	JSX	TSX
Typing	No	Yes
Prop and state checking	At runtime	At compile time
IDE autocomplete	Limited	Full
Safety and predictability	Low	High
React 18 API support	Partial	Full
Recommendation for new projects	Not recommended	Mandatory

In short:

JSX is just syntactic sugar for React.

TSX is the same JSX, but with TypeScript's types, safety, and intelligence.

That's why almost everything in modern React apps is written in .tsx, it's the standard that delivers quality, autocomplete, and predictable code behavior.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.