React.js ALL THE THINGS!!

@bjrmatos

bjrmatos

React

Librería para construir y manejar el ciclo de vida de nuestra UI

Renderiza tu interfaz y responde a eventos

El propósito de

es hacer nuestro proceso de desarrollo SIMPLE

¿Como logramos esto?

UI basada en componentes
Desarrollo de interfaces de forma declarativa
UI complejas a través de composición de componentes
Manejo del ciclo de vida totalmente basado en datos
Flujo de datos de una sola dirección

No actualizaciones en cascada, no observables, no two way data binding

Componentes

Con React, lo único que haremos será construir componentes

Nuestra aplicación final sera el resultado de la suma de varios componentes

Representan una parte re-utilizable de UI
Describen nuestra UI en cualquier punto en el tiempo
Pueden contener a otros componentes (fácil composición)
Debido a que son elementos bien encapsulados hacen la reusabilidad y el testing facil

No templates, solo JS

FilterableProductTable.jsx

JSX

Una extension a JS basada en tags

<Tag /> => Code

El markup (representación html) y el código que lo genera inevitablemente dependen mucho entre si, el separarlos solo lo hace más difícil

Componentes > templates + controller/display logic

Tiene mucho sentido que los templates JavaScript se queden en JavaScript

Jade, Mustache, Handlebars.. Problem?

FilterableProductTable.jsx

compila a..

FilterableProductTable.jsx

Pero, ¿por qué?

Porque la

mutación

es la raíz de

todos tus problemas

Cuando escribimos código que actualiza una UI mediante el DOM tenemos:

Código difícil de razonar en el tiempo
Miedo a crear un bug al actualizar
Complejidad de mantenimiento
Posiblemente código no optimizado para actualizar el DOM de la manera correcta

¿No seria genial que existiera una forma de preocuparnos solo de declarar como debe lucir nuestra UI?

¿Y que el proceso de actualización sea automático, fácil de razonar

y solo sea un detalle de implementación?

Virtual DOM

Árbol de objetos que representa al DOM real,
basicamente un espejo

Cada vez que actualicemos nuestra UI, se realizara una comparación de su representación (el anterior VDOM vs el nuevo VDOM)
Con esta comparación se calculara una diferencia, la cual será usada para actualizar nuestra UI de forma automática con las partes que realmente han cambiado
Al actualizar el DOM de la manera "correcta" aseguramos una UI fácil de razonar y con un mayor rendimiento .

El VDOM habilita que no nos preocupemos sobre el "¿como actualizar nuestra UI?", nuestra única preocupación es definir el "como debe lucir"

Declarativo > Imperativo

En cada

Construye un

nuevo VDOM

actualización

Compara con el anterior VDOM

Calcula la mínima cantidad de actualizaciones

Ejecuta todas las actualizaciones de la mejor forma posible

Original

Modificaciones

Nuevo

En cada

Construye un

nuevo VDOM

actualización

Compara con el anterior VDOM

Calcula la mínima cantidad de actualizaciones

Ejecuta todas las actualizaciones de la mejor forma posible

DOM actualizado

FilterableProductTable.jsx

Una UI es interactiva y dinámica

para lograr esto necesitamos que nuestros componentes sean basados en datos

Props y State

Es donde manejamos los datos de nuestros componentes

Props

State

Datos inmutables

(no pueden

ser modificados directamente)

Datos mutables

(pueden

ser modificados directamente)

Datos pasados desde un componente "Padre"

Datos privados/internos para un componente

Unidirectional Data Flow

AKA: Flujo de datos de una sola dirección

Los componentes puede recibir datos inmutables (a través de props) o manejar su propio estado (a través de state)

FilterableProductTable.jsx

"products" es pasado desde el punto de entrada de la aplicación al componente FilterableProductsTable

index.js

Aqui es cuando los datos del arreglo "PRODUCTS" son pasados con un prop al componente FilterableProductTable

Renderizamos nuestro componente principal en un elemento DOM

FilterableProductTable.jsx

Accedemos a los datos pasados a nuestro componente con "this.props.products"

Usamos los datos de "this.props.products" para pasar datos al componente ProducTable

ProductTable.jsx

Pasamos los datos necesarios para cada componente a traves de props

Data pasada desde componente FilterableProductTable

ProductCategoryRow.jsx

Los componentes son responsables de tomar datos pasados por props y renderizar lo que sea necesario

ProductRow.jsx

Validando Props

Útil para generar un manifiesto de tu componente.

Lanzar errores durante el desarrollo cuando se pase un prop invalido

ProductCategoryRow.jsx

nombre de propiedad

tipo de propiedad

especifica si la propiedad es requerida

Variedad de tipos y opciones

..manejando state en nuestros componentes

FilterableProductTable.jsx

inicializamos el state del componente

Pasamos el state de nuestro componente a otros componentes a traves de props

Esta funcion sera llamada desde el componente SearchBar cuando el usuario de click en el checkbox

Actualizaremos nuestro state en base a lo que el usuario seleccione

Causando que nuestro componente e hijos se vuelvan a renderizar en base al nuevo state
(el virtual DOM se volverá a renderizar en cada llamada a setState)

SearchBar.jsx

El checkbox estara activo o no en base al prop "inStockOnly"

Establecemos un escuchador de eventos "handleChange" cada vez que el checkbox cambie

Llamamos a la función pasada por FilterableProductTable con el nuevo valor del check

ProductTable.jsx

Filtra en base al stock del producto

Ciclo de vida de Componentes

"Hooks" o "Callbacks" que hacen posible interacturar con el VDOM y manipular el DOM real

Mounting (primer renderizado)

Unmounting (el componente será destruido)

componentWillMount()

componentDidMount()

componentWillUnmount()

Updating (el componente será actualizado)

componentWillReceiveProps(nextProps)

componentWillUpdate(nextProps, nextState)

componentDidUpdate(prevProps, prevState)

shouldComponentUpdate(nextProps, nextState)

Controlar cuando un componente debe actualizarse o no -> shouldComponentUpdate (haciendo posible una mayor optimizacion en nuestra app)
Manejar el estado de un componente (calcular nuevo state basado en props)
Integración con scripts/ librerías de terceros