Desarrollo de Aplicaciones Web Con React y Redux

UNIVERSIDAD MAYOR DE SAN SIMON
FACULTAD DE CIENCIAS Y TECNOLOGÍA

DIRECCIÓN DE POSGRADO
“DESARROLLO DE APLICACIONES
WEB CON REACT Y REDUX”
TRABAJO FINAL PRESENTADO PARA OBTENER EL CERTIFICADO

DE DIPLOMADO EXPERTO EN DESARROLLO DE APLICACIONES
EMPRESARIALES VERSIÓN II
.
POSTULANTE: IVAN ZAPATA TORRICO

TUTOR : ING. EDSON ARIEL TERCEROS TORRICO
Cochabamba – Bolivia
2019
Agradecer a Dios por darme vida y salud para
la realización de mis propósitos.
A mis padres por su apoyo incondicional

durante mi carrera.
A mi familia por su confianza y aliento en todo

momento.
A mis amigos y compañeros de carrera por el

apoyo en momentos complicados y a todas las
personas que fueron parte de este proceso.
1
TABLA DE CONTENIDOS
RESUMEN .................................................................................................................................. 5
INTRODUCCIÓN ........................................................................................................................ 6
1 GENERALIDADES .............................................................................................................. 7
1.1 Antecedentes Generales .............................................................................................. 7
1.2 Antecedentes Específicos............................................................................................. 7
2 METODOLOGÍA .................................................................................................................. 8
3 REACT ................................................................................................................................ 9
3.1 Aplicaciones de Página Única ...................................................................................... 9
3.2 Java Script .................................................................................................................... 9
3.3 Conociendo React ........................................................................................................ 9
3.4 React Puro ................................................................................................................. 10
3.5 Fundamentos de JSX ................................................................................................. 10
3.5.1 React con JSX ..................................................................................................... 10
3.5.2 Introducción a Webpack ...................................................................................... 11
3.6 Abstracción del DOM Virtual ....................................................................................... 11
3.6.1 Manipulación del DOM ........................................................................................ 11
3.6.2 Componentes con DOM Virtual ........................................................................... 12
3.7 Detrás de React .......................................................................................................... 13
3.8 Programación Reactiva .............................................................................................. 14
3.8.1 Manifiesto ............................................................................................................ 14
3.8.2 Características de las Aplicaciones Reactivas ..................................................... 15
4 ARQUITECTURA BASADA EN COMPONENTES ............................................................. 16
4.1 Props, Estado, y el Árbol de Componentes ................................................................ 16
4.1.1 Props ................................................................................................................... 16
4.1.2 Estados ............................................................................................................... 16
4.2 Componentes y Flujo de Datos ................................................................................... 16
4.2.1 La Solución Detrás de las Fallas ............................................................................... 17
4.3 Routing ....................................................................................................................... 18
5 REDUX .............................................................................................................................. 19
5.1 Introducción a Flux como una arquitectura para React ............................................... 19
5.2 Manejador de estados ................................................................................................ 19
5.3 Manipulación de Estados con Redux .......................................................................... 20
5.3.1 Actions................................................................................................................. 20
5.3.2 Store .................................................................................................................... 21
5.3.3 Reducer ............................................................................................................... 21
5.4 React - Redux............................................................................................................. 21
2
6 DESARROLLO DE UNA APLICACIÓN CON REACT Y REDUX ....................................... 22
6.1 Instalación y Primeros Pasos ...................................................................................... 22
6.2 Construcción de componentes.................................................................................... 24
6.3 Eventos ...................................................................................................................... 32
6.3.1 Componentes Presentational y Container ............................................................ 35
6.3.2 Componentes Funcionales .................................................................................. 36
6.4 React Router .............................................................................................................. 37
6.5 Redux ......................................................................................................................... 37
6.5.1 Instalación de Redux ................................................................................................ 37
6.5.2 Definición de Estado, Reductor y Acciones ............................................................... 37
7 CONCLUSIONES .............................................................................................................. 41
8 RECOMENDACIONES ...................................................................................................... 41
9 BIBLIOGRAFÍA .................................................................................................................. 42
3
TABLA DE CUADROS, GRAFICOS Y FIGURAS
Figura 1 JSX se transpila en JavaScript ................................................................................................10

Figura 2 Operaciones DOM Virtual y Algoritmo diff .............................................................................12
Figura 3 Componentes con DOM Virtual ...............................................................................................13
Figura 4 Características de las aplicaciones reactivas........................................................................14
Figura 5 Flujo de datos y eventos ...........................................................................................................17
Figura 6 Flujo de trabajo de Flux ............................................................................................................19
Figura 7 Estructura básica de una aplicación con React ....................................................................23
Figura 8 Estructura de componentes .....................................................................................................24
Figura 9 Mostrar imágenes usando props y un elemento Card .........................................................32
Figura 10 Vista del componente detalle.................................................................................................34
Figura 11 Estructura de archivos Redux ...............................................................................................40
Código Fuente 1 Contenedor para Catálogo ........................................................................................25

Código Fuente 2 Creacion de un estado inicial vacío .........................................................................25
Código Fuente 3 Creación de componente con función map ............................................................26
Código Fuente 4 Definiion de estilos para un componente ................................................................27
Código Fuente 5 Constructor de la clase App ......................................................................................30
Código Fuente 6 Mostrando una imagen en un elemento Card ........................................................31
Código Fuente 7 Retornando un componente catálogo......................................................................31
Código Fuente 8 Evento click ..................................................................................................................32
Código Fuente 9 Renderizar Catálogo de Items ..................................................................................33
Código Fuente 10 Mostrando un item seleccionado............................................................................33
Código Fuente 11 Dibujando varios Cards ...........................................................................................35
Código Fuente 13 Clase App simplificado.............................................................................................36
Código Fuente 14 Catálogo como componente funcional ..................................................................37
Código Fuente 15 Definición de la función Reducer ...........................................................................38
Código Fuente 16 Inicialización del estado ...........................................................................................38
Código Fuente 17 Configuración de Store ............................................................................................38
Código Fuente 18 Disponibilidad de la tienda en la Aplicación .........................................................39
Código Fuente 19 Función flecha ...........................................................................................................39
4
RESUMEN
Desarrollar aplicaciones con librerías basadas en JavaScript puede facilitar enormemente el

trabajo, tal es el caso de React y su gran potencial que se centra sólo en la parte de generación
de vistas para construir aplicaciones interactivas, gracias al aporte de nuevos conceptos como la
integración de JavaScript extendido y la manipulación de componentes a través de un concepto
innovador denominado DOM virtual para optimizar la actualización de la vista por medio del flujo
de datos a través del DOM en un navegador web.
React hace uso del paradigma denominado programación orientada a componentes. Dichos
componentes se representan como clases, cuyo único requerimiento especial es especificar el
método para pintar un contenido en la vista.
Estos métodos van acompañados de propiedades o props como atributos de configuración para
dichos componentes. Éstas son recibidas desde un nivel superior, normalmente al realizar la
instanciación del componente y por definición son inmutables.
La definición de estos componentes se realiza usando una sintaxis especial llamada JSX que
permite escribir etiquetas HTML dentro de JavaScript para mejorar la expresividad del código.
Usar JSX no es obligatorio, pero si es muy recomendable.
Esto hace que podamos elegir entre distintas implementaciones para el resto de componentes
de la aplicación, y en este caso concreto del manejo de rutas a través de una aplicación, la
solución propuesta por React Router y sus rutas anidadas es muy interesante.
Como si fuera poco, existe Redux como una librería independiente que trabaja perfectamente
con React y que facilita la manipulación de estados de manera que estos estados se concentren
en un solo lugar o tienda.
Finalmente se hará una demostración con un caso de estudio práctico, donde se trabaja todos
los conceptos vistos durante el desarrollo de esta Monografía, una aplicación que pretende ser
una pequeña muestra de la combinación de estas dos librerías.
5
INTRODUCCIÓN
En los últimos años, la creciente demanda de aplicaciones hizo posible la evolución de los
mecanismos de desarrollo de software, cambiando progresivamente a medida que se
incrementan las funcionalidades cada vez más complejas que el mercado demanda.
Las aplicaciones modernas son el resultado de los continuos esfuerzos de las comunidades de
programación, que ayudan a definir nuevas tecnologías web a partir de JavaScript, HTML5 y
CSS3.
Tal es el caso de los Frameworks y librerias basadas en el lenguaje de programación de la web,

