Tradicionalmente, los desarrolladores han separado el marcado y la lógica en archivos distintos, utilizando HTML para la estructura y CSS para el estilo y escribiendo después JavaScript para manejar las interacciones y la manipulación de datos.

Pero, ¿y si hubiera una forma de combinar estas tecnologías, simplificando el proceso de desarrollo y facilitando la creación de interfaces de usuario complejas? Ahí es donde entra JSX.

En este artículo, aprenderás qué es JSX, cómo funciona y por qué es importante para crear interfaces de usuario dinámicas en el desarrollo web.

Exploremos esta revolucionaria tecnología con más detalle.

¿Qué Es JSX?

JSX (JavaScript XML) es una extensión sintáctica para JavaScript que permite a los desarrolladores escribir código similar al HTML dentro de un archivo JavaScript. Fue desarrollada por Meta (antes Facebook).

La sintaxis de JSX se parece a la de HTML, con etiquetas de apertura y cierre, atributos y elementos anidados.

Por ejemplo, podrías escribir el siguiente código JSX para representar un simple elemento de encabezamiento:

const heading = <h1>Hello, JSX!</h1>;

Este código parece HTML, pero es JavaScript. La palabra clave const crea una nueva variable llamada heading, y el valor de esa variable es el resultado de la expresión JSX.

¿Cómo Funciona JSX?

JSX se transforma en JavaScript normal antes de ejecutarse en el navegador. Esta transformación se realiza mediante una herramienta llamada transpilador. El transpilador más popular para JSX es Babel.

Babel transforma el código JSX en una serie de llamadas a funciones. Estas llamadas a funciones son equivalentes al código HTML escrito en JSX. El navegador puede entonces ejecutar el código JavaScript resultante.

Por ejemplo, el siguiente código JSX:

const element = <h1>Hello, world!</h1>;

se transforma en el siguiente código JavaScript:

const element = React.createElement("h1", null, "Hello, world!");

Esta transformación permite a los desarrolladores escribir código en una sintaxis que les resulta familiar y fácil de leer, sin dejar de aprovechar la potencia y flexibilidad de JavaScript.

JSX y React

JSX es una parte integral de React, que permite a los desarrolladores escribir el marcado y la lógica de estos componentes en un único archivo.

Aquí tienes un ejemplo sencillo de código JSX en un componente React:

import React from 'react';

function Greet() {
  return <h1>Hello World!</h1>;
}

export default Greeting;

En este ejemplo, tienes un componente funcional llamado Greet que muestra un elemento h1 con un mensaje de saludo.

El compilador de React transformará este código en código JavaScript optimizado que podrá ser ejecutado por el navegador, permitiendo que el componente se renderice en la pantalla.

Esto es en lo que el compilador de React transformaría el componente Greet:

import React from 'react'

function Greet() {
  return React.createElement("h1", {}, "Hello, World!")
}

En este código, el código JSX se ha transformado en una llamada a React.createElement que crea la misma estructura y contenido que el código JSX original.

Esto es lo que ocurre entre bambalinas cuando React compila código JSX, permitiendo que sea ejecutado por el navegador. Sin embargo, el código transformado puede ser menos legible que el código JSX original.

En la versión 17 de React, se introdujo una nueva función de transformación JSX, que importa automáticamente funciones especiales de los nuevos puntos de entrada del paquete React, permitiendo a los desarrolladores utilizar JSX sin tener que importar React al principio de sus archivos.

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

Uso de Expresiones de JavaScript con JSX

En JSX, las expresiones de JavaScript pueden incrustarse directamente dentro del marcado para generar contenido dinámicamente. Esto permite a los desarrolladores utilizar código JavaScript para calcular valores, realizar operaciones y generar contenido condicionalmente dentro de sus componentes JSX.

Este ejemplo muestra cómo utilizar dos expresiones JavaScript dentro de JSX:

import React from 'react';

const MyComponent = () => {
  const name = 'John';
  const age = 30;

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
      <p>Next year, you will be {age + 1} years old.</p>
      {age >= 18 && <p>You are an adult.</p>}
    </div>
  );
};

export default MyComponent;

En este ejemplo, se utilizan expresiones de JavaScript como {name}, {age}, {age + 1}, y {age >= 18 && <p>You are an adult.</p>} para mostrar dinámicamente el contenido en función de los valores de las variables nombre y edad.

Usar CSS con JSX

CSS puede aplicarse a componentes JSX de varias formas, como estilos inline, archivos CSS independientes o bibliotecas CSS-in-JS. Los estilos inline se definen directamente dentro del marcado JSX utilizando objetos JavaScript, mientras que los archivos CSS independientes o las bibliotecas CSS-en-JS permiten aplicar estilos externos y modulares a los componentes.

Este ejemplo muestra cómo aplicar estilos inline definidos mediante un objeto JavaScript a elementos utilizando el atributo style en JSX:

import React from 'react';

const MyComponent = () => {
  const styles = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px'
  };

  return (
    <div style={styles}>
      <h1>Hello, World!</h1>
      <p>This is a component with inline styles.</p>
    </div>
  );
};

export default MyComponent;

