¿Cuál es la diferencia entre usar .jsx y .js? En ambos veo el mismo manejo de React.

Hola Alejandro

La respuesta corta es que no hay diferencia entre esas extensiones.

Se llama JSX, y es una extensión de la sintaxis de JavaScript.

Recomendamos usarlo con React para describir cómo debería ser la interfaz de usuario. JSX puede recordarte a un lenguaje de plantillas, pero viene con todo el poder de JavaScript.

JSX produce “elementos” de React. Exploraremos como renderizarlos en el DOM en la siguiente sección. A continuación puedes encontrar lo básico de JSX que será necesario para empezar.

¿Por qué JSX? React acepta el hecho de que la lógica de renderizado está intrínsecamente unida a la lógica de la interfaz de usuario: cómo se manejan los eventos, cómo cambia el estado con el tiempo y cómo se preparan los datos para su visualización.

En lugar de separar artificialmente tecnologías poniendo el maquetado y la lógica en archivos separados, React separa intereses con unidades ligeramente acopladas llamadas “componentes” que contienen ambas. Volveremos a los componentes en otra sección, pero si aún no te sientes cómodo maquetando en JS, esta charla podría convencerte de lo contrario.

React no requiere usar JSX, pero la mayoría de la gente lo encuentra útil como ayuda visual cuando trabajan con interfaz de usuario dentro del código JavaScript. Esto también permite que React muestre mensajes de error o advertencia más útiles.

Con esto resumo que si tu archivo devuelve elementos HTML es buena práctica nombrarlos JSX dando que no estamos cumpliendo una lógica en ese sentido, solo es una vista presentacional del componente.