Hice una aplicación con la biblioteca de reacción y guardé todos los archivos como .js y funciona perfectamente bien. ¿Alguien puede ayudarme a comprender qué diferencias trae cuando guardamos los archivos con extensiones .jsx en términos de rendimiento o algo así?
Y si no es así, ¿por qué usamos .jsx?
PD: aunque soy nuevo en reaccionar, pero soy consciente de las diferencias básicas entre las extensiones .jsx y .js.
No hay diferencia de rendimiento en el tiempo de ejecución, y al navegador no le importa qué extensión (si la hay) usa en sus archivos JavaScript.
.jsx es solo una convención, indica que el archivo contiene no solo JavaScript, sino JSX, que es una extensión de JavaScript que le permite escribir una sintaxis similar a XML (algo similar a HTML) que se convierte en una llamada de función (mediante un herramienta de compilación de algún tipo) antes de que el código se use en un entorno de JavaScript. Por ejemplo, si escribes:
const d = <div className="example">Hi there</div>;su herramienta de compilación lo convertirá (probablemente a través de Babel) en:
const d = React.createElement("div", {className: "example"}, "Hi there"); Los archivos .js , nuevamente por convención, solo contienen JavaScript, no JSX.
He dicho "por convención" arriba, pero tenga en cuenta que si coloca la sintaxis JSX en un archivo .js , tendrá que tomar medidas para decirle a su herramienta de compilación que necesita convertir ese JSX. La mayoría de las herramientas de compilación siguen la convención, por lo que si no lo hace, debe realizar una configuración adicional.