Anyone can explain the .ts file and .tsx file use and difference in SPFx react webpart?

Question

In SPFx No JavaScript Framework webpart contain "webpart.ts" file and write code in it.

But in React SPFx webpart, there are 2 file :

1) webpart.ts file
2) webpart.tsx file in component folder.

Can any buddy explain what can we do with webpart.ts file and webpart.tsx file ?

Thanks.

Answer 1

TSX allows for embedding JSX elements inside the file, and is largely used by React.

TS files are plain old Typescript files and do not support adding JSX Elements.

Typically you would seperate concerns by placing only code relating to presentation in the TSX files.

The following link is useful for understanding some of the key differences

https://stackoverflow.com/questions/34224007/is-there-any-downside-to-using-tsx-instead-of-ts-all-the-times-in-typescript