Usar JSX en ReactJS

En nuestro primer artículo vimos cómo podíamos hacer un Hola Mundo con ReactJS donde creábamos un componente que nos saludaba. Dando así los primeros pasos en la creación de componentes con ReactJS. En este caso vamos a ver cómo podemos usar JSX en ReactJS y qué beneficios tenemos al utilizarlo.

¿Qué es JSX?

JSX o JavaScript XML es una extensión de la sintaxis de Javascript en la cual podemos definir elementos Javascript mediante sintaxis HTML. De esta manera es más sencillo de entender el código Javascript cuando definimos un objeto con HTML en vez de si lo hacemos vía métodos en Javascript. Facilitando a una persona que no conozca nuestro código una fácil lectura.

Por ejemplo podemos definir un elemento de cabecera h1 de la siguiente forma:

const elemento = <h1>Soy una cabecera</h1>;

Mucho más sencillo que si lo hacemos con métodos como .createElement() que sería algo así:

var elemento = document.createElement("h1");
elemento.innerHTML = "Soy una cabecera";

Renderizar un componente con JSX

Ya vimos en nuestro ejemplo Hola Mundo con ReactJS cómo renderizar un componente que tuviese el elemento cabecera h1 definido mediante JSX.

ReactDOM.render(
  <h1>Hola Mundo!</h1>,
  document.getElementById('root')
);

Combinar JSX con variables JavaScript

Pero además podemos combinar dentro del código JSX el código que representa al elemento HTML y el contenido de variables o expresiones Javascript que tengamos en nuestro programa.

Por ejemplo, si hemos definido una constante con el nombre:

const nombre = "Manual Web";

La utilizaremos en el código JSX introduciéndola entre llaves.

const element = (
  <h1>
    Hola, {nombre}!
  </h1>
);

De igual manera se podría poner una expresión entre las llaves que, por ejemplo, invocase a una función:

const element = (
  <h1>
    Hola, {formatear(nombre)}!
  </h1>
);

Ejemplo completo

Ya solo nos quedará renderizar el elemento, mediante el método .render(), para poder crear nuestro componente y así usar JSX en ReactJS para insertar el contenido de variables en Javascript. Quedándonos el siguiente código:

const nombre = "Manual Web";
const element = (
  <h1>
    Hola, {nombre}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

Cargar las librerías de ReactJS

Eso sí, no olvides el referenciar a las librerías de ReactJS para que la página se visualice de forma correcta.

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>