• .js es JavaScript, simple y llanamente

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

• .ts es TypeScript , la forma de Microsoft de agregar tipos "concretos" a JavaScript

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

• .jsx es JavaScript pero con JSX habilitado, que es la extensión de lenguaje de React que le permite escribir marcado directamente en el código que luego se compila en JavaScript sin formato con el JSX reemplazado con llamadas API directas a React.createElement o cualquier API a la que se dirija

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

• .tsx es similar a jsx excepto que es TypeScript con la extensión de lenguaje JSX.

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

Todos estos se compilarán en código JavaScript. Véase también Reaccionar sin JSX

Tenga en cuenta que el hecho de que tenga una cierta extensión no significa que ese sea el archivo en realidad (frustrantemente). Me encontré con varios proyectos que usan .js como una extensión para archivos que incluyen sintaxis JSX, así como algunos que incluso incluyen TypeScript.

Un archivo JS es una extensión de archivo de JavaScript, se utiliza para cualquier módulo y fragmento de código creado en JavaScript puro. Debe usar archivos JS cuando escriba funciones que no usarán ninguna característica de React pero que se usarán entre diferentes componentes de React.

JSX es una extensión de sintaxis de archivo utilizada por React, puede renderizar componentes, importar archivos CSS y usar ganchos de React, entre otras cosas. Debe usar archivos JSX al renderizar un componente React.

TSX es la versión de TypeScript de JSX, TypeScript es un superconjunto que agrega escritura estática en JavaScript. Debe usar TypeScript siempre que sea posible, ya que tiene numerosas ventajas (escalabilidad del código y escritura estática)