JavaScript, que ha evolucionado para permitir manipular la estructura y arquitectura de las
aplicaciones que facilitan el manejo de las interfaces.
El auge de las aplicaciones basadas en HTML5 y JavaScript ha sido vertiginoso en los últimos
años. Hay que agregar que el lenguaje JavaScript para la web, no ofrece un conjunto de librerías
estándar que siga una forma canónica de hacer las cosas, así mismo, este ritmo acelerado ha
venido acompañado de la aparición de muchas librerías y Frameworks para desarrollar este tipo
de aplicaciones.
También se ha hecho popular manejar aplicaciones web de una sola página para brindar una
experiencia más fluida al usuario, pareciéndose a una aplicación de escritorio en la que se
interactúa con varias opciones a la vez, y por lo tanto una fuerte carga de interactividad en el lado
del cliente, gracias al uso de JavaScript.
Debido al alto tráfico y a la creciente ola de usuarios interactuando, pintar los datos de la vista es
un problema muy frecuente y complejo de resolver. Una aplicación muy grande, tiene que
actualizar su vista y sus datos a un ritmo muy veloz, y modificar el DOM es la tarea más pesada
para el navegador. Pintar elementos en la vista requiere varios procesos por detrás, pues mostrar
algo en la pantalla es solo el último de ellos.
El presente proyecto pretende demostrar la fluidez con la que se puede interactuar con
aplicaciones de una sola página, combinando las características de React y Redux para resolver
el problema de flujo de datos en la vista y facilitar la creación de aplicaciones web de una forma
fácil y elegante a través de la implementación de un caso de estudio.
6
1 GENERALIDADES
1.1 Antecedentes Generales
A medida que va pasando el tiempo van apareciendo librerías que nos ofrecen soluciones a
problemas que alguna vez fueron difíciles de resolver, tal vez no tan difíciles pero que, si requerían
de muchas líneas de código, existen también librerías que optimizan otros aspectos como la
fluidez de la presentación del contenido al usuario final, esta es sin duda, una de las
características más llamativas de React.
React es una librería de Javascript para crear interfaces de usuario o FrontEnd de aplicaciones
web. Al integrar React con HTML y CSS, la carga de las páginas es más rápida porque React
usa componentes que se pueden escribir una sola vez y luego reutilizarlos cuando sea necesario,
como mostrar un elemento en el DOM como un botón, una imagen, videos, textos u otros
elementos.
Como puede ser utilizado para el Frontend, se puede integrar con cualquier entorno del lado del
servidor Backend como Node o cualquier Framework basado en JavaScript como Angular.
La velocidad y gran performance con la que cuenta esta librería es que trabaja con un Virtual
DOM (Document Object Model), el DOM es el entorno en donde se imprimen los elementos HTML
para que los usuarios puedan verlo en el navegador, normalmente se cargan estos elementos
directamente en el DOM del navegador sin nada virtual, React JS utiliza su propio DOM Virtual.
Luego que publicamos un proyecto con React y editamos solo algunos elementos de la vista,
React solo actualiza esos elementos y lo demás se mantiene como estaba, esto es muy bueno,
ya que no tiene que actualizar todo el proyecto, es una gran ventaja en rendimiento, por ejemplo,
si tenemos una lista de 100 nombres y solo necesitamos actualizar 15, React actualiza solo los
15 y los demás no los toca para nada, evitando recargar de trabajo al servidor.
1.2 Antecedentes Específicos
Actualmente es una época con muchas librerías y herramientas nuevas para el desarrollo de
software. Con la gran cantidad de herramientas y librerias que existen, probablemente no sea lo
más conveniente entre usar una u otra sin entender realmente los beneficios o por qué debemos
usarla.
Cuando trabajamos con una aplicación web vemos datos en pantalla, esos datos tienen que
guardarse y compartirse entre los diferentes módulos de la aplicación, entendiendo que todo esto
se puede hacer manualmente, pero que puede ser muy complicado manejar.
Todas las aplicaciones tienen un estado que manejar, este estado es la representación de la
información y las modificaciones hechas a la misma, mientras la aplicación se ejecuta. En general,
manejar un estado, está directamente relacionado con aplicaciones interactivas, donde es la
interacción del usuario que modifica el estado de una aplicación.
Lo interesante del manejo del estado de una aplicación, es que generalmente, la modificación de
una parte del estado, conlleva otras modificaciones en otros componentes.
Lo que cambia, mientras el usuario usa o interactúa con la aplicación, es el estado de la

aplicación, que inicia de una forma, pero conforme la interacción sucede, va cambiando.
7
Lo importante es que todas las aplicaciones manejan un estado, lo que cambia con Redux es
cómo se maneja.
Redux es un manejador de estado, que guarda la información en una estructura JSON, y que
permite compartirla a través de toda la aplicación, a esta información y sus cambios se los
identifica como el estado de la aplicación, por lo que, en un resumen aún más conciso, Redux es
un manejador del estado de aplicaciones.
2 METODOLOGÍA
Para el presente trabajo se utilizarán los siguientes métodos de investigación:
• Método Bibliográfico, debido a que se realizará la lectura y compilación de libros y

documentación oficial relacionados al tema de estudio.
• Método Analítico, debido a que se procederá a revisar y analizar ordenadamente documentos

relacionados al tema de estudio para la redacción del presente documento.
• Método Empírico o de Campo, debido a que se utilizaran ejemplos de aplicación o

experiencias observadas en el caso de estudio: Aplicación Web de Seguridad Industrial y
Salud Ocupacional del módulo 3 del Diplomado.
8
3 REACT
React está escrito con JavaScript, el lenguaje de programación de la web, tanto para la lógica de
negocio como para la manipulación de la vista, ya que incorpora un DOM Virtual en memoria
como mecanismo para diferenciar un estado anterior con un nuevo estado, repintando la vista de
una forma más eficiente que, combinado con JavaScript extendido, facilita la implementación con
una sintaxis más concisa.
3.1 Aplicaciones de Página Única
Una aplicación de una sola página es una aplicación web o un sitio web que carga todos los
recursos necesarios para navegar por el sitio en la primera carga de la página. A medida que el
usuario hace clic en los enlaces e interactúa con la página, el contenido posterior se carga de
forma dinámica. Con frecuencia, la aplicación actualiza la URL en la barra de dirección para
emular la navegación de página tradicional, pero no se vuelve a hacer otra solicitud de página
completa. (Developers, s.f.).
3.2 Java Script
JavaScript ha pasado por muchos cambios. Desde su lanzamiento, hizo mucho más sencillo
agregar elementos interactivos a las páginas web. Luego se volvió más robusto con DHTML y
AJAX. Ahora, con Node.js, JavaScript se ha convertido en un lenguaje que se utiliza para crear
aplicaciones completas. Existe un comité que se encarga de guiar los cambios en JavaScript, la
Asociación Europea de Fabricantes de Computadoras (ECMA).
Los cambios en el lenguaje son impulsados por la comunidad. Se originan a partir de propuestas
que escriben los miembros de la comunidad.
La responsabilidad del comité de ECMA es gestionar y priorizar estas propuestas para decidir
qué se incluye en cada especificación. Estas especificaciones son más conocidas como ECMA
Script y actualmente se encuentra en su versión 6.
3.3 Conociendo React
React es un motor para crear interfaces de usuario compuestas utilizando JavaScript y

