Difference Between tsx and jsx in React

• .js is JavaScript, plain and simple.
• .ts is Typescript , Microsoft’s way of adding “concrete” types to JavaScript
• .jsx is JavaScript but with JSX enabled which is React’s language extension to allow you to write markup directly in code which is then compiled to plain JavaScript with the JSX replaced with direct API calls to React.createElement or whatever API is targeted
• .tsx is similar to jsx except it’s TypeScript with the JSX language extension.

A JS file is a JavaScript file extension, this is used for any modules and snippets of code made in pure JavaScript. You should use JS files when writing functions that won’t use any React feature but will be used among different React components.

JSX is a file syntax extension used by React, you can render component, import CSS files and use React hooks among other things. You should use JSX files when rendering a React component.

TSX is the TypeScript version of JSX, TypeScript is a superset that adds static typing in JavaScript. You should use TypeScript whenever it’s possible to do so as it has numerous advantages (code scalability and static typing)

Example for Js:

const Foo = () => {
    return React.createElement("div", null, "Hello World!");
};

Example for Tsx:

const Foo: FunctionalComponent = () => {
    return React.createElement("div", null, "Hello World!");
};