EN
RU
ES
ZH
FR
DE
PT
AR
HI
byte_coder44
·
What is the difference between .ts and .tsx extensions in TypeScript for React?
Hello everyone! I recently started learning TypeScript with React and encountered a confusing situation. When I create components, I see that projects use two different extensions: `.ts` and `.tsx`. For example, I have a file `Button.ts` and a file `App.tsx`. Both contain TypeScript code, but when I try to write JSX inside a `.ts` file, the code editor complains, while renaming it to `.tsx` works fine.
Here is an example of my code that does not work in `Button.ts`:
```typescript
import React from 'react';
interface ButtonProps {
label: string;
onClick: () => void;
}
// Error: JSX is not supported in .ts files
const Button: React.FC = ({ label, onClick }) => {
return ;
};
```
And this same code works perfectly in
