ReactJS: .JS frente a .JSX
Hay algo que encuentro muy confuso cuando trabajo en React.js.
Hay muchos ejemplos disponibles en Internet que usan .jsarchivos, Reactpero muchos otros usan .jsxarchivos.
He leído sobre JSXarchivos y tengo entendido que simplemente te permiten escribir HTMLetiquetas dentro de tu archivo JavaScript. Pero lo mismo JStambién se puede escribir en archivos.
Entonces, ¿cuál es la diferencia real entre .jsy .jsx?
No hay ninguno cuando se trata de extensiones de archivos. Su paquete/transpilador/lo que sea se encarga de resolver qué tipo de contenido de archivo hay.
Sin embargo, existen otras consideraciones a la hora de decidir qué poner en un .jstipo .jsxde archivo. Dado que JSX no es JavaScript estándar, se podría argumentar que cualquier cosa que no sea JavaScript "simple" debería incluir sus propias extensiones, es decir, .jsxpara JSX y .tsTypeScript, por ejemplo.
Hay una buena discusión aquí disponible para leer.
En la mayoría de los casos, solo es necesario el transpilador/paquete, que puede no estar configurado para funcionar con archivos JSX, ¡pero sí con JS! Por lo tanto, se ve obligado a utilizar archivos JS en lugar de JSX.
Y dado que reaccionar es solo una biblioteca para javascript, no hace ninguna diferencia 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 del 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 <script>etiqueta simple, por ejemplo. Por lo tanto, todos los archivos de 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 de React. También podría ser .jsx. Cualquier otro archivo JSX suele tener la extensión .jsx.
En cualquier caso, la razón por la que existe ambigüedad es porque, en última instancia, la extensión no importa mucho, ya que el transpilador procesa cualquier tipo de archivo, siempre que en realidad sea JSX.
Mi consejo sería: no te preocupes por eso.
Como otros mencionaron, JSXno es una extensión estándar de Javascript. Es mejor nombrar su punto de entrada de Aplicación en función de .jsy para el resto de componentes que puede usar .jsx.
Tengo una razón importante por la que lo uso .JSXpara todos los nombres de archivos de los componentes. En realidad, en un proyecto a gran escala con una gran cantidad de código, si configuramos todos los componentes de React con .jsxextensión, será más fácil navegar a diferentes archivos javascript en todo el proyecto (como ayudas, middleware, etc.) y sabrás que esto es un componente de React y no otros tipos de archivo javascript.
