ezakto code

React.js es una librería creada por Facebook para crear interfaces basadas en componentes independientes, dinámicos y reusables.

Conceptos básicos

Vamos a repasar algunos puntos claves de React, descriptos en su sitio web:

Sólo la interfaz

React es una librería para crear interfaces de usuario. En el modelo MVC (Model-View-Controller), es sólo la V. Puede ser combinado con cualquier otra tecnología rápidamente, puesto que no asume ninguna instalación o estructura previa. Por lo tanto, es fácil comenzar un proyecto nuevo con React, así como integrarlo a uno existente.

Virtual DOM

React usa una implementación "virtual" o propia del DOM (Document Object Model). Esto quiere decir que no modifica el DOM directamente con cada cambio, sino que lo hace "en memoria" y luego utiliza un algoritmo para calcular diferencias (diffing algorithm) entre el DOM renderizado y el virtual y sólo aplicar las diferencias, en vez de regenerar más de la cuenta. Gracias a esto, además, es posible generar el HTML resultante en el servidor, usando node.js.

Flujo de información

El flujo de información a través de los componentes de React es unidireccional. Cada componente pasa la información a sus componentes hijos y no al revés. Esto hace fácil el seguimiento y razonamiento sobre cómo los datos se mueven a través de la aplicación.

JSX

React utiliza una sintaxis basada en XML (similar al HTML) para construir sus componentes usando el Virtual DOM. Esta sintaxis se transcompila a JavaScript (Tal como lo hacen TypeScript o CoffeeScript), por lo que en el fondo sólo es JavaScript presentado de una forma un poco más "visual".

Sí, visual. React plantea otra forma de construir vistas, diferente a los templates de toda la vida. Si bien no es la idea, los templates separan tecnologías, no preocupaciones (separation of concerns). Los componentes de React buscan enfocarse en la separación de preocupaciones propiamente dicha. Por lo tanto, en un principio esto puede parecer "mezclar JavaScript y HTML", o más genéricamente, "mezclar lógica y presentación", pero en realidad estamos agrupando la lógica y la presentación relacionadas en módulos independientes. Separación de preocupaciones.

Entonces, ¿Cómo luce un componente de React?

Si bien la idea siempre será la misma, un componente de React puede lucir de varias maneras. Podemos elegir entre usar JSX (recomendado) o no (como JSX transcompila a funciones JavaScript, podemos directamente escribirlas en JavaScript nativo), y podemos elegir usar ECMAScript 5 o clases ECMAScript 6. Vamos por partes:

ECMAScript 5 con JSX

var Componente = React.createClass({

    render: function() {
        return (
            <div>
                <h1>Hola, mundo!</h1>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
        );
    }

});

Es simple JavaScript, como verán. React.createClass() es la función que utilizaremos para crear un componente. Esta función toma como argumento un objeto cuyas propiedades serán métodos del componente. Algunos de estos métodos serán llamados automáticamente durante el ciclo de vida del componente (profundización más adelante).

Uno de estos métodos es render(), encargado de construir la vista per se. Es necesario que este método devuelva una estructura de Virtual DOM (o null). Esta estructura puede ser construida dinámicamente basada en datos obtenidos por el componente mediante sus props o su state, por ejemplo.

ECMAScript 5 sin JSX

var Componente = React.createClass({

    render: function() {
        return (
            React.createElement("div", null, 
                React.createElement("h1", null, "Hola, mundo!"),
                React.createElement("p", null, "Lorem ipsum dolor sit amet...")
            );
        );
    }

});

Para los más ortodoxos (:P), alternativamente se puede construir el Virtual DOM con funciones. Si se compara, se ve bastante equivalente, pero definitvamente es un poco menos "visual". React.createElement() se encarga de, claramente, crear un elemento. El primer argumento es el nombre (puede ser un tag html u otro componente React), el segundo son sus propiedades o atributos, y del tercero en adelante su contenido.

ECMAScript 6 con JSX

class Componente extends React.Component {

    render() {
        return (
            <div>
                <h1>Hola, mundo!</h1>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
        );
    }

});

En este ejemplo sencillo y puramente ilustrativo, se ve todo bastante similar. Sin embargo, hay que destacar que esta sintaxis utiliza clases propias de JavaScript (disponibles a partir de ECMAScript 6) y no un sistema propio. Hoy por hoy es necesario utilizar un transcompilador para generar código compatible con motores de JavaScript que no reconocen las clases todavía, pero en el futuro esto es big deal, ya que utilizar clases nativas significa utilizar el estándar y además una ejecución más veloz.

ECMAScript 6 sin JSX

class Componente extends React.Component {

    render() {
        return (
            React.createElement("div", null, 
                React.createElement("h1", null, "Hola, mundo!"),
                React.createElement("p", null, "Lorem ipsum dolor sit amet...")
            );
        );
    }

});

Habla por sí mismo :)

¿Ciclo de vida? ¿Props? ¿State?

No son demasiados los conceptos nuevos en React, pero sí son claves. Los componentes tienen:

• Ciclo de vida: Los componentes nacen, crecen, se renderean y mueren :) Es decir, cuando creamos un componente, este lleva a cabo ciertas operaciones internas. Una vez que este componente se renderiza en el DOM, realiza otras operaciones. Cuando el usuario interactúa con el componente, más operaciones. Final y tristemente, cuando el componente es eliminado del DOM, realiza sus últimas operaciones. Todos estos procedimientos pueden ser extendidos con facilidad a través de los Lifecycle methods o métodos del ciclo de vida.
• Props: O propiedades. Haciendo analogía con el HTML tradicional, las propiedades son los atributos de las etiquetas. Son datos de entrada pasados al componente. Son inmutables internamente. Haciendo más analogía, son equivalentes a los argumentos de una función. Entrada necesaria para generar una salida.
• State: O estado. Si quisieramos tener código estático inmutable, escribiríamos HTML simplemente, ¿no?. Los componentes a diferencia del código estático, pueden mantener un estado interno y mutable que influye en el comportamiento y aspecto del componente. Este estado puede ser cambiado en cualquier momento, interna o externamente, y el componente se adaptará instantáneamente a su nuevo estado. El concepto se profundizará más al crear una primer aplicación.

¿Entonces?

Esta fue una introducción teórica a React. La teoría suele ser aburrida pero necesaria. React plantea la composición de aplicaciones de una forma diferente a la que acostumbramos, y vale la pena entender sus conceptos funcionales. El paso siguiente es siempre el más entretenido, construir una aplicación.