Diferencias entre las extensiones .ts y .tsx en TypeScript para React
¡Hola a todos! Recientemente comencé a aprender TypeScript junto con React y me encontré con una situación que no entiendo. Cuando creo componentes, veo que en los proyectos se usan dos extensiones diferentes: `.ts` y `.tsx`. Por ejemplo, tengo un archivo `Button.ts` y un archivo `App.tsx`. Ambos contienen código TypeScript, pero cuando intento escribir JSX dentro del archivo `.ts`, el editor de código se queja, mientras que al renombrarlo a `.tsx` todo funciona.
Aquí hay un ejemplo de mi código que no funciona en `Button.ts`:
```typescript
import React from 'react';
interface ButtonProps {
label: string;
onClick: () => void;
}
// Error: JSX no es compatible en archivos .ts
const Button: React.FC = ({ label, onClick }) => {
return ;
};
```
Y este mismo código funciona perfectamente en