(opcionalmente) XML. (Cássio de Sousa, 2015, pág. 2).
React es una librería Open Source desarrollada por un equipo de Facebook para la creación de
interfaces de usuario de aplicaciones de una sola página o SPA (Single Page Aplication).
React nace debido a un problema de rendimiento que sufrió la aplicación de la popular red social
Facebook, que venía trabajando con un sistema típico de enlaces entre vistas y datos llamado
binding, pero debido a la gran cantidad de conexiones entre ambas capas, el rendimiento de la
aplicación se vio afectado. Esto provocó que un equipo de Facebook se dedicara a optimizar la
forma en que se renderizan las vistas según los cambios en los datos de la aplicación, entonces
no solo se resolvieron los problemas, sino que nació una nueva tecnología llamada React.
9
3.4 React Puro
Según (Porcello, 2017, pág. 59), para poder trabajar con React en el navegador, se necesita de
dos librerías: React y ReactDOM. React como librería para crear vistas y ReactDOM como librería
para representar la interfaz de usuario en el navegador.
React y ReactDOM se dividieron en dos paquetes para la versión 0.14. Las notas de la versión
dicen: "La belleza y la esencia de React no tienen nada que ver con los navegadores o el DOM.
Esta división en dos se justifica en la idea de escribir componentes que se pueden compartir entre
la versión web de React y React Nativo.”1 En lugar de suponer que React se renderizará solo en
el navegador, las futuras versiones apuntan a admitir la renderización para diversas plataformas.
3.5 Fundamentos de JSX
JSX es una extensión de sintaxis de JavaScript, que permite mezclar JavaScript y HTML (XML)
para definir estructuras de nodos con propiedades y atributos, de ahí su nombre JavaScript XML
o JSX.
Esta extensión facilita la escritura de código, pues permite escribir un código más limpio, sin
tantas repeticiones.
Figura 1 JSX se transpila en JavaScript
Fuente: (Mardan, 2017)
3.5.1 React con JSX
El equipo de Facebook React lanzó JSX cuando lanzó React para proporcionar una sintaxis
concisa para crear árboles DOM complejos con atributos. También esperaban que React fuera
más legible, como HTML y XML.
En JSX, el tipo de un elemento se especifica con una etiqueta. Los atributos de la etiqueta
representan las propiedades. Los elementos secundarios del elemento se pueden agregar entre
las etiquetas de apertura y cierre.
También se puede agregar otros elementos JSX como hijos. Si se tiene una lista desordenada,
se puede agregar elementos de elementos de la lista secundaria con etiquetas JSX. Al final el
resultado es muy similar a HTML.
1
Ben Alpert, “React v0.14”, React blog, October 7, 2015.
10
3.5.2 Introducción a Webpack
Según (Porcello, 2017) Webpack es un paquete de módulo. Un agrupador de módulos que toma
todos los archivos diferentes (JavaScript, CSS, JSX, HTML) y los convierte en un solo archivo.
Los dos beneficios principales de la agrupación modular son el de la modularidad y el rendimiento

de la red.
La modularidad permite desglosar el código fuente en partes o módulos con los que sea más fácil
trabajar, especialmente en un entorno de equipo.
El rendimiento de la red se obtiene con la necesidad de cargar una dependencia en el navegador,

el paquete. Cada etiqueta de script realiza una solicitud HTTP y hay una penalización de latencia
para cada solicitud HTTP. Agrupar todas las dependencias en un solo archivo permite cargar todo
con una solicitud HTTP, evitando así el estado latente.
3.6 Abstracción del DOM Virtual
En todas las aplicaciones web, una de las operaciones más pesadas de las que sufre una
aplicación es actualizar el DOM. Para resolver este problema, React mantiene una representación
virtual del DOM, que se llama DOM Virtual. Junto con un algoritmo de diferenciación, React puede
calcular la diferencia con el DOM real y solo actualizar la parte del DOM que se modificó. La
cantidad de cambio es, por lo tanto, menor, lo que conduce a una aplicación muy rápida. Es
posible que no se note esta diferencia en la velocidad, pero a medida que el proyecto se hace
más grande, se hace más evidente esta diferencia, lo que suele suceder en las aplicaciones del
mundo real, con React se ve los beneficios de una experiencia ágil para los usuarios.
El procedimiento de actualización de React se da cuando ocurre un cambio, React determina las

diferencias entre el DOM real y en memoria. Luego realiza una actualización eficiente del DOM
del navegador. Este proceso a menudo se denomina proceso diff, se actualiza solo lo que cambió.
3.6.1 Manipulación del DOM
La manipulación manual de DOM es complicada y es muy difícil mantener un registro del estado
anterior del DOM. Como se muestra en la Figura 2, React resuelve este problema haciendo una
copia del DOM real, llamado DOM virtual. A continuación, se aplica un algoritmo de diferenciación
en ambos DOM, que esencialmente comprueba los cambios que se produjeron y devuelve una
secuencia de operaciones DOM. Estas operaciones de DOM se aplican al DOM del navegador
real.
11
Figura 2 Operaciones DOM Virtual y Algoritmo diff
Fuente: (Akshat & Abhishek, 2016)
3.6.2 Componentes con DOM Virtual
El presente apartado describe cómo funciona un DOM virtual en términos de componentes.
En React, cada componente tiene un estado; este estado es probablemente observable. Siempre
que hay un cambio en el estado, React esencialmente sabe que este cambio requiere de una
réplica. Entonces, cuando el estado de la aplicación cambia, genera un nuevo VTree; una vez
más, el algoritmo diff comparte las rutas DOM para los cambios requeridos, como se muestra en
la Figura 3. Esto se traduce en mantener la manipulación manual del DOM al mínimo.
12
Figura 3 Componentes con DOM Virtual
Fuente: (Akshat & Abhishek, 2016)
3.7 Detrás de React
React nace porque sus creadores se enfrentaron con un problema importante: cómo crear
grandes aplicaciones donde los datos cambian con frecuencia. Este problema se produce en casi
cualquier aplicación del mundo real y React lo resolvió. Muchos Frameworks populares son MVC
o MV *, pero aquí hay un punto que debe tenerse en cuenta: React no es un Framework MV *.
Es una librería para crear interfaces de usuario compuestas para componentes de IU cuyos datos
cambian con el tiempo.
A diferencia de los Frameworks JavaScript populares, React no usa plantillas o directivas HTML.
React crea interfaces de usuario dividiendo la interfaz de usuario en muchos componentes. Eso
es todo, nada más. Esto significa que React utiliza las funciones completas de los lenguajes de
programación para crear y representar vistas.
Las siguientes son algunas de las ventajas para elegir React:
• React utiliza ampliamente JavaScript: tradicionalmente, las vistas en HTML están

separadas de la funcionalidad en JavaScript. Con React, se crean componentes y hay
una sección monolítica donde JavaScript tiene un conocimiento íntimo de su HTML.
• Extensible y mantenible: los componentes están formados por un marcado con su lógica
de vista, que en realidad hace que la interfaz de usuario sea fácil de extender y mantener.
• DOM virtual: las aplicaciones React son increíblemente rápidas. El crédito para esto va al
DOM virtual y su algoritmo de diferenciación.
• Flujo de datos unidireccional: el enlace de datos bidireccional es una gran idea, pero en
las aplicaciones del mundo real produce más inconvenientes que beneficios. Uno de los
inconvenientes comunes con el enlace de datos de dos vías es que no tiene idea de cómo
se actualizan sus datos. Con el flujo de datos de una sola vía, las cosas son simples, se
sabe exactamente dónde están cambiando los datos, lo que facilita el mantenimiento y las
pruebas en la aplicación.
13
3.8 Programación Reactiva
La programación reactiva es otro paradigma de programación. Se basa en la capacidad de

