React.

JS
Introducción

Módulo 01

Introducción a React.JS
 Conceptos Básicos

Introducción a React.JS
 ¿Qué es y para qué sirve React.JS?
React (también llamada React.js o ReactJS) es una librería
Javascript de código abierto para crear interfaces de usuario
con el objetivo de animar al desarrollo de aplicaciones en una
sola página. Es mantenido por Facebook, Instagram y una
comunidad de desarrolladores independientes y compañías 1.
React intenta ayudar a los desarrolladores a construir
aplicaciones que usan datos que cambian todo el tiempo. Su
objetivo es ser sencillo, declarativo y fácil de combinar.
React sólo maneja la interfaz de usuario en una aplicación;
está construida para poder ser utilizado con el patrón de
diseño modelo–vista–controlador (MVC), y puede ser utilizada
conjuntamente con otras bibliotecas de Javascript o más
grandes #MVC como AngularJS. También puede ser utilizado
con las extensiones de React-based que se encargan de las
partes no-UI (no gráficas) de una aplicación web.

Introducción a React.JS
 Es importante señalar que ReactJS es una librería
enfocada en la visualización. Si estamos iniciando un
proyecto podemos basarnos en la arquitectura Flux,
pero si ya tenemos un proyecto usando un Framework
MVC como AngularJS podemos dejar AngularJS como
Controlador y que ReactJS se encargue de las vistas.

Esto tiene sentido pues ReactJS tiene un performance

ReactJs es una
librería enfocada
en la visualización

Introducción a React.JS
 El secreto de ReactJS para tener un performance muy alto,
es que implementa algo llamado Virtual DOM y en vez de
renderizar todo el DOM en cada cambio, que es lo que
normalmente se hace, este hace los cambios en una copia
en memoria y después usa un algoritmo para comparar
las propiedades de la copia en memoria con las de la
versión del DOM y así aplicar cambios exclusivamente en
las partes que varían. Esto puede sonar como mucho
trabajo, pero en la práctica es mucho más eficiente que el
método tradicional pues si tenemos una lista de dos mil
elementos en la interfaz y ocurren diez cambios, es más
El secreto de ReactJS
eficiente aplicar diez cambios, ubicar los componentes
es impactar en un DOM
que tuvieron un cambio en sus propiedades y renderizar
en memoria (Virtual
estos diez elementos, que aplicar diez cambios y
DOM) y luego hacer los
renderizar dos mil elementos.
cambios en el DOM real,
en vez de impactar en el
DOM real directamente

Introducción a React.JS
 Son más pasos a planear y programar, pero ofrece una
mejor experiencia de usuario y una planeación muy lineal.
Una característica importante de ReactJS es que promueve
el flujo de datos en un solo sentido, en lugar del flujo
bidireccional típico en Frameworks modernos, esto hace
más fácil la planeación y detección de errores en
aplicaciones complejas, en las que el flujo de información
puede llegar a ser muy complejo, dando lugar a errores
difíciles de ubicar que pueden hacernos la vida muy triste.

ReactJs promueve
el flujo de datos en
un solo sentido

Introducción a React.JS
 VirtualDOM
El principal problema es que DOM nunca fue Puede optimizar el guión y utilizar algunos
optimizado para crear una IU dinámica. Podemos trucos, pero al final, es un dolor trabajar
trabajar con él usando JavaScript y bibliotecas con páginas enormes y una interfaz de
como jQuery (gracias a Dios que lo tenemos). usuario dinámica. Para solucionar esto se
Pero jQuery y otros hicieron poco para resolver proponen las siguientes alternativas.
problemas de rendimiento.
Piensa en redes sociales modernas como Twitter,
Facebook o Pinterest. Después de desplazarse un
poco, el usuario tendrá decenas de miles de El DOM nunca fue optimizado
nodos. Interactuar con ellos de manera eficiente para Interfaces de Usuario
es un gran problema. Trate de mover un 1000 dinámicas, como las que
divs 5 píxeles a la izquierda, por ejemplo. Puede requieren las aplicaciones
tomar más de un segundo. Es mucho tiempo para web modernas como
la web moderna. Facebook, Instagram o Netflix

Introducción a React.JS
 VirtualDOM - Ejemplo
