react js (2): componentes

Introducción a los componentes React

Keith Haring

archivado en: JavaScript / 12 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)

En la primera entrada de esta serie dedicada a react.js vimos cómo preparar el entorno de trabajo y cómo compilar código jsx a js normal. En esta empezaremos a aprender cómo funcionan los componentes react. Pero antes, un par de ideas clave.

Primera. Como es sabido, se ha producido una gran revolución en el desarrollo web gracias a los avances de html 5 y javaScript 5, caracterizada entre otras cosas por ordenar las páginas en aplicaciones mvc que corren del lado del cliente, como angular, backbone o ember.

Uno de los siguientes pasos que se está dando es optimizar el trabajo de la vista mediante el uso de componentes. Un «componente» es un elemento reutilizable, como los widgets de jQuery UI o los componentes, propiamente dichos, de bootstrap. Así, por ejemplo, un input que despliega un calendario en el que escoger una fecha, lo que se conoce como datepicker, es un componente que podemos utilizar en una página web llena de nodos, tags, de html5.

La idea está chula: imaginemos que tenemos a nuestra disposición miles de componentes para cualquier cosa que vaya más allá de un tag con estilos y que estas piezas cuentan con todo el código necesario para estar operativas... sería algo parecido a lo que ocurría con el boom de los plugins de jQuery, pero a lo bestia y aún más sencillo de implementar. Pues esta es una de las líneas de trabajo de los próximos frames que estarán de moda, como polymer, angular 2.* o react.

Segunda. Actualmente, la renderización del DOM es una de las tareas que más ralentiza una página. Si cuenta con muchos elementos o son muy complejos, el ordenador es una castaña y el navegador es el explorer, los resultados pueden llegar a ser incluso catastróficos: de la serie, sí, ese slider tan espectacular no se puede utilizar porque cada vez que se abre en el explorer comienza a salir humo del teclado.

Bueno, dice React, pues una manera de solucionar esto es que solo se rendericen aquellas partes que de verdad han cambiado. Así, mientras que en una página normal si cambias cualquier parte se vuelve a renderizar todo, en una react solo se re-renderiza ese fragmento gracias al llamado diff algorithm y el concepto de DOM virtual.

Volveremos sobre esto más adelante, ahora vamos a ver ya sí cómo se crea un componente básico en react.

Clases y renderizaciones

React es el objeto principal del frame y equivale, para aclararnos, al $ de jQuery. En la entrada anterior ya vimos uno de sus métodos más importantes: render, que acepta tres argumentos: el fragmento de html que debe renderizar, una referencia al sitio del DOM donde debe insertar ese fragmento y, opcional, una función callback que veremos más adelante.

// scripts/uno.js

React.render(

<h1>Hola mundo!</h1>,

document.getElementById('miContenedor')

);

Está chulo, pero hay una manera mejor de hacerlo y es separando la definición de lo que se debe renderizar en una clase, de tal manera que en el método render solo tengamos que indicar que tal clase debe renderizarse en tal contenedor. Para eso contamos con el método createClass, que en su forma más sencilla recibe un objeto con la definición del código html que debe ser renderizado.

Para que se entienda, en esta entrada y las siguientes dedicadas a este tema, vamos a ir creando la página virtual de una biblioteca. La página index.html podría ser algo así:

<!doctype html>

<html class="no-js" lang="es">

<head>

<meta charset="utf-8">

<meta http-equiv="x-ua-compatible" content="ie=edge">

<title>Biblioteca Fantástica</title>

<meta name="description" content="tutorial de react">

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="build/react.js"></script>

</head>

<body>

<div id="contenedorBiblioteca"></div>

<script src="build/biblioteca.js"></script>

</body>

</html>

A continuación, en un archivo que podemos llamar biblioteca.js o como sea, definimos una primera clase para los titulares:

/* Cacheamos la clase en una variable que sirve para definir el "elemento",
(por convención irá en mayúsculas) */

var Titulares = React.createClass({

render: function() {

return (

<h2 className="titular">

Biblioteca Fantástica

</h2>

);

}

});

Una vez definida la clase, que es como haber definido un nuevo tipo de tag html, tan solo tenemos que lanzarla con el método render que ya conocemos pasándola en el primer parámetro.

React.render(

<Titulares />,

document.getElementById('contenedorBiblioteca')

);

Como ocurre con las templates de las directivas de Angular, el html definido en el render de las clases debe estar enmarcado en un nodo padre cerrado. Es decir, esto funciona:

<div>

lo que sea aquí dentro...

</div>

Pero esto no funciona

<span>

lo que sea

</span>

<span>

lo que sea

</span>

Bueno, como veremos hay una manera más elegante de hacer esto, pero por hoy lo dejamos aquí.

|| 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.