expresar fácilmente flujos de datos y la propagación automática de cambios. (Sikora, 2017, pág.
20).
La programación reactiva como una forma de programar basado en flujos de datos que son los
encargados de transmitir los cambios a nuestra aplicación.
Se están descubriendo diferentes formas de construir software porque los sistemas deben ser
más robustos, más flexibles y deben estar mejor posicionados para cumplir demandas modernas,
ya que las aplicaciones se despliegan en toda clase de dispositivos y corriendo en múltiples
procesadores multicore.
Esto hace que los usuarios esperen tiempos de repuesta en milisegundos y que estos sistemas
estén siempre operativos.
Los sistemas reactivos son más flexibles para los cambios, con bajo acoplamiento y escalables,
facilitando así, el desarrollo de aplicaciones interactivas.
3.8.1 Manifiesto
Según (Jonas Bonér, 2014) del Manifiesto de Sistemas Reactivos, la programación reactiva es
un paradigma enfocado en el trabajo con flujos de datos finitos o infinitos de manera asíncrona.
Este documento establece las bases de los sistemas reactivos, los cuales son:
• Responsivos: aseguran la calidad del servicio cumpliendo unos tiempos de respuesta

establecidos.
• Resilientes: se mantienen responsivos incluso cuando se enfrentan a situaciones de error.
• Elásticos: se mantienen responsivos incluso ante aumentos en la carga de trabajo.
• Orientados a mensajes: minimizan el acoplamiento entre componentes al establecer

interacciones basadas en el intercambio de mensajes de manera asíncrona.
Figura 4 Características de las aplicaciones reactivas
Fuente: (Jonas Bonér, 2014)

14
Este paradigma nace de la necesidad de responder a las limitaciones de escalado presentes en
los modelos de desarrollo que existían en su momento, que se caracterizan por su
desaprovechamiento del uso de la CPU, el sobreuso de memoria y la ineficiencia de las
interacciones bloqueantes.
3.8.2 Características de las Aplicaciones Reactivas
Estas características son importantes en las aplicaciones y arquitecturas reactivas, debe existir
un perfecto balance entre estas cuatro categorías para que la aplicación reactiva funcione
adecuadamente y le entregue al usuario sus peticiones.
Reacción a eventos
Es la capacidad que tienen los componentes internos de una aplicación para comunicarse entre
sí, realizando invocaciones asíncronas de avisos de terminación de tareas o realizar una tarea
basado en la suscripción a un tipo especial de notificación o evento de otro componente.
Reacción a la carga
Las aplicaciones reactivas reaccionan e implementan acciones dependiendo de la carga de

procesamiento que tenga y así evitan episodios de contención en acceso a recursos o módulos
compartidos, en otras palabras, escalan adecuadamente al incremento de usuarios,
transacciones y procesos.
Reacción a la falla
Las aplicaciones reactivas implementan tolerancia a fallos y se recuperan de una falla en todos
sus niveles de aplicación, es decir, debe ser un sistema altamente resiliente.
Reacción a los usuarios
Se garantiza un tiempo de respuesta adecuado a los usuarios, independientemente de la carga

y se entrega a tiempo sus solicitudes.
15
4 ARQUITECTURA BASADA EN COMPONENTES
React sigue una arquitectura basada en componentes, el cual, utiliza un mecanismo como
propiedades para pasar información de un componente padre a componentes hijos y actualizar
el estado, este estado no es más que la información del propio componente que puede cambiar
durante el ciclo de vida del componente. Esta información fluye de forma unidireccional a través
de los componentes que se sincronizan con rutas de navegación en el ámbito de la aplicación.
4.1 Props, Estado, y el Árbol de Componentes
Según (Porcello, 2017) React se centra en la construcción de interfaces de usuario, cuando

pensamos en componentes, para administrar mejor los datos y reducir el tiempo dedicado a la
depuración de aplicaciones.
El manejo de datos dentro de los árboles de componentes es una de las ventajas clave de trabajar
con React. Existen técnicas que se pueden utilizar al trabajar con datos en los componentes
React que facilitan la vida a largo plazo. Así, las aplicaciones son más predecibles y fáciles de
escalar si podemos administrar datos desde una única ubicación y construir la interfaz de usuario
basada en esos datos.
4.1.1 Props
Los props o propiedades es el mecanismo que usa React para pasar parámetros de un
componente padre a los hijos. Que un componente pase datos a los componentes hijos, sin
embargo, no es lo único que puede pasar, sino que existe ocasiones en las que los padres
mandan funciones a los hijos, para que estos ejecuten operaciones de los padres.
Estos props se envían a los componentes al momento de crearlos, y es tan fácil como mandar
las propiedades como un atributo de la etiqueta del componente. Además, los props son el factor
clave para hacer que los componentes sean reutilizables y compostables.
Los props son inmutables, es decir, que no cambian.
En JSX, los props se proporcionan como atributos de etiqueta como en HTML.
4.1.2 Estados
Según (Tielens Thomas, 2018) el estado es toda la información a la que un programa tiene acceso
en un instante dado en el tiempo.
La definición de estado es así de simple. El estado de un componente es aquella característica

propia del componente, es decir, que dependen únicamente del propio componente.
Por ejemplo, si se tiene un componente que hace peticiones a un servidor, entonces puede estar
en dos estados posibles, cargando o finalizado.
4.2 Componentes y Flujo de Datos
Para describir los componentes y el flujo de datos de React, hay que recordar sus tres
16
características principales: Virtual DOM, flujo de eventos y enlace de datos unidireccional de los
componentes.
Un componente recibe algunos datos y devuelve la interfaz de datos que se va a representar.

Así, los componentes permiten dividir la interfaz de usuario en partes reutilizables independientes,
pensando en ella de forma aislada e independiente.
Esta representación en componentes, permite que las aplicaciones crezcan y sean escalables,
pudiendo ser reutilizables en diferentes partes de la aplicación.
Como primer paso se dividide la aplicación en componentes, por ejemplo, se tiene una lista de
compras definido de una manera, podemos por ejemplo mantener el nombre en el exterior en un
H1 o en otro elemento HTML, y dividir el resto de la aplicación en componentes.
Conceptualmente, los componentes son como funciones de JavaScript. Aceptan entradas

arbitrarias, llamadas "props" y devuelven elementos React que describen lo que debería aparecer
en la pantalla.
Estos componentes se construyen a partir de una librería que se llama React-DOM, que tiene un
método render, que recibe el componente para procesar y pasa los parámetros props que
necesita.
4.2.1 La Solución Detrás de las Fallas
Los Frameworks basados en JavaScript utilizan un enlace de datos de doble vía, cuando el
modelo cambia, la vista se actualiza y cuando la vista cambia, el modelo se actualiza pero cuando
se tiene una aplicación muy grande, se tiene muchas vistas y muchos modelos, están unidos
todos, así que en Facebook tuvieron un error recurrente en el panel de notificaciones, porque
muchas partes de la aplicación lo modifican, por esta razón desarrollaron React, el cual propone
este flujo de datos unidireccional.
Figura 5 Flujo de datos y eventos
Fuente: Elaboración propia
17
La Figura 5, muestra un enlace de datos de una sola vía. Los eventos fluyen hacia arriba
y los datos fluyen hacia abajo, es exactamente como lo hace DOM.
4.3 Routing
Según (Cássio de Sousa, 2015) React Router es la solución más popular para agregar
enrutamiento en aplicaciones React. Mantiene la IU sincronizada con la URL al tener
componentes asociados con las rutas (en cualquier nivel de anidamiento). Cuando el usuario
cambia la URL, los componentes se desmontan y montan automáticamente. Otra ventaja de la
librería React Router es que proporciona mecanismos para que pueda controlar el flujo de una
aplicación sin diferentes puntos de entrada, dependiendo de si el usuario ingresó a un estado
mediante programación o al ingresar a una nueva URL: el código que se ejecuta en cualquier
caso es el mismo.
Dado que React Router es una librería externa, debe instalarse con npm.
React Router proporciona tres componentes para comenzar:
• Enrutador y ruta: se utiliza para asignar de manera declarativa las rutas a la jerarquía de
la vista de la aplicación.
• Enlace: se utiliza para crear una etiqueta de anclaje totalmente accesible con el href
adecuado. Por supuesto, esta no es la única forma de navegar por el proyecto, pero
generalmente es la forma principal con la que el usuario final interactuará.
18
5 REDUX
Redux es un patrón de arquitectura de datos y manejador de estados predecible. Está pensado

