React ha sido durante mucho tiempo una biblioteca de JavaScript de referencia y es fácilmente una de las más populares del mundo. Además, con marcos populares como Next.js y Remix construidos sobre React y la capacidad de realizar desarrollo móvil con React-Native, esta biblioteca no desaparecerá pronto. Sin embargo, el problema con esto es que la mayoría de los principiantes acuden en masa a React y empiezan a aprenderlo sin entender realmente cómo funciona. Así que profundicemos.

Cómo funciona JSX

En React, JSX (JavaScript XML) es una sintaxis que se parece a HTML pero funciona dentro de JavaScript. No es JavaScript válido en sí mismo, por lo que React usa un transpilador (generalmente Babel) para convertir JSX en JavaScript estándar. Este código JavaScript es lo que finalmente interpreta el navegador.

Cuando escribes JSX, se transforma en llamadas a funciones React.createElement(). Estas llamadas a funciones producen elementos de React, que son los componentes básicos de una aplicación de React. Cada elemento representa una parte de la interfaz de usuario.

Aquí tienes un ejemplo de cómo se ve:

JSX en un componente de React

const element = (
  

    
Hello, React!
    
This is a paragraph.
  
);

JSX transformado en JavaScript:

const element = React.createElement(
  'div',
  null,
  React.createElement('h1', null, 'Hello, React!'),
  React.createElement('p', null, 'This is a paragraph.')
);

React toma estas llamadas anidadas a React.createElement() y las convierte en los elementos HTML correspondientes en el DOM del navegador.

Conclusión

JSX facilita la escritura de componentes de React al permitirle escribir una sintaxis similar a HTML, pero es solo azúcar sintáctico para las llamadas a React.createElement() que crean la estructura de su aplicación usando JavaScript. Esto es lo que permite a React administrar la interfaz de usuario de manera eficiente a través de su mecanismo DOM virtual.

Si disfrutó de este artículo, es posible que también disfrute de mi boletín informativo gratuito que envío todas las semanas a desarrolladores como usted. Puedes registrarte aquí.