react js (3): introducción a jsx

Empezamos a ver un poco de JSX

Keith Haring

archivado en: JavaScript / 14 julio, 2015 / taller:

Importante!

Este taller es sobre una versión antigua de React. Salvo que te guste la arqueología, es mejor que leas esta otra, React revisitado, que está actualizada... al menos de momento (verano de 2017)

Como hemos visto, React puede funcionar con javaScript normal, pero para desarrollar es más rápido si escribimos el código en JSX, una extensión parecida a xml que debe ser compilada. Así que antes de seguir avanzando en esta librería para renderizar vistas, vamos a profundizar algo más en JSX.

1. createElement()

En javaScript normal, para crear un nuevo nodo escribiríamos algo así:

var nuevoNodo = document.createElement("div");

var contenidoNodo = document.createTextNode("Bazinga!");

nuevoNod.appendChild(contenidoNodo);

var algunSitioDelDom = document.getElementById("foo");

document.body.insertBefore(nuevoNodo, algunSitioDelDom);

Sin embargo, en React funciona de manera distinta, pues, como ya sabemos, en estra librería se parte de un DOM virtual que se va trasladando al DOM real a medida que se va necesitando.

Así, en lugar de utilizar el método createElement de js, se utiliza uno especial con el mismo nombre de React, React.createElement(), que recibe tres parámetros:

  1. El nombre del tag o la clase react (la que vimos en la entrada anterior).
  2. Sus propiedades.
  3. Sus hijos.

Así, por ejemplo, este fragmento de html para renderizar en algún contenedor de la vista...

React.render(

<div>Bazinga</div>,

document.getElementById('contenedorJSX')

);

... equivaldría a esta expresión con createElement():

React.render(

React.createElement("div", {}, "Bazinga!"),

document.getElementById('contenedorJSX')

);

Pero esto se puede hacer más chulo mediante JSX...

2. Árboles de elementos

Como es sabido, un documento xml consiste en esencia en un árbol de nodos con atributos:

<nodo padre atributo1="haga Basin">

<nodo hijo atributo2="Oh la la">foo</nodo hijo>

<nodo hijo atributo2="Bazinga">bar</nodo hijo>

</nodo padre>

En JSX sucede lo mismo, solo que se refiere a elementos en lugar de nodos y, como sucede en XML, los que contienen a su vez a otros elementos, los padres, deben contar con un elemento de apertura y otro de cierre:

<elemento padre>

<elemento hijo>foo</elemento hijo>

</elemento padre>

Y al igual que ocurre en XML, los elementos deben ir por pares de apertura y cierre, y si uno no lo necesita (como ocurre con los <br> de html) hay que cerrar el tag al final:

<miElementoSinnadaDentro />

Recordemos que en un documento XML, las cadenas contenidas en un nodo son sus "hijas".

3. Atributos

En los elementos de JSX podemos definir los atributos que necesitemos, separados por sus valores por el signo igual como sucede con los tags normales de html. Así, por ejemplo, este fragmento de html...

<div data-color="verde">Soy una alcachofa coqueta</div>

Se define de forma idéntica en JSX:

/* Obsérve cómo la definición jsx de alcachofa no va entre comillas, pues es js, no una cadena */

var alcachofa = <div data-color="verde">Soy una alcachofa coqueta</div>;
React.render(

alcachofa,

document.getElementById('contenedorJSX')

);

Pero, además, se pueden definir en los valores expresiones javaScript, como ocurre con las expresiones de Angular. Estas expresiones van entre llaves ({}) y no deben confundirse con un sistema de plantillas tipo handlebars: son valores que se calculan dinámicamente.

Así, por ejemplo, podríamos tener 5 alcachofas coquetas ^^:

var alcachofa = <div data-color="verde" data-cantidad={2+3}>Soy una alcachofa coqueta</div>;

Y la fórmula JSX, creo que todos estaremos de acuerdo, es bastante más legible que el createElement, que en el caso anterior habría que escribir más o menos así:

var alcachofa = React.createElement("div", {id: "miAlcachofa", className: "miClase", "data-color": "verde", "data-cantidad": 2+3}, "Soy una alcachofa coqueta");

Esto se aprecia mejor con fragmentos más largos, pero por hoy lo dejo aquí, que ya es tarde 😛

Tres ideas clave sobre los atributos de JSX:

  • Los atributos que no son estándar, los que se hace uno mismo, como color o cantidad en el caso anterior, deben ir precedidos por data-.
  • El atributo para clase ("class") en JSX se escribe por razones que desconozco "className".
  • Admite atributos aria.

|| Tags: , ,

Este artículo aún no ha sido valorado.

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.