Imaginémonos que disponemos de una tabla con datos en
una página HTML. Esta tabla dispone de en cada fila de un
botón de edición. Este botón nos permite cambiar de
forma rápida los datos de la tabla. Por ejemplo podemos
pulsar en la última fila y cambiar el dato9 por dato10.

dato1 dato2 dato3 Edit

dato4 dato5 dato6 Edit

dato7 dato8 dato10 Edit

Introducción a React.JS
 VirtualDOM - Ejemplo
¿Cómo realizamos esta operación?
En la mayor parte de las situaciones los desarrolladores
optan por una solución similar a lo siguiente. La tabla se
crea a partir de un array de objetos, este array de objetos
es actualizado cuando editamos. Finalizada la edición, la
tabla se vuelve a generar.

Introducción a React.JS
 VirtualDOM - Ejemplo
Nos encontramos ante un código que
funciona correctamente pero que tiene
un problema importante. ¿Era necesario
volver a generar la tabla entera? Se trata
de una pregunta interesante ya que solo
hemos cambiado un dato puntual.
La respuesta es NO.
Acabamos de forzar al navegador a
redibujar todo el bloque cuando solo un
mínimo de información cambiaba.

Cambiar los nodos de un árbol DOM tiene un coste , cuantos más nodos cambiemos mayor
será el coste para el navegador. En situaciones sencillas los problemas de rendimiento no se
notan pero cuanto más compleja y grande sea nuestra web estas cosas serán importantes.
En este caso nos encontramos con una tabla de datos que define una parte del árbol DOM

Introducción a React.JS
 VirtualDOM - Ejemplo
Lamentablemente cuando volvemos a dibujar En este caso el framework o librería que
la tabla estamos cambiando todos los nodos corresponda se encarga de tener una copia
del árbol DOM y volviéndola a renderizar por de nuestro árbol DOM simplificado en
completo. ¿Cómo funciona un enfoque de memoria a la cual se denomina VirtualDOM.
virtual DOM?

Introducción a React.JS
 VirtualDOM - Ejemplo
Una vez que dispone de esta versión del árbol el framework se encarga de estar pendiente de
los cambios que se generan sobre él. Siendo capaz de ver las diferencias entre un estado A y
un estado B cuando nosotros actualizamos información. En este caso solo hemos cambiado
un nodo del árbol:

Introducción a React.JS
 JSX
Para hacernos la vida mucho más fácil, ReactJS nos ofrece
un pseudolenguaje llamado JSX que facilita el desarrollo
de aplicaciones web con su sintaxis para crear elementos
en el DOM. Recordemos que ReactJS se enfoca en la
visualización y literalmente debemos armar el HTML que
deseamos directamente en JSX, con el fin de describir
nuestros componentes por medio de etiquetas y de una
sintaxis muy parecida a la de HTML, que es compilada a
Javascript. No podemos usar directamente el JSX, pero
tenemos dos opciones para compilarlo.
1. Usando JSXTransformer que hace la conversión Para facilitar el manejo
directamente en el navegador del programador. del Virtual Dom, ReactJs
2. Para producción se recomienda usar el precompilador ofrece una sintaxis
basado en NodeJS que nos genera JavaScript nativo y alternativa para definir
evita que el JSX tenga que ser compilado por el usuario. elementos llamada JSX

Introducción a React.JS
 JSX
Algo importante de señalar es su curva de aprendizaje, pues al
principio puede parecer bastante complicado, pero gracias a
la sintaxis de JSX y al hecho de que todo se va armando por
módulos compilados de forma secuencial, uno se adapta muy
rápido y lo domina en poco tiempo, pues es relativamente
sencillo, sobre todo si se compara con AngularJS. Además su
estructura es más manejable que Backbone. El truco para
dominar ReactJS es aprender a dividir todo en pequeños
componentes que se agrupan para formar una aplicación.
Personalmente me gusta ir de lo general a lo particular, pero El truco para dominar
es posible (y recomendable en aplicaciones complejas) iniciar ReactJS es aprender a
con una serie de pequeños componentes, e irlos dividir todo en
ensamblando hasta crear una aplicación compleja. pequeños componentes
que se agrupan para
formar una aplicación

Introducción a React.JS
 ¡Muchas gracias!
¡Sigamos trabajando!

Introducción a React.JS