I am new to react and I am working on a project. I come across both .ts and .tsx extensions. I don't understand where should I use .ts and .tsx. Any help on this is much appreciated. Thank you!
.tsx extension is used when we want to embed JSX elements inside the files while .ts is used for plain Typescript files and do not support adding JSX Elements.
All of the above answers are correct.
.ts files contains only pure TypeScript
.tsx have included JSX also.
On another point of view, you can copy everything from a .ts file and paste on .tsx file, and you don't need to modify anything. But if you're copying from a .tsx file you need to refactor it by removing the JSX elements.
The difference is simple: .ts is used for TypeScript files without JSX , while .tsx is used when the file contains JSX (React components) . Generally, use .tsx for React components that render UI and .ts for utilities, services, types, interfaces, and logic that don't include JSX.
Use .ts for pure TypeScript files.
Use .tsx for files which contain JSX.
For example, a React component would be .tsx, but a file containing helper functions would be .ts.
Use .ts for pure TypeScript files.
Use .tsx for files which contain JSX.
For example, a React component would be .tsx, but a file containing helper functions would be .ts.