para disminuir el número de relaciones entre componentes de la aplicación ya que contiene los
estados de toda la aplicación en una sola tienda central. Estos estados son modificados a través
de funciones reductoras que, combinadas con el estado inicial, producen un nuevo estado para
actualizar la vista, manteniendo así, un flujo de datos sencillo.
5.1 Introducción a Flux como una arquitectura para React
Flux es una guía arquitectónica para la construcción de aplicaciones web. (Cássio de Sousa,
2015).
Figura 6 Flujo de trabajo de Flux
Fuente: (Cássio de Sousa, 2015)
Flux es una arquitectura para el manejo y el flujo de los datos en una aplicación web que encaja
perfectamente con React. Permite definir claramente los componentes de visualización lo que
ayuda a delimitar adecuadamente sus responsabilidades.
5.2 Manejador de estados
Las aplicaciones tienen un estado, este estado es la representación de la información y las

modificaciones hechas a la misma, mientras la aplicación se ejecuta. En general, el tema de
manejar un estado para una aplicación, está estrechamente relacionado con aplicaciones
19
interactivas, donde precisamente la interacción del usuario modifica el estado de la aplicación.
Lo interesante del manejo del estado, es que generalmente, la modificación de una parte del
estado, desencadena otras modificaciones.
Todo esto que cambia, mientras el usuario usa o interactúa con la aplicación, es el estado de la
aplicación, que inicia de una forma, pero conforme la interacción sucede va cambiando.
Todas las aplicaciones manejan un estado, lo que cambia con Redux es cómo se maneja.
5.3 Manipulación de Estados con Redux
Redux es un contenedor predecible del estado de aplicaciones JavaScript. (Redux.js, s.f.)
Si bien se usa con frecuencia con React, es compatible con Frameworks y librerias basadas en
JavaScript como Angular e incluso simplemente JavaScript puro. El concepto principal detrás de
Redux es que el estado completo de una aplicación se almacena en una ubicación central.
Cada componente de una aplicación puede tener acceso directo al estado de la aplicación sin
tener que enviar props a componentes secundarios o usar funciones de devolución de llamada
para enviar datos a un padre.
Redux se basa en Flux y fue diseñado para enfrentar el desafío de comprender cómo fluyen los
cambios de datos en una aplicación web. Redux fue desarrollado por Dan Abramov y Andrew
Clark.
Redux tiene acciones, creadores de acciones, una tienda y objetos de acción que se utilizan para
cambiar el estado. Redux simplifica un poco los conceptos de Flux al eliminar el despachador y
al representar el estado de la aplicación con un solo objeto inmutable. Redux también introduce
reductores, que no son parte de Flux. Los reductores son funciones puras que devuelven un
nuevo estado basado en el estado actual y una acción: (estado, acción) => newState.
La forma en que funciona Redux es simple. Hay una tienda central que contiene todo el estado
de la aplicación. Cada componente puede acceder al estado almacenado sin tener que enviar
props de un componente a otro.
Redux está compuesto de tres partes: actions, store y reducer.
5.3.1 Actions
En pocas palabras, las acciones son eventos. Son la única forma de enviar datos desde la
aplicación a la Store de Redux. Los datos pueden ser de interacciones del usuario, llamadas a la
API o incluso envío de formularios.
Las acciones se envían utilizando el método store.dispatch(). Las acciones son objetos de
JavaScript simples y deben tener una propiedad de tipo para indicar el tipo de acción a realizar.
También deben tener una carga útil que contenga la información con la que la acción debe
trabajar. Las acciones se crean a través de un creador de acción.
Las acciones son la única forma de actualizar el estado de una aplicación Redux.
20
5.3.2 Store
La tienda mantiene el estado de la aplicación. Solo hay una tienda en cualquier aplicación de
Redux. Se puede acceder al estado almacenado, actualizar el estado y registrar o anular el
registro de escuchas a través de métodos auxiliares.
Las acciones realizadas en el estado siempre devuelven un nuevo estado. Por lo tanto, el estado
es muy fácil y predecible.
5.3.3 Reducer
Los reductores son funciones puras que toman el estado actual de una aplicación, realizan una
acción y devuelven un nuevo estado. Estos estados se almacenan como objetos y especifican
cómo cambia el estado de una aplicación en respuesta a una acción enviada a la Store, es decir,
toman el estado anterior de la aplicación y devuelven un nuevo estado basado en la acción que
se le pasó.
Se basa en la función de reducción en JavaScript, donde se obtiene un solo valor de varios

valores después de que se haya llevado a cabo una función de devolución de llamada.
Como funciones puras, no cambian los datos en el objeto pasado, ni realizan ningún efecto
secundario en la aplicación. Dado el mismo objeto, siempre debe producir el mismo resultado.
5.4 React - Redux
Al usar Redux con React, los estados ya no tendrán que levantarse, por lo que será más fácil
rastrear qué acción causa cualquier cambio. Como se vio anteriormente, el componente no
necesita proporcionar ningún estado o método para que sus componentes secundarios
compartan datos entre ellos. Todo es manejado por Redux. Esto simplifica enormemente la
aplicación y hace que sea más fácil de mantener.
21
6 DESARROLLO DE UNA APLICACIÓN CON REACT Y REDUX
Para desarrollar una aplicación con React y Redux se tomó como referencia la aplicación del
módulo 3 del Diplomado: Sistema de Seguridad Industrial. Para lo cual se procedió inicialmente
con la instalación del ambiente de desarrollo con Node y Yarn como entornos de ejecución y
gestor de paquetes, así como React CLI para la ejecución de comandos en la aplicación y algunas
dependencias para el ruteo, luego se construyeron los componentes necesarios de la aplicación
y se implementaron los mecanismos de flujo de Redux.
6.1 Instalación y Primeros Pasos
Para el desarrollo de aplicaciones con React se necesita un servidor de aplicaciones se y las

siguientes herramientas:
Nodejs
Node.js es una librería y entorno de ejecución de E/S dirigida por eventos y por lo tanto asíncrona
que se ejecuta sobre el intérprete de JavaScript creado por Google V8.
Se puede descargar node desde https://nodejs.org y verificar que esta instalado con los
comandos:
node -v
npm -v
Yarn
Yarn es un gestor de paquetes (igual a npm) el cual es una evolución de npm, ya que realiza lo
mismo y utiliza el mismo registro de datos de npm, pero mucho más rápido, seguro y confiable.
Para instalar yarn, se sigue las instrucciones en la página:

https://yarnpkg.com/en/docs/install
React CLI create-react-app
Instalar create-react-app de forma global con el siguiente comando:

yarn global add create-react-app@1.5.2
Si desea usar npm alternativamente equivale a:

npm install -g create-react-app@1.5.2
Para más información del CLI escribir:

create-react-app -help
Generar y servir un proyecto React usando create-react-app
Crear una carpeta de trabajo llamada src en el directorio usuario e ir a esa carpeta:
cd ~
22
mkdir src
cd src
Escribir lo siguiente para crear una nueva aplicación React llamada ssi-react-app:
create-react-app ssi-react-app
Para el presente proyecto se utilizó el IDE WebStorm, posteriormente abrir la aplicación:
Seleccionar la carpeta del proyecto que creado anteriormente con el CLI de react.
También se puede ver la estructura básica de un proyecto React.
El archivo package.json maneja las dependencias del proyecto.
El CLI hace que se pueda ejecutar comandos directamente el IDE.
Figura 7 Estructura básica de una aplicación con React
Fuente: Elaboracion Propia
Desplegar el proyecto en la pestaña de comando de Webstorm:

yarn start
Se abrirá automáticamente la aplicación en el navegador en la dirección http://localhost:3000/
Configurar el proyecto React para usar Reactstrap
Para usar reactstrap, escriba en consola para instalar reactstrap, y Bootstrap 4:

yarn add bootstrap@4.0.0
yarn add reactstrap@5.0.0
yarn add react-popper@0.9.2
23
6.2 Construcción de componentes
Habiendo descubierto la jerarquía de la interfaz, es hora de construir los componentes. Hay dos
enfoques principales para construir los componentes: de arriba hacia abajo o de abajo hacia
arriba. Es decir, se puede comenzar con la construcción de los componentes más arriba en la
jerarquía (como el componente de la Aplicación) o con los de abajo (como el componente Lista
de verificación). Para obtener una idea de cómo se transmiten todos los accesorios y cómo se
utilizan en los componentes secundarios, se comienza a construir los componentes de arriba
hacia abajo.
Además, para mantener el proyecto organizado y facilitar el mantenimiento e implementación de

nuevas funciones, mantendrá cada componente en su propio archivo JavaScript.
Figura 8 Estructura de componentes
Crear un folder components en src, donde estarán todos los components. Crear un archivo
llamado CatalogComponent.js en esta carpeta.
Abrir CatalogComponent.js y escribir:
CTRL+J en Windows
Esto es un live template de react que crea un componente de tipo clase.
Dentro la clase presionar Alt+Ins y genera un constructor para la clase.
En el método render adiciona un contenedor de bootstrap y una fila en ella con un objeto de tipo
media que desplegará el componente catalog que se definirá luego:
24
Código Fuente 1 Contenedor para Catálogo
Fuente: Elaboración Propia
Manejo de estados, props y contenido. En el constructor se asigna a la variable this.state, un

documento vacío y se crea la variable items como un arreglo.
Código Fuente 2 Creacion de un estado inicial vacío
Contenido Items. Los datos se manejan en formato json en archivos JavaScript.
Agregando contenido al arreglo de items:
{
name: 'Helmet',
image: '/assets/images/helmet.jpg',
category: 'safety',
label: 'ultra safe',
price: '4.99',
description: 'Un casco de seguridad útil para proteger en ámbitos como la construcción, fabricas y
otros'
},
{
name: 'Audio protector',
image: '/assets/images/audio.jpg',
category: 'safety',
label: 'noise filter',
25
price: '12.99',
description: 'Protege de ruidos auditivos por encima de los decibeles considerados aceptables'
},
{
name: 'Glasses',
image: '/assets/images/glasses.jpg',
category: 'safety',
label: 'New technology',
price: '31.99',
description: 'Permite filtrar rayos ultravioleta, material anti rayas, anti caidas'
},
{
name: 'Gloves',
image: '/assets/images/gloves.jpg',
category: 'safety',
label: '',
price: '12.99',
description: 'Hechos de algodón con goma antideslizante, especial para industria química.'
}
Asignando a la variable items el array creado:
var catalog= this.state.items;
Definiendo la function map para crear el componente element de catalog.
Código Fuente 3 Creación de componente con función map
Renombrando a solo Catalog en la definición de la clase y el export.

Con esto tiene est listo el componente catalog. Para usarlo abrir App.js y luego del componente
Navbar ponga una etiqueta Catalog así:
<Catalog/>
26
Puesto que no se usa los estilos de App.css, borraremos ese contenido.
Por tanto, como tampoco usamos esos estilos en App.js borramos la clase App definida en el
primer div.
Como al visualizar se ve que las imágenes son demasiado grandes arreglamos definiendo
tamaños de estas en una constante llamada imgStyle aplicándola luego al media object que
muestra las imágenes.
Código Fuente 4 Definiion de estilos para un componente
Fuente: Elaboracion propia
Paso de información entre componentes jerárquicos
Realizar cambios para que en lugar de lista de ítems se usen Cards para visualizar el catalogo.
Se crea una carpeta llamada shared en src.
mkdir src/shared
Allí crear un archivo llamado items.js

touch src/shared/items.js
Poner el contenido de ítems en el archivo creado en una constante llamada ITEMS, el contenido
del archivo debe quedar así:
export const ITEMS = [

{
name: 'Helmet',
image: '/assets/images/helmet.jpg',
category: 'safety',
label: 'ultra safe',
price: '4.99',
description: 'Un casco de seguridad útil para proteger en ámbitos como la construcción, fabricas y
otros',
comments: [
{
rating: 5,
comment: "Imagine all safety PPE in SSI!",
27
author: "Mr T",
date: "2012-10-16T17:57:28.556094Z"
},
{
rating: 4,
comment: "Gives me a lot of confort, I wish I could get my mother-in-law to have it!",
author: "Tania Barrancos",
date: "2014-09-05T17:57:28.556094Z"
},
{
rating: 3,
comment: "Use it, just use it!",
author: "Michael Rodriguez",
date: "2015-02-13T17:57:28.556094Z"
},
{
rating: 4,
comment: "Ultimate, Reaching for the stars!",
author: "Diana Cardozo",
date: "2013-12-02T17:57:28.556094Z"
},
{
rating: 2,
comment: "It is simply very nice!",
author: "50 Cent",
date: "2011-12-02T17:57:28.556094Z"
}
]
},
{
name: 'Audio protector',
image: '/assets/images/audio.jpg',
category: 'safety',
label: 'noise filter',
price: '12.99',
description: 'Protege de ruidos auditivos por encima de los decibeles considerados aceptables',
comments: [
{
rating: 5,
author: "Mr T",
date: "2012-10-16T17:57:28.556094Z"
},
{
rating: 5,
date: "2014-09-05T17:57:28.556094Z"
},
{
rating: 3,
date: "2015-02-13T17:57:28.556094Z"
},
{
rating: 4,
28
date: "2013-12-02T17:57:28.556094Z"
},
{
rating: 2,
author: "50 Cent",
date: "2011-12-02T17:57:28.556094Z"
}
]
},
{
name: 'Glasses',
image: '/assets/images/glasses.jpg',
category: 'safety',
label: 'New technology',
price: '31.99',
description: 'Permite filtrar rayos ultravioleta, material anti rayas, anti caidas',
comments: [
{
rating: 5,
author: "Mr T",
date: "2012-10-16T17:57:28.556094Z"
},
{
rating: 5,
date: "2014-09-05T17:57:28.556094Z"
},
{
rating: 3,
date: "2015-02-13T17:57:28.556094Z"
},
{
rating: 4,
date: "2013-12-02T17:57:28.556094Z"
},
{
rating: 2,
author: "50 Cent",
date: "2011-12-02T17:57:28.556094Z"
}
]
},
{
name: 'Gloves',
image: '/assets/images/gloves.jpg',
category: 'safety',
label: '',
price: '12.99',
description: 'Hechos de algodón con goma antideslizante, especial para industria química.',
29
comments: [
{
rating: 5,
author: "Mr T",
date: "2012-10-16T17:57:28.556094Z"
},
{
rating: 5,
date: "2014-09-05T17:57:28.556094Z"
},
{
rating: 3,
date: "2015-02-13T17:57:28.556094Z"
},
{
rating: 4,
date: "2013-12-02T17:57:28.556094Z"
},
{
rating: 2,
author: "50 Cent",
date: "2011-12-02T17:57:28.556094Z"
}
]
}
];
En el constructor de la Clase App se agrega en state la variable items:
Código Fuente 5 Constructor de la clase App
Fuente: Elaboracion Propia

