Qué es JSX y como usarlo

Lo que siempre pasa cuando alguien que está viendo código de React por primera vez y ve la parte de JSX es que cree que es HTML, pero no lo es. JSX (JavaScript XML) sirve para escribir HTML en JavaScript.

Si al principio te suena mal o te parece complicado no te asustes: es muy sencillo. Tan sencillo que como digo, las personas que se están iniciando lo confunden. Pero antes de empezar a explicar cómo hacer determinadas cosas, explicaré un poco de base para que luego todo se entienda más fácil.

En 3 puntos:

Cuando se escribe JSX en realidad estás escribiendo JavaScript.
Un proceso de compilado se encargará de convertirlo en algo más parecido al JavaScript que ya conoces, el que no parece HTML.
Este código compilado será el que se encargue de crear y gestionar elementos del DOM, es decir, el HTML real.

Un ejemplo:

// Este código:
const element = <p>Lorem Ipsum</p>;

// Una vez compilado acabaría así:
const element = React.createElement('p', {}, "Lorem Ipsum");

A partir de ahí React se encargará de pasarlo a su DOM virtual y de ahí al DOM real. Pero de todo eso te puedes desentender.

Palabras reservadas y camelCase

Debes tener en cuenta que al estar escribiendo JavaScript, hay ciertas discrepancias respecto a HTML con las que te vas a encontrar, como son el uso de palabras reservadas o el uso de camelCase.

Por ejemplo, no puedes escribir <div class="...">, ya que class es una palabra reservada de JavaScript, en su lugar se utiliza <div className="...">, de hecho si estás tratando con el DOM directamente tiene este mismo nombre y por el mismo motivo. De la misma forma, en lugar de escribir tabindex="" escribirás tabIndex="" siguiendo el estilo de JavaScript en lugar de HTML.

Tenlo en cuenta también si trabajas con SVG’s ya que es código que normalmente no escribirás tu y está lleno de palabras inválidas como fill-rule o stroke-width, entre muchas otras, que tendrás que cambiar por fillRule y strokeWidth.

Como incluir una expresión

Es tan sencillo que lo explico directamente con algunos ejemplos:

// Podemos poner simplemente un string:
const name = "John";
const greetings = <p>Hello {name}</p>;

// Una función:
const name = "John";
const phrase = (name) => `Hello ${name}`;
const greetings = <p>{phrase(name)}</p>;

// Unas sumas sencillas:
const userNotifications = 40;
const systemNofitications = 2;
const alert = <p>You have { userNotifications + systemNotifications } notifications</p>

// O mucho más:
const notifications = [
  { id: 1, text: "Lorem Ipsum" },
  { id: 2, text: "Dolor Sit Amet" },
  ...
];

const list = <ul>{
  notifications.map((notification) => {
    return <li key={notification.id}>{notification.text}</li>);
  });
}</ul>

Si estos ejemplos se han entendido más o menos y no te parecen una cosa extrañísima, ya lo tienes casi todo. En unas horas de práctica lo dominarás. No tienes que preocuparte de nada más, ni siquiera de problemas de inyección de código y demás, ya que JSX se encarga de escapar todo lo que procesa.

Ejemplos prácticos

Podrías incluir un elemento de forma condicional así:

{ showHeader && <Header /> }

O podrías pasar un parámetro (o prop, como veremos en siguientes artículos) a ese mismo header así:

<Header sticky={false} />

Aunque ya se ha visto en un ejemplo anterior, pongo otro de como podrías mostrar un listado:

const TasksList = () => {
  const tasks = ['task 1', 'task 2', 'task 3'];
  return (
    <ul>
      { tasks.map((text) => <li key={<meta charset="utf-8">text}>{<meta charset="utf-8">text}</li>) }
    </ul>
  );
}

Puedes usar condicionales ternarios, pero con cuidado no vayas a crear un código poco legible.

const logged = false;
//...
<p>{ logged ? "No has iniciado sesión" : "Sesión iniciada }</p>

No puedes usar un switch directamente en JSX, pero sí podrías aprovechar los ternarios para algo parecido:

<p>
  {
    code === 400 ? "Bad Request" :
    code === 401 ? "Unauthorized" :
    code === 402 ? "Payment Required" :
    code === 403 ? "Forbidden" :
    code === 404 ? "Not found" :
    `Unknown error (${code})`
  } 
</p>

Conclusiones

Como ves, aunque hay que habituarse, no implica ninguna complejidad ni debería suponer ningún problema controlarlo completamente. Mi consejo en todo caso, es que intentes repasar el uso de operadores modernos, como &&, ?? y ||, porque te ayudarán a entender mejor el código de los demás y escribir un código más sencillo.

Photo by Ferenc Almasi on Unsplash.