Todo lo que necesitas saber sobre JSX y su importancia en el desarrollo web» – Damián De Luca

Si decidiste adentrarte en una nueva librería o framework o si estás en una búsqueda laboral como desarrollador, seguramente haz leído la referencia a JSX.

Esta extensión de JavaScript ha obtenido gran aceptación, especialmente en la comunidad de desarrolladores de React, y propone un método sencillo para crear componentes, utilizando HTML + JavaScript.

En este artículo vamos a profundizar sobre su relevancia y porque vale la pena aprender JSX.

Qué es JSX

Así como mencionaba en la introducción, JSX es una extensión de JavaScript, que ha tomado especial impulso por el uso que le han dado librerías como React.

Si buscamos una definición más estricta, debemos pensar en JSX como una extensión de sintaxis similar a XML para ECMAScript. No es una opción que esté pensada para ser interpretada directamente por los navegadores, por esta razón requiere ser compilada antes de su uso (por ejemplo con Babel.js).

JSX se destaca porque permite una sintaxis que se asemeja mucho a la del HTML, pero dentro de nuestros scripts. Esto permite que el código sea más fácil de leer y entender, especialmente para aquellos que ya están familiarizados con el HTML.

Dentro de sus virtudes podemos señalar que JSX permite encapsular y manejar la lógica de la interfaz de usuario dentro de componentes reutilizables. Esto promueve la eficiencia y la consistencia en el desarrollo. Esta característica es clave en el desarrollo de aplicaciones con React.

Es importante tener presente que React nos plantea que la lógica de renderizado se vincula a la lógica de la interfaz de usuario. Esto influye en la manera de pensar los eventos, cambios de estado y la manera en que se estructura los datos para su visualización. En esto último resulta clave la integración que permite JSX entre JavaScript y HTML.

Código y ejemplo de uso

A continuación vamos a crear un componente con una función de flecha (arrow function, en inglés)

const App = () => {
  const nombre = "Ana"
  return (
    <div className="caja">
      <h1>Hola {nombre}</h1>
      <h2>Esto es un ejemplo de JSX</h2>
      <p>Y esto es un párrafo de demostración</p> 
    </div>
  );
}

En este caso la función de flecha queda asociada a una constante. El nombre debe ser único en ese script y se recomienda que comience la primera letra con mayúsculas.

Al abrir llaves se puede escribir JavaScript, en este caso se define una constante con un nombre. Luego del código JavaScript se declara el return y se devuelve la parte HTML del componente, con las características que permite JSX. Como vemos en este caso se usa className en lugar de class. Esto es porque class es una palabra reservada en JavaScript (debemos tener muy en cuenta esto, ya que hay otros casos similares). También podemos apreciar que para reflejar el valor de la variable dentro del return empleamos las llaves { }.

¿Por qué aprender JSX?

Para todo desarrollador que se plantea del desafío de comenzar a trabajar con React, aprender JSX es esencial. Además, vale decir, que existen otras bibliotecas y frameworks modernos que también han adoptado conceptos similares a los de JSX, por lo que entenderlo puede brindarnos una base sólida para explorar otras tecnologías.

Bien vale señalar que JSX nos abre un nuevo universo de posibilidades a la hora de crear componentes, ya que nos facilita plantear flujos condicionales. Además la posibilidad de anidar y reutilizar componentes nos permite estructurar de una manera más eficiente nuestro código.

Existen muchas otras características interesantes de JSX, especialmente relacionadas con las capacidades que ofrece React. Pero el objetivo de estas líneas es dar una introducción para aquellas personas que necesitan una primera aproximación a JSX.

Para finalizar vale decir que dada la popularidad y la adopción cada vez mayor de React en el desarrollo web, es probable que JSX siga siendo muy relevante en los próximos años. Aprender y dominar JSX no sólo te hará un desarrollador de React más competente, y con mayores posibilidades laborales, sino que también te abrirá la puerta a otras tecnologías que usan enfoques similares.

Para conocer más sobre JSX podemos leer la documentación: https://facebook.github.io/jsx/.

Más sobre Diseño y desarrollo Web

En Grupo MET podemos ayudarte a implementar esta y muchas mas herramienta para optimizar tu trabajo. ¡Contáctanos para saber más!

Contactanos