Hay algo que encuentro muy confuso cuando trabajo en React .

Hay muchos ejemplos disponibles en Internet que usan archivos .js con react pero muchos otros usan archivos .jsx .

He leído sobre archivos .jsx y entiendo que simplemente te permiten escribir etiquetas html dentro de tu javascript . Pero lo mismo se puede escribir en archivos .js también.

Entonces, ¿cuál es la diferencia real entre estas dos extensiones .js y .jsx ?

No hay ninguno cuando se trata de extensiones de archivo. Su bundler / transpiler / lo que sea se encarga de resolver qué tipo de contenido de archivo hay.

Sin embargo, hay algunas otras consideraciones al decidir qué poner en un tipo de archivo .js o .jsx . Dado que JSX no es JavaScript estándar, se podría argumentar que cualquier cosa que no sea JavaScript «simple» debería ir en sus propias extensiones, es decir, .jsx para JSX y .ts para TypeScript, por ejemplo.

Hay una buena discusión aquí disponible para leer

En la mayoría de los casos, solo es necesario el transpiler / bundler, que puede no estar configurado para funcionar con archivos JSX, ¡sino con JS! Por lo tanto, está obligado a usar archivos JS en lugar de JSX.

Y dado que reaccionar es solo una biblioteca para javascript, no hace ninguna diferencia que elija entre JSX o JS. ¡Son completamente intercambiables!

En algunos casos, los usuarios / desarrolladores también pueden elegir JSX sobre JS, debido al resaltado de código, pero la mayoría de los editores más nuevos también están viendo la sintaxis de reacción correctamente en los archivos JS.

Las etiquetas JSX ( {amp}lt;Component/{amp}gt; ) claramente no son JavaScript estándar y no tienen un significado especial si las coloca dentro de una etiqueta {amp}lt;script{amp}gt; desnuda, por ejemplo. Por lo tanto, todos los archivos React que los contienen son JSX y no JS.

Por convención, el punto de entrada de una aplicación React suele ser .js en lugar de .jsx aunque contenga componentes React. También podría ser .jsx. Cualquier otro archivo JSX generalmente tiene la extensión .jsx.

En cualquier caso, la razón por la que hay ambigüedad es porque, en última instancia, la extensión no importa mucho, ya que el transpilador felizmente mastica cualquier tipo de archivos siempre que sean en realidad JSX.

Mi consejo sería: no te preocupes por eso.

Además del hecho mencionado de que las etiquetas JSX no son javascript estándar, la razón por la que uso la extensión .jsx es porque con ella Emmet todavía funciona en el editor, ya sabes, ese complemento útil que expande el código html, por ejemplo ul{amp}gt; li en

 {amp}lt;ul{amp}gt; {amp}lt;li{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; 

JSX no es JavaScript estándar, según la guía de estilo de Airbnb ‘eslint’ podría considerar este patrón

 // filename: MyComponent.js function MyComponent() { return {amp}lt;div /{amp}gt;; } 

como advertencia, si nombró su archivo MyComponent.jsx, pasará, a menos que edite la regla eslint, puede consultar la guía de estilo aquí