En este ejemplo, las propiedades CSS como backgroundColor, color, y padding se establecen como pares clave-valor en el objeto styles, y sus valores son cadenas que representan los valores CSS.

Nota: Aunque los estilos inline proporcionan flexibilidad y simplicidad, se recomienda utilizar clases CSS o bibliotecas CSS-en-JS para estilos más complejos o reutilizables en aplicaciones más grandes.

6 Reglas Importantes de JSX

Al escribir código JSX, hay ciertas reglas que debes seguir para asegurarte de que es válido y fácil de leer.

1. Devuelve Siempre un Único Elemento Root

En JSX, siempre debes devolver un único elemento root. Esto significa que todo tu código JSX debe estar contenido en un único elemento exterior. Por ejemplo, esto es JSX válido:

return (
  <div>
    <h1>Hello World!</h1>
    <p>This is my first React component.</p>
  </div>
)

Pero no lo es porque devuelve dos elementos en lugar de uno:

return (
  <h1>Hello World!</h1>
  <p>This is my first React component.</p>
)

Esto es importante tenerlo en cuenta al convertir códigos HTML a JSX.

2. Utilizar className En Lugar De class

En HTML, utilizarías el atributo class para especificar una clase CSS para un elemento. Sin embargo, en JSX, debes utilizar el atributo className en su lugar. Por ejemplo:

// Good
<div className="my-class">This element has a CSS class.</div>

// Bad
<div class="my-class">This element has a CSS class.</div>

Utilizar className en lugar de class es importante y evita conflictos de nombres porque class es una palabra clave reservada en JavaScript.

3. Utiliza Llaves para las Expresiones de JavaScript

Cuando necesites incluir una expresión de JavaScript dentro de tu código JSX, debes envolverla en llaves {}. Esto se puede utilizar para cualquier cosa, desde mostrar datos dinámicos hasta renderizar componentes condicionalmente. Aquí tienes un ejemplo:

// Good
<div>{myVariable}</div>

// Bad
<div>myVariable</div>

También puedes ejecutar operaciones matemáticas dentro de las llaves, como:

<p>The total cost is {25*10}</p>

Además, dentro de las llaves, puedes establecer sentencias condicionales utilizando operadores ternarios:

<h1>{(x) < 15 ? "Welcome" : "Goodbye"}</h1>

Aquí tienes un ejemplo mejor con el componente React:

function Greeting() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? (
        <h1>¡Bienvenido!</h1>
      ) : (
        <h1>Por favor, inicia sesión.</h1>
      )}
    </div>
  );
}

En este ejemplo, definimos un componente Greeting. El componente utiliza el operador ternario para mostrar condicionalmente un saludo en función del valor de isLoggedIn. Si isLoggedIn es true, el componente muestra un elemento h1 con el texto «¡Bienvenido!». Si isLoggedIn es false, el componente muestra un elemento h1 con el texto «Por favor, inicia sesión».

4. Utiliza camelCase Para la Mayoría de las Cosas en JSX

En JSX, utiliza camelCase para la mayoría de las cosas, incluidos atributos, controladores de eventos y nombres de variables. Esta convención es coherente con las convenciones de nomenclatura de JavaScript y ayuda a mantener la legibilidad.

Por ejemplo, utiliza code>onClick en lugar de onclick, y className en lugar de class.

// Good
<button onClick={handleClick} className="btn">Click me!</button>

// Bad
<button onclick={handle_click} class="btn">Click me!</button>

5. Cierra Siempre las Etiquetas

En JSX, debes cerrar siempre las etiquetas, aunque no tengan contenido. Por ejemplo

// Good
<div></div>

// Bad
<div/>

6. Utiliza Etiquetas de Autocierre para Elementos Vacíos

Si tienes un elemento que no tiene contenido, puedes utilizar una etiqueta de autocierre en lugar de una etiqueta de apertura y cierre. Por ejemplo

// Good
<img src="my-image.jpg" alt="My Image"/>

// Bad
<img src="my-image.jpg" alt="My Image"></img>

¿Por Qué es Importante JSX para el Desarrollo Web?

JSX es importante para el desarrollo web porque:

  1. Permite a los desarrolladores construir interfaces de usuario de una forma más intuitiva y familiar.
  1. En lugar de manipular directamente el DOM, los desarrolladores pueden utilizar JSX para describir la estructura de su interfaz de usuario de una forma más parecida a escribir HTML.
  1. Esto permite un desarrollo más eficaz y flexible. Como JSX es sólo JavaScript, los desarrolladores pueden aprovechar todas las funciones de JavaScript para crear interfaces de usuario más complejas y dinámicas.
  1. Es una parte importante de la biblioteca React, que es una de las opciones más populares para construir interfaces de usuario en el desarrollo web moderno. Si quieres utilizar React, tendrás que aprender JSX.

Resumen

JSX es una extensión sintáctica de JavaScript que permite a los desarrolladores escribir marcas similares a HTML dentro de un archivo JavaScript. Esto facilita la creación de interfaces de usuario dinámicas e interactivas para aplicaciones web.

Has aprendido algunas reglas que debes seguir al utilizar JSX: siguiendo estas reglas, podemos escribir código limpio, legible y mantenible, que sea coherente con las convenciones de nomenclatura de JavaScript.