30
En el tag Catalog, se pasa la información de los ítems como props:
<Catalog items={this.state.items}/>
En el CatalogComponent, puesto que se quitó ítems de state, debemos referenciarla desde props:
var catalog = this.props.items.map(item => {
En el método render del componente de catálogo usar Card en lugar de Media como componente
principal y quitar el tag de list de éste.
En el elemento div que contiene el Card, modificar la clase a className="col-12 col-md-5 m-1"
Usar CardImg directamente para renderizar la imagen en lugar de Media, especificando witdh
100%. En lugar del tag Media body, usar CardImgOverlay sin especificar ninguna clase. En lugar
de Media heading usar CardTitle.
Código Fuente 6 Mostrando una imagen en un elemento Card
En el return del componente quitar el tag Media usando directamente {catalog} asi:
Código Fuente 7 Retornando un componente catálogo
31
Figura 9 Mostrar imágenes usando props y un elemento Card
6.3 Eventos
Al hacer click en una imagen del catálogo, se muestra el detalle del item seleccionado con el click.
Para esto, en el state del componente de catálogo, se crea la variable selectedItem asignada a
null inicialmente.
En el componente Card usar el evento onClick llamando a onItemSelect pasando como parámetro
el item seleccionado:
<Card onClick={()=>{this.onItemSelect(item)}}>
En la función onItemSelect, asignar el item pasado como parámetro a selecteItem del state:
Código Fuente 8 Evento click
32
Implementación de un método para renderizar el item seleccionado asi:
Código Fuente 9 Renderizar Catálogo de Items
Luego de renderizar el catálogo, a continuación, en una nueva fila, mostrar el item seleccionado.
Código Fuente 10 Mostrando un item seleccionado
33
El componente de detalle se ve así:
Figura 10 Vista del componente detalle
34
6.3.1 Componentes Presentational y Container
A continuación, la idea es dejar el componente App.js limpio y crear un nuevo componente que
se encargue de almacenar los datos que dejamos en App.js y de pintar los elementos html que
están en App.js.
Hacer que el componente Catalog sea un componente puramente presentacional y lo mismo el

componente ItemDetail y hacer fluir hacia arriba la información de estos en un componente
contenedor que se va crear en este ejercicio.
Como el nuevo componente hara lo que hace App.js entonces:
Copiar App.js y pegar en la carpeta components con el nombre MainComponent.js y actualizar

su contenido de la siguiente manera:
Modificar la ruta de los imports como sea necesario.

Renombrar la clase a Main y cuidar que el export sea consecuente con ese nombre.
ItemDetail se desplegará como un componente hermano al mismo nivel que el catalogo, por lo
cual extraeremos la información necesaria (selectedIem) al componente padre MainComponent.
Es recomendable poner en pantalla dividida y extraer las propiedades de un lado al otro.
Borrar el constructor de Catalog por estar sin información.
Mover el método onItemSelect hacia MainComponent, por lo cual el componente Catalog ya no

conoce este método y hay que enviárselo como props y enviarlo con el parámetro solo de ItemId.
<Catalog items={this.state.items}
onClick={(itemId) => {this.onItemSelect(itemId)}}/>
En el componente Catalog hacer uso del evento onClick en un Card, donde se necesita reflejar
que ahora viene desde props y que además recibe como parámetro un id.
Código Fuente 11 Dibujando varios Cards
Modificar la function onItemSelect para reflejar que ahora recibe un id como parámetro.
En el tag ItemDetail se pasa el parámetro item extrayendo del arreglo de items mediante la
función filter, haciendo match por el id y extrayendo el resultado en la posición 0.
<ItemDetail item={this.state.items.filter((item)=>item.id===this.state.selectedItem)[0]}/>
35
Posteriormente cambiar de nombre a la variable selectedItem por item tal como especifica
props.
Ahora el componente App ya no necesita nada más que el componente Main, por lo cual se
limpia todo dato irrelevante.
Código Fuente 12 Clase App simplificado
6.3.2 Componentes Funcionales
Puesto que Catalog y ItemDetail no mantienen datos en state y su función es solo el

renderizado de la información basado en props, los convertimos en componentes funcionales.
Se tiene el Card y queda hacer su componente funcional, para esto se define una función
llamada
RenderCatalogItem(props).
Otra forma de definir la función es expandiendo props asi:
RenderCatalogItem({item, onClick}){}
Se usa la función return para crear un elemento de react y devolver el Card. Notese que ahora
las propiedades item y onClick son parámetros directos, ya no se pasa props.
36
Código Fuente 13 Catálogo como componente funcional
6.4 React Router
Se aprende a usar el Router de React para configurar la navegación entre varias páginas en
una aplicación React.
Instalar react router ejecutando:
yarn add react-router-dom@4.2.2
6.5 Redux
6.5.1 Instalación de Redux
Para poder usar Redux y React-Redux ejecutar los siguientes comandos:
yarn add redux@3.7.2

yarn add react-redux@5.0.7
6.5.2 Definición de Estado, Reductor y Acciones
En la carpeta src, crear un nuevo folder llamado redux.
Crear un archivo llamado reducer.js en la carpeta redux.
Como ahora obtendremos los datos aplicando redux movemos la información de ítems,
employees y comments del componente Main al reducer para esto, cortar el state y pegar en el
reducer.
37
El documento que almacena state, debe ser un objeto constante llamado initialState el cual se
exporta así:
export const initialState = {

items: ITEMS,
A continuación, implementar una función llamada Reducer que devolverá el estado sin ningún
cambio. Hay que recordar que el reducer debe recibir como parámetro el state y el action, asi:
Código Fuente 14 Definición de la función Reducer
En el Store de redux cuando realicemos la primera llamada a esta función reducer, el store
estará vacío, por lo cual le decimos que, en tal situación, cuando state no tenga valor, asigne
por defecto su valor a initialState.
Código Fuente 15 Inicialización del estado
Esta función Reducer es una función pura, porque no modifica el state que recibe como input.
Ahora debemos configurar el store, para esto crearemos un archivo llamado configureStore.js
en la carpeta redux.
Definir y exportar un arrow function, llamada ConfigureStore. En ella, llamar a la función

createStore de redux pasando como parámetros la función Reducer e initialState. Asignar el
valor de la llamada a createStore, a una constante llamada store.
Código Fuente 16 Configuración de Store

38
Finalmente, devolver store.
Ahora estamos listos para usar el store creado desde la aplicación.
En App.js justo antes de la definición de clase crearemos una constante llamada store y
asignaremos a esta la llamada a ConfigureStore() de redux.
Envolveremos el tag BrowserRouter con el tag Provider de react-redux con parámetro store
igual a store.
Código Fuente 17 Disponibilidad de la tienda en la Aplicación
Ahora el store que creamos está disponible para la aplicación.
En MainComponent.js conectaremos y usaremos el store de Redux. Para esto crearemos fuera

de la definición de clase una función flecha llamada mapStateToProps que recibe como
parámetro state y devuelve un objeto con variables como ítems, asignadas a store.items.
Código Fuente 18 Función flecha
Esta función trae los datos del Store que definimos en redux al objeto props del componente.
Para conectar el componente Main, se debe en el export del final del archivo, envolver en una
función connect que reciba como parámetro la función mapStateToProps y construir una función
que, a su vez, recibe como parámetro a Main. Como se está usando react router, además se
debe envolver todo eso con la llamada a withRouter, asi:
export default withRouter(connect(mapStateToProps)(Main));
En el componente Main, los datos ahora están en props, traídos desde el store, por lo cual
cambiaremos las referencias a state por props cuando accedemos a ítems, employees, y
comments.
39
Verificamos todas las páginas de la aplicación y veremos que todo sigue funcionando igual que
antes, la diferencia que ahora los datos vienen del store de redux.
Figura 11 Estructura de archivos Redux
40
7 CONCLUSIONES
React está escrito con JavaScript, el lenguaje de programación de la web, tanto para la lógica de
negocio como para la manipulación de la vista, ya que incorpora un DOM Virtual en memoria
como mecanismo para diferenciar un estado anterior con un nuevo estado, repintando la vista de
una forma más eficiente que, combinado con JavaScript extendido, facilita la implementación con
una sintaxis más concisa.
React sigue una arquitectura basada en componentes, el cual, utiliza un mecanismo como
propiedades para pasar información de un componente padre a componentes hijos y actualizar
el estado, este estado no es más que la información del propio componente que puede cambiar
durante el ciclo de vida del componente. Esta información fluye de forma unidireccional a través
de los componentes que se sincronizan con rutas de navegación en el ámbito de la aplicación.
Redux es un patrón de arquitectura de datos y manejador de estados predecible. Está pensado

para disminuir el número de relaciones entre componentes de la aplicación ya que contiene los
estados de toda la aplicación en una sola tienda central. Estos estados son modificados a través
de funciones reductoras que, combinadas con el estado inicial, producen un nuevo estado para
actualizar la vista, manteniendo así, un flujo de datos sencillo.
Para desarrollar una aplicación con React y Redux se tomó como referencia la aplicación del
módulo 3 del Diplomado: Sistema de Seguridad Industrial. Para lo cual se procedió inicialmente
con la instalación del ambiente de desarrollo con Node y Yarn como entornos de ejecución y
gestor de paquetes, así como React CLI para la ejecución de comandos en la aplicación y algunas
dependencias para el ruteo, luego se construyeron los componentes necesarios de la aplicación
y se implementaron los mecanismos de flujo de Redux.
8 RECOMENDACIONES
Crear componentes base propios, puesto que en los componentes de React la re utilización de
código se consigue principalmente a través de la composición.
Implementar aplicaciones React con el Framework React Native, como aplicaciones nativas para
Android e IOs, y reducir costos de implementación.
Determinar en la fase de diseño, los componentes relacionados o dependientes respecto a los

datos, para aplicar Redux en estos componentes en lugar de observadores y suscriptores.
Elegir el desarrollo con React para proyectos con equipos de desarrollo con habilidades altas de
JavaScript.
41
9 BIBLIOGRAFÍA
Akshat, P., & Abhishek, N. (2016). React Native for iOS Development.
Cássio de Sousa, A. (2015). PRO REACT - Build complex front-end applications in a composable
way with React.
Developers, G. (s.f.). Obtenido de https://developers.google.com
Jonas Bonér, D. F. (16 de Septiembre de 2014). El Manifiesto de Sistemas Reactivos (v2.0).

Obtenido de https://www.reactivemanifesto.org/es
Mardan, A. (2017). React Quickly.
Porcello, A. B. (2017). LEARNING REACT - Functional Web Development with React and Redux.
Redux.js. (s.f.). React. Obtenido de https://es.redux.js.org/
Sikora, M. (2017). PHP Reactive Programming.
Tielens Thomas, M. (2018). React in Action.
42

Desarrollo de Aplicaciones Web Con React y Redux

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Desarrollo de Aplicaciones Web Con React y Redux

Diunggah oleh

Hak Cipta:

Format Tersedia

UNIVERSIDAD MAYOR DE SAN SIMON

FACULTAD DE CIENCIAS Y TECNOLOGÍA

TRABAJO FINAL PRESENTADO PARA OBTENER EL CERTIFICADO

POSTULANTE: IVAN ZAPATA TORRICO

A mis padres por su apoyo incondicional

A mi familia por su confianza y aliento en todo

A mis amigos y compañeros de carrera por el

Figura 1 JSX se transpila en JavaScript ................................................................................................10

Código Fuente 1 Contenedor para Catálogo ........................................................................................25

Desarrollar aplicaciones con librerías basadas en JavaScript puede facilitar enormemente el

Tal es el caso de los Frameworks y librerias basadas en el lenguaje de programación de la web,

1.1 Antecedentes Generales

1.2 Antecedentes Específicos

Lo que cambia, mientras el usuario usa o interactúa con la aplicación, es el estado de la

Para el presente trabajo se utilizarán los siguientes métodos de investigación:

• Método Bibliográfico, debido a que se realizará la lectura y compilación de libros y

• Método Analítico, debido a que se procederá a revisar y analizar ordenadamente documentos

• Método Empírico o de Campo, debido a que se utilizaran ejemplos de aplicación o

3.1 Aplicaciones de Página Única

3.2 Java Script

3.3 Conociendo React

React es un motor para crear interfaces de usuario compuestas utilizando JavaScript y

3.5 Fundamentos de JSX

Figura 1 JSX se transpila en JavaScript

Fuente: (Mardan, 2017)

3.5.1 React con JSX

Los dos beneficios principales de la agrupación modular son el de la modularidad y el rendimiento

El rendimiento de la red se obtiene con la necesidad de cargar una dependencia en el navegador,

3.6 Abstracción del DOM Virtual

El procedimiento de actualización de React se da cuando ocurre un cambio, React determina las

3.6.1 Manipulación del DOM

Fuente: (Akshat & Abhishek, 2016)

3.6.2 Componentes con DOM Virtual

El presente apartado describe cómo funciona un DOM virtual en términos de componentes.

Fuente: (Akshat & Abhishek, 2016)

3.7 Detrás de React

Las siguientes son algunas de las ventajas para elegir React:

• React utiliza ampliamente JavaScript: tradicionalmente, las vistas en HTML están

La programación reactiva es otro paradigma de programación. Se basa en la capacidad de

• Responsivos: aseguran la calidad del servicio cumpliendo unos tiempos de respuesta

• Resilientes: se mantienen responsivos incluso cuando se enfrentan a situaciones de error.

• Elásticos: se mantienen responsivos incluso ante aumentos en la carga de trabajo.

• Orientados a mensajes: minimizan el acoplamiento entre componentes al establecer

Figura 4 Características de las aplicaciones reactivas

Fuente: (Jonas Bonér, 2014)

3.8.2 Características de las Aplicaciones Reactivas

Las aplicaciones reactivas reaccionan e implementan acciones dependiendo de la carga de

Reacción a los usuarios

Se garantiza un tiempo de respuesta adecuado a los usuarios, independientemente de la carga

4.1 Props, Estado, y el Árbol de Componentes

Según (Porcello, 2017) React se centra en la construcción de interfaces de usuario, cuando

Los props son inmutables, es decir, que no cambian.

En JSX, los props se proporcionan como atributos de etiqueta como en HTML.

La definición de estado es así de simple. El estado de un componente es aquella característica

4.2 Componentes y Flujo de Datos

Un componente recibe algunos datos y devuelve la interfaz de datos que se va a representar.

Conceptualmente, los componentes son como funciones de JavaScript. Aceptan entradas

4.2.1 La Solución Detrás de las Fallas

Figura 5 Flujo de datos y eventos

Fuente: Elaboración propia

React Router proporciona tres componentes para comenzar:

Redux es un patrón de arquitectura de datos y manejador de estados predecible. Está pensado

5.1 Introducción a Flux como una arquitectura para React

Figura 6 Flujo de trabajo de Flux