Qué es JSX y por qué aprender a usarlo

Si decidiste aprender 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 logrado gran aceptación, especialmente en la comunidad de desarrolladores de React, y propone una manera simple de crear componentes, utilizando HTML + JavaScript.

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

Qué es JSX

Tal como explicaba 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 = "Dami"
  return (
    <div className="caja">
      <h1>Hola {nombre}</h1>
      <h2>Esto es un ejemplo de JSX</h2>
      <p>Y esto es un párrafo de ejemplo</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

Acerca de Damián De Luca

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.