• .js is JavaScript, plain and simple

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

• .ts is TypeScript, Microsoft's way of adding "concrete" types to JavaScript

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

• .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

const Foo = () => {
    return <div>Hello World!</div>;
};

• .tsx is similar to jsx except it's TypeScript with the JSX language extension.

const Foo: FunctionalComponent = () => {
    return <div>Hello World!</div>;
};

All of these will compile down to JavaScript code. See also React Without JSX

Bear in mind that just because it has a certain extension, doesn't mean that that is what the file actually is (frustratingly). I have run into several projects that use .js as an extension for files that include JSX syntax as well as a few that even include TypeScript.

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)