Hay algo que encuentro muy confuso cuando trabajo en React.js .
Hay muchos ejemplos disponibles en Internet que usan archivos .js con React , pero muchos otros usan archivos .jsx .
He leído acerca de los archivos JSX y tengo entendido que solo te permiten escribir etiquetas HTML dentro de tu JavaScript . Pero lo mismo también se puede escribir en archivos JS .
Entonces, ¿cuál es la diferencia real entre .js y .jsx ?
No hay ninguno cuando se trata de extensiones de archivo. Su empaquetador/transpilador/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 tener sus propias extensiones, es decir, .jsx para JSX y .ts para TypeScript, por ejemplo.
En la mayoría de los casos, solo se necesita el transpiler/bundler, que puede no estar configurado para funcionar con archivos JSX, ¡pero sí con JS! Por lo tanto, se ve obligado a usar archivos JS en lugar de JSX.
Y dado que reaccionar es solo una biblioteca para javascript, no hace ninguna diferencia para usted elegir entre JSX o JS. ¡Son completamente intercambiables!
En algunos casos, los usuarios/desarrolladores también pueden elegir JSX en lugar de JS, debido al resaltado de código, pero la mayoría de los editores más nuevos también ven la sintaxis de reacción correctamente en los archivos JS.
Las etiquetas JSX ( <Component/> ) claramente no son JavaScript estándar y no tienen un significado especial si las coloca dentro de una etiqueta <script> 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 que, en última instancia, la extensión no importa mucho, ya que el transpilador mastica felizmente cualquier tipo de archivo, siempre que en realidad sea JSX.
Mi consejo sería: no te preocupes por eso.