JSX, el lenguaje de React (con EJEMPLOS)

⚛ React o ReactJS

React o ReactJS, es una de las tecnologías de JavaScript mas populares del momento. Desarrollada y mantenida principalmente por Facebook desde el año 2013, React se define como una librería open-source enfocada en construir interfaces de usuario para el front end.

🔳 Componentes

Uno de los conceptos principales de React son los componentes, estos son funciones (o clases) que almacenan una cierta lógica y una interfaz de usuario que puede ser renderizada al DOM.

Los componentes permiten separar la interfaz de usuario en piezas independientes, reutilizables y pensar en cada pieza de forma aislada. - react.org

JavaScript XML (JSX)

Para describir la interfaz de usuario a ser representada en un componente se utiliza la sintaxis JSX (JavaScript XML). Esta es una extensión a JS que nos permite escribir HTML dentro de nuestro código sin necesidad de representarlo como un string (encerrándolo entre comillas).

⌨ Ejemplo:

function App() {
  return <h1>Hola Mundo</h1>;
}

Esta extensión en realidad es azúcar sintáctica para llamar a la función React.createElement(type, [props], [...children]), de modo que el ejemplo anterior transformado a ECMAScript estándar por un preprocesador (como Babel.js) se transforma en:

⌨

function App(){
  return React.createElement("h1", null, "Hola Mundo");
}

El parámetro type puede ser tanto un string con el nombre de una etiqueta HTML o un componente de React (ya sea de clase o función). El parámetro props es un objeto que contiene los atributos del parámetro type y finalmente children son todos los componentes o tags HTML que están dentro del elemento que estamos creando.

Recuerda que para utilizar la función React.createElement la libreria React debe estar en el scope.
Esto mediante:

import React from 'react'

Entonces... ¿Como se transforma un componente con una UI mas compleja?

JSX con etiquetas HTML anidadas

⌨JSX

function App() {
  return (
    <div>
      <h1>Bienvenido a Dev.to</h1>
      <button>Unirse a la comunidad</button>
    </div>
  );
}

⌨ECMAScript

function App() {
  return React.createElement(
    "div",
    null,
    React.createElement("h1", null, "Bienvenido a Dev.to"),
    React.createElement("button", null, "Unirse a la comunidad")
  );
}

Mira como las etiquetas <h1> y <button> también son transformadas a una llamada a la función React.createElement(...) y son pasados como parámetros distintos en la llamada a la función que crea el <div> que los contiene.

JSX con componentes de React

Hasta ahora solo hemos utilizado etiquetas HTML, pero también podemos utilizar componentes de React para describir nuestra interfaz de usuario.
⌨JSX

function Saludo() {
    return (
        <h1>Bienvenido a DEV Community</h1>
    );
}

function App() {
  return (
    <Saludo />
  );
}

⌨ECMAScript

function App() {
  return React.createElement(Saludo, null);
}

Es importante tener en cuenta que los componentes de React deben empezar con una mayúscula. De esta forma es como se diferencian los elementos nativos de HTML de los componentes.

Veamos que sucede si declaramos un componente que no comienza con una letra mayúscula.

⌨JSX

function saludo() {
    return (
        <h1>Bienvenido a DEV Community</h1>
    );
}

function App() {
  return (
    <saludo />
  );
}

⌨ECMAScript

function App() {
  return React.createElement("saludo", null);
}

Mira como el componente saludo se pasa a la función React.createElement como si fuese un string y no como si fuese una función, como en el caso anterior.
Cuando se le pasa un objeto de tipo string, React lo interpretará como si fuese una etiqueta nativa de HTML y no lo renderizará de la manera esperada.

Expresiones JS dentro de JSX

Puedes incrustar expresiones dentro de JSX encerrándolas en paréntesis de llaves.

⌨JSX

const nombre = 'Sebastian Pardo';
const despedida = <h1>Hasta la proxima, {nombre}!</h1>;

⌨ECMAScript

const despedida = React.createElement("h1", null, "Hasta la proxima, ", nombre, "!");

Y esto al renderizarlo en HTML sera: ⌨

<h1>Hasta la proxima, Sebastian Pardo!</h1>

Por supuesto puedes hacer uso de otras expresiones como llamadas a la función Array.map() para iterar sobre un arreglo, expresiones matemáticas o concatenación de strings.

Renderizado condicional

Otra expresión bastante útil que puedes utilizar es la que te permite renderizar una sección de tu UI dependiendo de una condición.

Este funcionalidad consiste en lo siguiente:

1. Declarar la condición.
2. Utilizar el operador lógico &&.
3. Declarar la parte de tu UI que esta sujeta a la condición previa. (puedes utilizar JSX)

A continuación un ejemplo: ⌨

let esViernes = true;
const inicio = <div>
    <h1> Bienvenido </h1> 
    { esViernes && <h2> "Feliz Viernes" </h2>}
</div>;

// OUTPUT
<div>
  <h1> Bienvenido </h1>
  <h2>Feliz Viernes</h2>
</div>

Esta funcionalidad se debe a que en JavaScript una expresión del tipo true && expresion siempre devuelve expresion, mientras que en el caso de false && expresion siempre devuelve false.

Un problema con este tipo de expresiones es que no nos permiten implementar una lógica de tipo if/else.
En el caso de que necesitemos implementar este tipo de lógicas podemos utilizar el operador ternario.
⌨ Ejemplo:

let esViernes = false;
const inicio = <h1>{esViernes ? "ES VIERNES!!" : "Otro dia mas..."}</h1>

// OUTPUT
<h1>Otro dia mas...</h1>

Valores Ignorados

Las etiquetas que contengan valores booleanos true/false, null y undefined serán renderizadas sin ningún contenido dentro.

⌨ Ejemplo:

<p>{true}</p>
<p>{false}</p>
<p>{true && true}</p>
<p>{null}</p>
<p>{undefined}</p>
<p></p>

Todos los ejemplos anteriores compilan a:
⌨

<p></p>

Conclusión 📚

Si bien es posible escribir aplicaciones en React sin utilizar JSX, la verdad es que no es una opción viable en ningún caso (exagero).
Las mejoras que nos ofrece el utilizarlo no solo se quedan en la simplicidad y claridad del código, también nos permite ser mas productivos y rápidos escribiendo código React.
Aun cuando es una extensión de JS bastante simple de entender, tiene particularidades (algunas las revisamos en el post, no todas) que es importante conocer para evitar incurrir en posteriores bugs en nuestros códigos.

Referencias 🌐

Stack Overflow Survey 2020
JS Apps at Facebook
Introducing JSX
JSX in Depth