Suggest an edit

Improve this article

Refine the answer for “How does JSX differ from TSX?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts631 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.