# .jsx vs .tsx – What’s the Difference?

When working with **React**, you might come across two file extensions:

* `.jsx` (JavaScript + XML)
    
* `.tsx` (TypeScript + XML)
    

Both are used to write **React components**, but they serve different purposes. Let’s break it down!

---

## `.jsx` (JavaScript + XML)

### **What is** `.jsx`?

* `.jsx` stands for **JavaScript XML**.
    
* It allows you to write **React components** using JSX syntax (HTML-like syntax in JavaScript).
    
* It does **not** have built-in type safety.
    

### **Example of a** `.jsx` File

```javascript
// ExampleComponent.jsx
import React from "react";

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

export default ExampleComponent;
```

### **Key Points:**

* Uses **JavaScript** for React components.
    
* Works with **Babel** to transpile JSX into JavaScript.
    
* Easier to write but lacks **type safety**.
    
* No static type checking → Errors may only appear at runtime.
    

---

## `.tsx` (TypeScript + XML)

### **What is** `.tsx`?

* `.tsx` stands for **TypeScript XML**.
    
* It is used in **React with TypeScript**.
    
* **TypeScript provides static type checking**, helping to prevent bugs.
    

### **Example of a** `.tsx` File

```javascript
// ExampleComponent.tsx
import React from "react";

interface Props {
  name: string;
}

const ExampleComponent: React.FC<Props> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default ExampleComponent;
```

### **Key Points:**

* Uses **TypeScript**, which provides **type safety**.
    
* Helps **prevent runtime errors** by catching mistakes at compile-time.
    
* **Better tooling support** (autocompletion, IntelliSense in VS Code).
    
* Requires additional **TypeScript setup** (`tsconfig.json`).
    

---

## `.jsx` vs `.tsx` – Key Differences

| **Feature** | `.jsx` **(JavaScript)** | `.tsx` **(TypeScript)** |
| --- | --- | --- |
| **Language** | JavaScript + JSX | TypeScript + JSX |
| **Type Safety** | 🚫 No | ✅ Yes |
| **Error Detection** | At runtime (JS errors) | At compile-time (TS errors) |
| **Performance** | Slightly faster (no TS compilation) | Slightly slower (extra TS checks) |
| **Best For** | Small projects, quick prototypes | Large projects, production apps |
| **IDE Support** | ✅ Good | ✅ Better (with IntelliSense) |
| **Learning Curve** | ✅ Easier | 🚫 Requires TypeScript knowledge |