Programación

Reactiva con React,

NodeJS & MongoDB

❝Se proactivo ante los cambios, pues una vez que llegan no tendrás tiempo para
reaccionar❞

─ Oscar Blancarte (2018)

Página | 2
Datos del autor:

Ciudad de México

e-mail: [email protected]

Autor y Editor

© Oscar Javier Blancarte Iturralde

Queda expresamente prohibida la reproducción o transmisión, total o parcial, de

este libro por cualquier forma o medio; ya sea impreso, electrónico o mecánico,
incluso la grabación o almacenamiento informáticos sin la previa autorización
escrita del autor.

Composición y redacción:

Oscar Javier Blancarte Iturralde

Edición:

Oscar Javier Blancarte Iturralde

Portada

Arq. Jaime Alberto Blancarte Iturralde

Primera edición

Se publicó por primera vez en Enero del 2018

3 | Página
 Acerca del autor
Oscar Blancarte es originario de Sinaloa, México donde estudió la carrera de
Ingeniería en Sistemas Computacionales y rápidamente se mudó a la Ciudad de
México donde actualmente radica.

Oscar Blancarte es un Arquitecto de software con más de 12 años de experiencia

en el desarrollo y arquitectura de software. Certificado como Java Programmer
(Sun microsystems), Análisis y Diseño Orientado a Objetos (IBM) y Oracle IT
Architect (Oracle).

A lo largo de su carrera ha trabajado para diversas empresas del sector de TI,

entre las que destacan su participación en diseños de arquitectura de software y
consultoría para clientes de los sectores de Retail, Telco y Health Care.

Oscar Blancarte es además autor de su propio blog

https://www.oscarblancarteblog.com desde el cual está activamente publicando
temas interesantes sobre Arquitectura de software y temas relacionados con la
Ingeniería de Software en general. Desde su blog ayuda a la comunidad a
resolver dudas y es por este medio que se puede tener una interacción más
directa con el autor.

Página | 4
 Otras obras del autor

Introducción a los patrones de diseño – Un enfoque práctico

Hoy en día aprender patrones de diseño no es una

cualidad más, si no una obligación. Y es que estudiar
y comprender los patrones de diseño nos convierte en
un mejor programador/arquitecto y es clave para
conseguir una mejor posición en el mundo laboral.

Este libro fue creado con la intención de enseñar a sus

lectores cómo utilizar los patrones de diseño de una
forma clara y simple desde un enfoque práctico y con
escenarios del mundo real.

Tengo que aceptar que este no es un libro convencional

de patrones de diseño debido, principalmente, a que no
sigue la misma estructura de las primordiales obras
relacionadas con este tema. En su lugar, me quise
enfocar en ofrecer una perspectiva del mundo real,
en donde el lector pueda aprender a utilizar los patrones de diseño en entornos reales
y que puedan ser aplicados a proyectos reales.

Cuando empecé a estudiar sobre patrones de diseño, me di cuenta que siempre se

explicaban en escenarios irracionales que poco o ninguna vez podrías utilizar, como
por ejemplo para aprender a crear figuras geométricas, hacer una pizza o crear una
serie de clases de animales que ladren o maúllen; esos eran los ejemplos que siempre
encontraba, que, si bien, explicaban el concepto, se complicaba entender cómo
llevarlos a escenarios reales.
En este libro trato de ir un poco más allá de los ejemplos típicos para crear cosas
realmente increíbles. Por ejemplo:

• Crear tu propia consola de línea de comandos.

• Crear tu propio lenguaje para realizar consultas SQL sobre un archivo de
Excel.
• Crear aplicaciones que puedan cambiar entre más de una base de datos, por
ejemplo, Oracle y MySQL según las necesidades del usuario.
• Administrar la configuración global de tu aplicación.
• Crear un Pool de ejecuciones para controlar el número de hilos ejecutándose
simultáneamente, protegiendo nuestra aplicación para no agotar los recursos.
• Utilizar proxis para controlar la seguridad de tu aplicación.
• Utilizar estrategias para cambiar la forma en que los usuarios son autenticados
en la aplicación; como podría ser por Base de datos, Webservices, etcétera.
• Crear tu propia máquina de estados para administrar el ciclo de vida de tu
servidor.

5 | Página
Éstos son sólo algunos de los 25 ejemplos que abordaremos en este libro, los
cuales están acompañados, en su totalidad, con el código fuente para que seas
capaz de descargarlos, ejecutarlos y analizarlos desde tu propia computadora.

Adquiérelo en https://reactiveprogramming.io/books/es

Página | 6
 Introducción a la arquitectura de software – Un enfoque
práctico

Desde los inicios de la ingeniería software, los

científicos de la computación lucharon por tener
formas más simples de realizar su trabajo, ya que
las cuestiones más simples, cómo imprimir un
documento, guardar un archivo o compilar el
código, era una tarea que podría tardar desde un
día hasta una semana.

Hoy en día, contamos con herramientas que van

indicando en tiempo real si tenemos un error de
sintaxis en nuestro código, pero no solo eso,
además, son los suficientemente inteligentes para
a completar lo que vamos escribiendo, incluso,
nos ayudan a detectar posibles errores en tiempo
de ejecución.

La realidad es que a medida que la tecnología avanza, tenemos cada vez más
herramientas a nuestra disposición, como lenguajes de programación, IDE’s,
editores de código, frameworks, librerías, plataformas en la nube y una gran
cantidad de herramientas que nos hacen la vida cada vez más simple, y por
increíble que parezca, los retos de hoy en día no son compilar el código, imprimir
una hoja, guardar en una base de datos; tareas que antes eran muy difíciles; lo
curioso es que hoy en día hay tantas alternativas para hacer cualquier cosa, que
por increíble que parezca, el reto de un programador hoy en día es decidirse por
qué tecnología irse, eso es increíble, tenemos tantas opciones para hacer lo que
sea, que el reto no es hacer las cosas, si no con que tecnologías la aremos.

Ahora bien, yo quiero hacerte una pregunta, ¿crees que hacer un programa hoy
en días es más fácil que hace años?
Seguramente a todos los que les haga esta pregunta concordarán con que hoy
en día es más fácil, sin embargo, y por increíble que parezca, el hecho de que las
tecnologías sean cada vez más simples, nos trae nuevas problemáticas y justo
aquí donde quería llegar.

A medida que las tecnologías son más simples y más accesibles para todas las
personas del mundo, las aplicaciones se enfrentan a retos que antes no existían,
como la concurrencia, la seguridad, la alta disponibilidad, el performance, la
usabilidad, la reusabilidad, testabilidad, funcionalidad, modificabilidad,
portabilidad, integridad, escalabilidad, etc, etc. Todos estos son conceptos que
prácticamente no existían en el pasado, porque las aplicaciones se desarrollaban
para una audiencia muy reducida y con altos conocimientos técnicos, además, se
ejecutaban en un Mainframe, lo que reducía drásticamente los problemas de
conectividad o intermitencia, pues todo se ejecuta desde el mismo servidor.
Adquiérelo en https://reactiveprogramming.io/books/es

7 | Página
Página | 8
 Agradecimientos
Este libro tiene una especial dedicación a mi esposa Liliana y mi hijo Oscar,
quienes son la principal motivación y fuerza para seguir adelante todos los días,
por su cariño y comprensión, pero sobre todo por apoyarme y darme esperanzas
para escribir este libro.

A mis padres, quien con esfuerzo lograron sacarnos adelante, darnos una
educación y hacerme la persona que hoy soy.

A todos mis lectores anónimos de mi blog y todas aquellas personas que, de

buena fe, compraron y recomendaron mi primer libro (Introducción a los patrones
de diseño) y fueron en gran medida lo que me inspiro en escribir este segundo
libro.

Finalmente, quiero agradecerte a ti, por confiar en mí y ser tu copiloto en esta

gran aventura para aprender React, NodeJS, MongoDB y muchas cosas más. :)

9 | Página
 Prefacio
Cada día, nacen nuevas tecnologías que ayudan a construir aplicaciones web más
complejas y elaboras, con relativamente menos esfuerzo, ayudando a que casi
cualquiera persona con conocimientos básicos de computación puede realizar una
página web. Sin embargo, no todo es felicidad, pues realizar un trabajo
profesional, requiere de combinar muchas tecnologías para entregar un producto
de calidad.

Puede que aprender React o NodeJS no sea un reto para las personas que ya
tiene un tiempo en la industria, pues ya están familiarizados con HTML,
JavaScript, CSS y JSON, por lo que solo deberá complementar sus conocimientos
con una o dos tecnologías adicionales, sin embargo, para las nuevas
generaciones de programadores o futuros programadores, aprender React o
NodeJS puede implicar un reto aun mayor, pues se necesita aprender primero
las bases, antes de poder programar en un stack de más alto nivel.

Cuando yo empecé a estudiar el stack completo de React + NodeJS + MongoDB,

fue necesario tener que leer 3 libros completos, pues cada uno enseñaba de
forma separada una parte de la historia. Cada libro me enseñó a utilizar las
tecnologías de forma individual, lo cual era fantástico, sin embargo, cuando llego
el momento de trabajar con todas las tecnologías juntas, comenzaron los
problemas, pues nadie te enseñaba como unir todo en un solo proyecto,
optimizar y pasar a producción como una aplicación completa. Todo esto, sin
mencionar los cientos o quizás miles de foros y blogs que analice para aprender
los trucos más avanzados.

Este libro pretende evitarte ese dolor de cabeza que yo tuve por mucho tiempo,
pues a lo largo de este libro aprenderemos a utilizar React + NodeJS con Express
+ MongoDB y aderezaremos todo esto con Redux, uno de los módulos más
populares y avanzados para el desarrollo de aplicaciones Web profesionales.
Finalmente aprenderemos a crear un API REST completo con NodeJS y utilizando
el Estándar de Autenticación JSON Web Tokens.

El objetivo final de este libro es que aprendas a crear aplicaciones reactivas con
React, apoyado de las mejores tecnologías disponibles. Es por este motivo que,
durante la lectura de este libro, trabajaremos en un único proyecto que irá
evolucionando hasta terminarlo por completo. Este proyecto será, una réplica de
la red social Twitter, en la cual podremos crear usuarios, autenticarnos, publicar
Tweets, seguir a otros usuarios y ver las publicaciones de los demás en nuestro
home.

Página | 10
 Cómo utilizar este libro
Este libro es en lo general fácil de leer y digerir, pues tratamos de enseñar todos
los conceptos de la forma más simple y asumiendo que el lector tiene poco o
nada de conocimiento del tema, así, sin importar quien lo lea, todos podamos
aprender fácilmente.

Como parte de la dinámica de este libro, hemos agregado una serie de tipos de
letras que hará más fácil distinguir entre los conceptos importantes, código,
referencias a código y citas. También hemos agregado pequeñas secciones de
tips, nuevos conceptos, advertencias y peligros, los cuales mostramos mediante
una serie de íconos agradables para resaltar a la vista.

Texto normal:

Es el texto que utilizaremos durante todo el libro, el cual no enfatiza nada en

particular.

Negritas:

El texto en negritas es utilizado para enfatizar un texto, de tal forma que

buscamos atraer tu atención, que es algo importante.

Cursiva:
Es texto lo utilizamos para hacer referencia a fragmentos de código como
una variable, método, objeto o instrucciones de líneas de comandos. Pero
también es utilizada para resaltar ciertas palabras técnicas.

Código

Para el código utilizamos un formato especial, el cual permite colorear ciertas

palabras especiales, crear el efecto entre líneas y agregar el número de línea que
ayude a referencia el texto con el código.

1. ReactDOM.render(
2. <h1>Hello, world!</h1>,
3. document.getElementById('root')
4. );

El texto con fondo verdes, lo utilizaremos para indicar líneas que se agregan al
código existente.

Mientras que el rojo y tachado, es para indicar código que se elimina de un

archivo existente.

11 | Página
Por otra parte, tenemos los íconos, que nos ayudan para resaltar algunas cosas:

Nuevo concepto: <concepto>

Cuando mencionamos un nuevo concepto o termino

que vale la pena resaltar, es explicado mediante una
caja como esta.

Tip

Esta caja la utilizamos para dar un tip o sugerencia

que nos puede ser de gran utilidad.

Importante

Esta caja se utiliza para mencionar algo muy

importante.

Error común

Esta caja se utiliza para mencionar errores muy

comunes que pueden ser verdadero dolor de cabeza o
para mencionar algo que puede prevenir futuros
problemas.

Documentación

Esta caja se muestra cada vez que utilizamos un nuevo

servicio del API REST, la cual tiene la intención de
indicar al lector donde puede encontrar la
documentación del servicio, como es la URL,
parámetros de entrada/salida y restricciones de
seguridad.

Página | 12
 Código fuente
Todo el código fuente de este libro está disponible en GitHub y dividido de tal
forma que, cada capítulo tenga un Branch independiente. El código fuente lo
puedes encontrar en:

https://github.com/oscarjb1/books-reactiveprogramming.git

Para ver el código de cada capítulo, solo es necesario dirigirse al listado de

branches y seleccionar el capitulo deseado:

Fig 1 - Git branches

La segunda y más recomendable opción es, utilizar un cliente de Git, como lo es

Source Tree y clonar el repositorio, lo que te permitirá tener acceso a todos los
branches desde tu disco duro.

Fig 2 - Source Tree

13 | Página
 Requisitos previos
Este libro está diseñado para que cualquier persona con conocimientos básicos
de programación web, puedo entender la totalidad de este libro, sin embargo,
debido a la naturaleza de React y NodeJS, es necesario conocer los fundamentos
de JavaScript, pues será el lenguaje que utilizaremos a lo largo de todo este libro.

También será interesante contar con conocimientos básicos de CSS3, al menos

para entender como declarar selectores y aplicarlos a los elementos de HTML.

Página | 14
 INTRODUCCIÓN
Muy lejos han quedado los tiempos en los que Tim Berners Lee, conocido como
el padre de la WEB; estableció la primera comunicación entre un cliente y un
servidor, utilizando el protocolo HTTP (noviembre de 1989). Desde entonces, se
ha iniciado una guerra entre las principales compañías tecnológicas por dominar
el internet. El caso más claro, es la llamada guerra de los navegadores,
protagonizado por Netscape Communicator y Microsoft, los cuales buscaban que
sus respectivos navegadores (Internet Explorer y Netscape) fueran el principal
software para navegar en internet.

Durante esta guerra, las dos compañías lucharon ferozmente, Microsoft luchaba
por alcanzar a Netscape, quien entonces le llevaba la delantera y Netscape
luchaba para no ser alcanzados por Microsoft. Como hemos de imaginar,
Microsoft intento comprar a Netscape y terminar de una vez por todas con esta
guerra, sin embargo, Netscape se negó reiteradamente a la venta, por lo que
Microsoft inicio una de las más descaradas estrategias; amenazo con copiar
absolutamente todo lo que hiciera Netscape si no accedían a la venta.

Económicamente hablando, Microsoft era un gigante luchando contra una

hormiga, el cual pudo contratar y poner a su plantilla a cuento ingeniero fuera
necesarios para derrotar a Netscape.

En esta carrera por alcanzar a Netscape, ambas empresas empezaron a lanzar

releaces prácticamente cada semana, y semana con semana, los navegadores
iban agregando más y más funcionalidad, lo cual podría resultar interesante, pero
era todo lo contrario. Debido a la guerra sucia, ninguna empresa se apegaba a
estándares, que además eran prácticamente inexistentes en aquel entonces. Lo
que provocaba que los programadores tuvieran que escribir dos versiones de una
misma página, una que funcionara en Netscape y otra que funcionara para
Internet Explorer, pues las diferencia que existían entre ambos navegadores era
tan grande, que era imposible hacer una misma página compatible para los dos
navegadores.

Para no hacer muy larga esta historia, y como ya sabrás, Microsoft termino
ganando la guerra de los navegadores, al proporcionar Internet Explorer
totalmente gratis y preinstalado en el sistema operativo Windows.

Hasta este punto te preguntarás, ¿qué tiene que ver toda esta historia con React
y NodeJS?, pues la verdad es que mucho, pues durante la guerra de los
navegadores Netscape invento JavaScript. Aunque en aquel momento, no era un
lenguaje de programación completo, sino más bien un lenguaje de utilidad, que
permitía realizar cosas muy simples, como validar formularios, lanzar alertas y
realizar algunos cálculos. Es por este motivo que debemos recordar a Netscape,
pues fue el gran legado que nos dejó.

Finalmente, Netscape antes de terminar de morir, abre su código fuente y es

cuando nace Mozilla Firefox, pero esa es otra historia…

15 | Página
Retornando a JavaScript, este lenguaje ha venido evolucionando de una manera
impresionante, de tal forma que hoy en día es un lenguaje de programación
completo, como Java o C#. Tan fuerte ha sido su evolución y aceptación que hoy
en día podemos encontrar a JavaScript del lado del servidor, como es el caso de
NodeJS, creado por Ryan Dahl en 2009. De la misma forma, Facebook desarrollo
la librería React basada en JavaScript.

Tanto React como NodeJS funcionan en su totalidad con JavaScript, React se

ejecuta desde el navegador, mientras que NodeJS se ejecuta desde un servidor
remoto, el cual ejecuta código JavaScript.

JavaScript es un lenguaje de programación interpretado, lo que quieres decir que

el navegador va ejecutando el código a medida que es analizado, evitando
procesos de compilación. Además, JavaScript es un lenguaje regido por el
Estándar ECMAScript el cual, al momento de escribir estas líneas, se encuentra
en la versión 6 estable y se está desarrollando la versión 7.

Nuevo concepto: ECMAScript

ECMAScript es una especificación de lenguaje de

programación propuesta como estándar por NetScape
para el desarrollo de JavaScript.

Comprender la historia y la funcionalidad de JavaScript es fundamental para

aprender React y NodeJS, pues ambos trabajan 100% con este lenguaje. Aunque
en el caso de React, existe un lenguaje propio llamado JSX, que al final se
convierte en JavaScript. Pero eso lo veremos en su momento.

Página | 16
 Índice

Acerca del autor..................................................................................................................................... 4

Otras obras del autor ............................................................................................................................. 5

Agradecimientos .................................................................................................................................... 9

Prefacio ............................................................................................................................................... 10

Cómo utilizar este libro ........................................................................................................................ 11

Código fuente ...................................................................................................................................... 13

Requisitos previos................................................................................................................................ 14

INTRODUCCIÓN ................................................................................................................................... 15

Índice ................................................................................................................................................... 17

Por dónde empezar ............................................................................................................................. 25

Introducción a React .............................................................................................................................. 27
Server Side Apps vs Single Page Apps ............................................................................................... 28
Introducción a NodeJS ........................................................................................................................... 30
NodeJS y la arquitectura de Micro Servicios ..................................................................................... 31
Introducción a MongoDB ....................................................................................................................... 32
Bases de datos Relacionales VS MongoDB ....................................................................................... 32
La relación entre React, NodeJs & MongoDB ........................................................................................ 34
Resumen ................................................................................................................................................ 35

Preparando el ambiente de desarrollo ................................................................................................. 36

Instalando Visual Studio Code ............................................................................................................... 36
Instalación de Visual Studio Code ..................................................................................................... 37
Instalar PlugIns .................................................................................................................................. 38
Instalando NodeJS & npm ...................................................................................................................... 39
Creando mi primer proyecto de React ................................................................................................... 40
Estructura base de un proyecto ........................................................................................................ 40
Creación un proyecto paso a paso .................................................................................................... 41
Creación del proyecto con utilerías .................................................................................................. 50
Descargar el proyecto desde el repositorio ...................................................................................... 51
Gestión de dependencias con npm................................................................................................... 52
Micro-modularización ....................................................................................................................... 56
Introducción a WebPack ........................................................................................................................ 57
Instalando Webpack ......................................................................................................................... 58
El archivo webpack.config.js ............................................................................................................. 59
React Developer Tools ........................................................................................................................... 60
Resumen ................................................................................................................................................ 63

17 | Página
Introducción al desarrollo con React .................................................................................................... 64
Programación con JavaScript XML (JSX) ................................................................................................ 64
Diferencia entre JSX, HTML y XML .................................................................................................... 65
Contenido dinámico y condicional .................................................................................................... 72
JSX Control Statements ..................................................................................................................... 75
Transpilación ..................................................................................................................................... 79
Programación con JavaScript puro. ....................................................................................................... 80
Element Factorys .............................................................................................................................. 81
Element Factory Personalizados ....................................................................................................... 82
Resumen ................................................................................................................................................ 84

Introducción a los Componentes.......................................................................................................... 85

La relación entre Components y Web Component ................................................................................ 85
Componentes con estado y sin estado ................................................................................................... 87
Componentes sin estado .................................................................................................................. 88
Componentes con estado ................................................................................................................. 90
Jerarquía de componentes ..................................................................................................................... 93
Propiedades (Props) ............................................................................................................................... 95
PropTypes .............................................................................................................................................. 98
Validaciones avanzadas .................................................................................................................. 100
DefaultProps ........................................................................................................................................ 102
Refs ...................................................................................................................................................... 102
Referencias con String .................................................................................................................... 104
Referencias con Hooks .................................................................................................................... 104
Alcance los Refs .............................................................................................................................. 105
Keys ...................................................................................................................................................... 105
Las 4 formas de crear un Componente ................................................................................................ 108
ECMAScript 5 – createClass (Obsoleta)........................................................................................... 108
ECMAScript 6 - React.Component .................................................................................................. 108
ECMAScript 6 - Function Component ............................................................................................. 109
ECMAScript 7 - React.Component .................................................................................................. 110
Resumen .............................................................................................................................................. 111

Introducción al proyecto Mini Twitter ............................................................................................... 112

Un vistazo rápido al proyecto .............................................................................................................. 112
Página de inicio ............................................................................................................................... 113
Perfil de usuario .............................................................................................................................. 113
Editar perfil de usuario ................................................................................................................... 114
Página de seguidores ...................................................................................................................... 115
Detalle del Tweet ............................................................................................................................ 115
Inicio de sesión (Login) .................................................................................................................... 116
Registro de usuarios (Signup) ......................................................................................................... 116
Análisis al prototipo del proyecto ........................................................................................................ 117
Componente TwitterDashboard ..................................................................................................... 118
Componente TweetsContainer ....................................................................................................... 119
Componente UserPage ................................................................................................................... 120
Componente Signup ....................................................................................................................... 121
Componente Login .......................................................................................................................... 122
Jerarquía de los componentes del proyecto......................................................................................... 123

Página | 18
 El enfoque Top-down & Bottom-up ..................................................................................................... 124
Top-down ........................................................................................................................................ 124
Bottom-up ....................................................................................................................................... 125
El enfoque utilizado y porque ......................................................................................................... 125
El API REST del proyecto Mini Twitter .................................................................................................. 126
Invocando el API REST desde React ..................................................................................................... 129
Mejorando la clase APIInvoker ....................................................................................................... 131
El componente TweetsContainer ......................................................................................................... 134
El componente Tweet .......................................................................................................................... 137
Paginando los Tweets .......................................................................................................................... 144
Resumen .............................................................................................................................................. 147

Introducción al Shadow DOM y los Estados ....................................................................................... 148

Introducción a los Estados ................................................................................................................... 148
Establecer el estado de Componente ................................................................................................... 149
Actualizando el estado de un Componente ......................................................................................... 151
La librería immutability-helper ....................................................................................................... 153
El Virtual DOM de React ...................................................................................................................... 155
Atributos de los elementos: ............................................................................................................ 156
Eventos ........................................................................................................................................... 157
Resumen .............................................................................................................................................. 158

Trabajando con Formularios .............................................................................................................. 159

Controlled Components ....................................................................................................................... 159
Uncontrolled Components ................................................................................................................... 162
Enviar el formulario ............................................................................................................................. 163
Mini Twitter (Continuación 1) .............................................................................................................. 165
El componente Signup .................................................................................................................... 165
El componente login ....................................................................................................................... 174
Resumen .............................................................................................................................................. 180

Ciclo de vida de los componentes ...................................................................................................... 181

El Constructor ...................................................................................................................................... 184
Function getDerivedStateFromProps ................................................................................................... 186
Function componentWillMount (deprecated) ..................................................................................... 187
Function render.................................................................................................................................... 187
Function getSnapshotBeforeUpdate .................................................................................................... 189
Function componentDidMount ............................................................................................................ 190
Function componentWillReceiveProps (deprecated) ........................................................................... 190
Function shouldComponentUpdate ..................................................................................................... 191
Function forceUpdate .......................................................................................................................... 192
Function componentWillUpdate (deprecated) .................................................................................... 193
Function componentDidUpdate ........................................................................................................... 194

19 | Página
 Function componentWillUnmount ....................................................................................................... 194
Flujos de montado de un componente ................................................................................................ 195
Flujos de actualización ......................................................................................................................... 196
Flujos de desmontaje de un componente ............................................................................................ 197
Mini Twitter (Continuación 2) .............................................................................................................. 198
Configuración inicial ........................................................................................................................ 198
El componente TwitterApp ............................................................................................................. 199
El componente TwitterDashboard .................................................................................................. 203
El componente Profile .................................................................................................................... 205
El componente SuggestedUsers ..................................................................................................... 209
El componente Reply ...................................................................................................................... 213
Resumen .............................................................................................................................................. 230

React Routing .................................................................................................................................... 231

Single page Application ....................................................................................................................... 232
Router & Route .................................................................................................................................... 233
Switch .................................................................................................................................................. 234
Link....................................................................................................................................................... 235
NavLink ................................................................................................................................................ 236
Redirect ................................................................................................................................................ 237
URL params.......................................................................................................................................... 237
Mini Twitter (Continuación 3) .............................................................................................................. 239
Implementando Routing en nuestro proyecto ............................................................................... 239
El componente AuthRouter ............................................................................................................ 240
El componente Toolbar ................................................................................................................... 241
Toques finales al componente Login .............................................................................................. 246
Toques finales al componente Signup ............................................................................................ 247
El componente UserPage ................................................................................................................ 250
El componente MyTweets .............................................................................................................. 268
Actualizar el componente Tweet .................................................................................................... 273
Resumen .............................................................................................................................................. 275

Interfaces interactivas ....................................................................................................................... 276

Qué son las transiciones ...................................................................................................................... 276
Qué son las animaciones ..................................................................................................................... 277
Introducción a CSSTranstion ................................................................................................................ 279
Mini Twitter (Continuación 4) .............................................................................................................. 281
El componente UserCard ................................................................................................................ 281
El componente Followings .............................................................................................................. 284
El componente Followers ............................................................................................................... 287
Resumen .............................................................................................................................................. 291

Componentes modales ...................................................................................................................... 292

Algunas librerías existentes ................................................................................................................. 292
Implementando modal de forma nativa .............................................................................................. 293
React Portal ......................................................................................................................................... 295

Página | 20
 Mini Twitter (Continuación 5) .............................................................................................................. 296
El componente TweetDetail............................................................................................................ 296
El componente Modal ..................................................................................................................... 299
Últimos retoques al proyecto ......................................................................................................... 305
Resumen .............................................................................................................................................. 307

Context .............................................................................................................................................. 308

createContext ...................................................................................................................................... 309
Provider................................................................................................................................................ 310
Consumer ............................................................................................................................................. 312
contextType ......................................................................................................................................... 314
Mini Twitter (Continuación 6) .............................................................................................................. 316
Creado el UserContext .................................................................................................................... 316
Implementando muestro primer Provider...................................................................................... 316
Implementando nuestros Consumers............................................................................................. 317
Conclusiones ........................................................................................................................................ 322

Hooks................................................................................................................................................. 323
Introducción a los Hooks ...................................................................................................................... 328
Estado ............................................................................................................................................. 328
Ciclo de vida .................................................................................................................................... 331
Creando nuestros propios Hooks .................................................................................................... 335
Utilizando el Context con los Hooks ............................................................................................... 336
El futuro de las clases...................................................................................................................... 337
Mini Twitter (Continuación 7) .............................................................................................................. 338
Migrando el componente Followers ............................................................................................... 338
Migrando el componente Followings ............................................................................................. 340
Migrando el componente SuggestedUser ...................................................................................... 341
Migrando el componente Toolbar .................................................................................................. 342
Migrando el componente TwitterDashboard ................................................................................. 344
Migrando el componente TwitterApp ............................................................................................ 344
Migrando el componente UserPage ............................................................................................... 347
Conclusiones ........................................................................................................................................ 353

Redux ................................................................................................................................................ 354

Introducción a Redux ........................................................................................................................... 355
Como funciona Redux ..................................................................................................................... 356
Los tres principios de Redux ........................................................................................................... 367
Redux sin hooks ................................................................................................................................... 369
Mini Twitter (Continuación 8) .............................................................................................................. 371
Instalando las dependencias ........................................................................................................... 371
Creando el Store y los reducers ...................................................................................................... 372
Implementando el Provider ............................................................................................................ 376
Redux logger ................................................................................................................................... 377
Redux DevTool ................................................................................................................................ 379
Migrando el componente UserPage ............................................................................................... 381
Migrando el componente Followers ............................................................................................... 388
Migrando el componente Followings ............................................................................................. 390
Migrando el componente TweetsContainer ................................................................................... 391
Migrando el componente TwitterDashboard ................................................................................. 393

21 | Página
 Resumen .............................................................................................................................................. 395

Introducción a NodeJS ....................................................................................................................... 396

Porque es importante aprender NodeJS .............................................................................................. 396
El Rol de NodeJS en una aplicación ...................................................................................................... 397
NodeJS es un mundo ............................................................................................................................ 398
Introducción a Express ......................................................................................................................... 398
Instalando Express .......................................................................................................................... 399
El archivo package.json ................................................................................................................... 399
Node Mudules................................................................................................................................. 402
Creando un servidor de Express ..................................................................................................... 403
Express Verbs ....................................................................................................................................... 405
Método GET .................................................................................................................................... 405
Método POST .................................................................................................................................. 405
Método PUT .................................................................................................................................... 406
Método DELETE............................................................................................................................... 406
Consideraciones adicionales. .......................................................................................................... 406
Implementemos algunos métodos. ................................................................................................ 406
Trabajando con parámetros ................................................................................................................ 410
Query params ................................................................................................................................. 410
URL params ..................................................................................................................................... 411
Body params ................................................................................................................................... 412
Middleware .......................................................................................................................................... 415
Middleware de nivel de aplicación ................................................................................................. 417
Middleware de nivel direccionador ................................................................................................ 417
Middleware de terceros.................................................................................................................. 418
Middleware incorporado ................................................................................................................ 418
Error Handler ....................................................................................................................................... 419
Resumen .............................................................................................................................................. 421

Introducción a MongoDB ................................................................................................................... 422

Porque es importante aprender MongoDB .......................................................................................... 422
El rol de MongoDB en una aplicación .................................................................................................. 424
Instalando MongoDB ........................................................................................................................... 425
Habilitando el acceso por IP............................................................................................................ 429
Instalando Compass, el cliente de MongoDB ................................................................................. 431
Que son los Schemas de Mongoose ............................................................................................... 435
Schemas avanzados ........................................................................................................................ 436
NodeJS y MongoDB .............................................................................................................................. 439
Estableciendo conexión desde NodeJS ........................................................................................... 439
Como funciona MongoDB .................................................................................................................... 441
Que son las Colecciones .................................................................................................................. 442
Que son los Documentos ................................................................................................................ 443
Operaciones básicas con Compass ................................................................................................. 443
Aprender a realizar consultas .............................................................................................................. 449
Filter ................................................................................................................................................ 449
Project ............................................................................................................................................. 460
Sort.................................................................................................................................................. 463
Paginación con Skip y Limit ............................................................................................................. 464

Página | 22
 Schemas del proyecto Mini Twitter ..................................................................................................... 466
Tweet Scheme................................................................................................................................. 466
Profile Scheme ................................................................................................................................ 467
Ejecutar operaciones básicas .......................................................................................................... 469
Resumen .............................................................................................................................................. 476

Desarrollo de API REST con NodeJS .................................................................................................... 477

¿Qué es REST y RESTful? ...................................................................................................................... 477
REST vs SOA ......................................................................................................................................... 478
Preparar nuestro servidor REST ........................................................................................................... 479
Configuración inicial del servidor .................................................................................................... 481
Establecer conexión con MongoDB ................................................................................................ 483
Creando un subdominio para nuestra API ...................................................................................... 484
Desarrollo del API REST ........................................................................................................................ 494
Mejores prácticas para crear URI’s ................................................................................................. 494
Códigos de respuesta ...................................................................................................................... 495
Migrando a nuestra API REST.......................................................................................................... 496
Implementar los servicios REST ............................................................................................................ 496
Antes de comenzar ......................................................................................................................... 496
Servicio - usernameValidate ........................................................................................................... 497
Servicio - Signup .............................................................................................................................. 501
Autenticación con JSON Web Token (JWT) ..................................................................................... 503
Servicio - Login ................................................................................................................................ 506
Servicio - Relogin ............................................................................................................................. 510
Servicio - Consultar los últimos Tweets .......................................................................................... 513
Servicio - Consultar se usuarios sugeridos ...................................................................................... 517
Servicio – Consulta de perfiles de usuario ...................................................................................... 520
Servicio – Consulta de Tweets por usuario ..................................................................................... 524
Servicio – Actualización del perfil de usuario ................................................................................. 527
Servicio – Consulta de personas que sigo ....................................................................................... 529
Servicio – Consulta de seguidores .................................................................................................. 531
Servicio – Seguir .............................................................................................................................. 533
Servicio – Crear un nuevo Tweet .................................................................................................... 536
Servicio – Like.................................................................................................................................. 540
Servicio – Consultar el detalle de un Tweet .................................................................................... 543
Agregando validaciones a los servicios ................................................................................................ 546
Validando el servicio signin ............................................................................................................. 549
Validando el servicio updateProfile ................................................................................................ 551
Validando el servicio updateProfile ................................................................................................ 552
Documentando el API REST.................................................................................................................. 553
Introducción al motor de plantillas Pug .......................................................................................... 553
API home ......................................................................................................................................... 558
Service catalog ................................................................................................................................ 560
Service documentation ................................................................................................................... 565
Algunas observaciones o mejoras al API.............................................................................................. 568
Aprovisionamiento de imágenes .................................................................................................... 568
Guardar la configuración en base de datos .................................................................................... 570
Documentar el API por base de datos ............................................................................................ 570
Resumen .............................................................................................................................................. 571

Producción ......................................................................................................................................... 572

23 | Página
 Producción vs desarrollo ...................................................................................................................... 572
Alta disponibilidad ............................................................................................................................... 573
Cluster ............................................................................................................................................. 573
Puertos ................................................................................................................................................. 578
Comunicación segura........................................................................................................................... 579
Certificados emitidos por autoridades ........................................................................................... 580
Certificados auto firmados .............................................................................................................. 581
Instalando un certificado en nuestro servidor ................................................................................ 582
Habilitar el modo producción .............................................................................................................. 586
Hosting y dominios .............................................................................................................................. 589
Resumen .............................................................................................................................................. 591

CONCLUSIONES FINALES .................................................................................................................... 592

Página | 24
 Por dónde empezar
Capítulo 1

Hoy en día existe una gran cantidad de propuestas para desarrollar aplicaciones
web, y cada lenguaje ofrece sus propios frameworks que prometen ser los
mejores, aunque la verdad es que nada de esto está cercas de la realidad, pues
el mejor framework dependerá de lo que buscas construir y la habilidad que ya
tengas sobre un lenguaje determinado.

Algunas de las propuestas más interesantes para el desarrollo web son, Angular,
Laravel, Vue.JS, Ember.js, Polymer, React.js entre un gran número de etcéteras.
Lo que puede complicar la decisión sobre qué lenguaje, librería o framework
debemos utilizar.

Desde luego, en este libro no tratamos de convencerte de utilizar React, sino más
bien, buscamos enseñarte su potencial para que seas tú mismo quien pueda
tomar esa decisión.

Solo como referencia, me gustaría listarte algunas de las empresas que

actualmente utilizan React, para que puedas ver que no se trata de una librería
para hacer solo trabajos caseros o de baja carga:

• Udemy
• Bitbucket
• Anypoint (MuleSoft)
• Facebook
• Courcera
• Airbnb
• American Express
• Atlassian
• Docker
• Dropbox
• Instagram
• Reddit
• Twitter

25 | Página
Son solo una parte de una inmensa lista de empresas y páginas que utilizan React
como parte medular de sus desarrollos. Puedes ver la lista completa de páginas
que usan React aquí: https://github.com/facebook/react/wiki/sites-using-react.
Esta lista debería ser una evidencia tangible de que React es sin duda una librería
madura y probada.

Un dato que debemos de tener en cuenta, es que React es desarrollado por

Facebook, pero no solo eso, sino que es utilizado realmente por ellos, algo muy
diferente con Angular, que, a pesar de ser mantenido por Google, no es utilizando
por ellos para ningún sitio crítico. Esto demuestra la fe que tiene Facebook sobre
React, pero sobre todo garantiza la constante evolución de esta gran librería.

Página | 26
Introducción a React

React es sin duda una de las tecnologías web más revolucionarias de la

actualidad, pues proporciona todo un mecanismo de desarrollo de aplicaciones
totalmente desacoplado del backend y ejecutado 100% del lado del cliente.

React fue lanzado por primera vez en 2013 por Facebook y es actualmente
mantenido por ellos mismo y la comunidad de código abierto, la cual se extiende
alrededor del mundo. React, a diferencia de muchas tecnologías del desarrollo
web, es una librería, lo que lo hace mucho más fácil de implementar en muchos
desarrollos, ya que se encarga exclusivamente de la interface gráfica del
usuario y consume los datos a través de API que por lo general son REST.
El nombre de React proviene de su capacidad de crear interfaces de usuario
reactivas, la cual es la capacidad de una aplicación para actualizar toda la
interface gráfica en cadena, como si se tratara de una formula en Excel, donde
al cambiar el valor de una celda automáticamente actualiza todas las celdas que
depende del valor actualizado y esto se repite con las celdas que a la vez
dependía de estas últimas. De esta misma forma, React reacciona a los cambios
y actualiza en cascada toda la interface gráfica.

Uno de los datos interesantes de React es que, se ejecutado del lado del
cliente (navegador), y no requiere de peticiones GET para cambiar de una
página a otra, pues toda la aplicación es empaquetada en un solo archivo
JavaScript (bundle.js) que es descargado por el cliente cuando entra por primera
vez a la página. De esta forma, la aplicación solo requerirá del backend para
recuperar y actualizar los datos.

Fig 3 - Comunicación cliente-servidor

React suele ser llamado React.js o ReactJS dado que es una librería de
JavaScript, por lo tanto, el archivo descargable tiene la extensión .js, sin
embargo, el nombre real es simplemente React.

27 | Página
Server Side Apps vs Single Page Apps

Para comprender como trabaja React es necesario entender dos conceptos

claves, los cuales son Server side app (Aplicaciones del lado del servidor) y Single
page app (Aplicaciones de una sola página)

Server side app

Las aplicaciones del lado del servidor, son aquellas en las que el código fuente
de la aplicación está en un servidor y cuando un cliente accede a la aplicación, el
servidor solo le manda el HTML de la página a mostrar en pantalla, de esta
manera, cada vez que el usuario navega hacia una nueva sección de la página,
el navegador lanza una petición GET al servidor y este le regresa la nueva página.

Esto implica que cada vez que el usuario de click en una sección, se tendrá que
comunicar con el servidor para que le regresa la nueva página, creado N
solicitudes GET para N cambios de página. En una página del lado del servidor,
cada petición retorna tanto el HTML para mostrar la página, como los datos que
va a mostrar.

Fig 4 - Server side apps Architecture

Como vemos en la imagen, el cliente lanza un GET para obtener la nueva página,
el servidor tiene que hacer un procesamiento para generar la nueva página y
tiene que ir a la base de datos para obtener la información asociada a la página
de respuesta. La nueva página es enviada al cliente y este solo la muestra en
pantalla. En esta arquitectura todo el trabajo lo hace el servidor y el cliente
solo se limita a mostrar las páginas que el server le envía.

Página | 28
Single page app

Las aplicaciones de una sola página se diferencian de las aplicaciones del lado del
servidor debido a que, gran parte del procesamiento y la generación de las
vistas las realiza directamente el cliente (navegador). Por otro lado, el
servidor solo expone un API mediante el cual, la aplicación puede consumir datos
y realizar operaciones transaccionales.

En este tipo de arquitectura, se libera al servidor de una gran carga, pues no

requiere tener que estar generando vistas para todos los usuarios conectados ni
mantener en memoria todos los datos asociados a la sesión.

Fig 5 - Single page apps Architecture.

Como vemos en esta nueva imagen, el cliente es el encargado de realizar

las vistas y realizar algunos procesamientos, mientras que el servidor solo
expone un API para acceder a los datos.

React es Single page app

Es muy importante resalta que React sigue la

arquitectura de Single page app, por lo que las vistas
son generadas del lado del cliente y solo se comunica
al backend para obtener y guardar datos.

Si bien, React funciona originalmente como SPA, existe técnicas para realizar el
renderizado del lado del servidor, como es el caso de NextJS, un poderos
framework que permite el renderizado del lado del servidor, sin embargo, esto
querá fuera del alcance de este libro.

29 | Página
Introducción a NodeJS

NodeJS es sin duda una de las tecnologías que más rápido está creciendo, y que
ya hoy en día es indispensable para cubrir posiciones de trabajo. NodeJS ha sido
revolucionario en todos los aspectos, desde la forma de trabajar hasta que
ejecuta JavaScript del lado del servidor.

NodeJS es básicamente un entorno de ejecución JavaScript del lado del

servidor. Puede sonar extraño, ¿JavaScript del lado del servidor? ¿Pero que no
JavaScript se ejecuta en el navegador del lado del cliente? Como ya lo platicamos,
JavaScript nace inicialmente en la década de los noventas por los desarrolladores
de Netscape, el cual fue creado para resolver problemas simples como validación
de formularios, alertas y alguna que otra pequeña lógica de programación, nada
complicado, sin embargo, JavaScript ha venido evolucionando hasta convertirse
en un lenguaje de programación completo. NodeJS es creado por Ryan Lienhart
Dahl, quien tuvo la gran idea de tomar el motor de JavaScript de Google Chrome
llamado V8, y montarlo como el Core de NodeJS.

Fig. 1 - Arquitectura de NodeJS

Como puedes ver en la imagen, NodeJS es en realidad el motor de JavaScript V8

con una capa superior de librerías de NodeJS, las cuales se encargan de la
comunicación entre el API de NodeJS y el Motor V8. Adicionalmente, se apoya de
la librería Libuv la cual es utilizada para el procesamiento de entradas y salidas
asíncronas.

Cabe mencionar que NodeJS es Open Source y multiplataforma, lo que le ha

ayudado a ganar terrenos rápidamente.

Que es NodeJS (Según su creador):

Node.js® es un entorno de ejecución para JavaScript construido con el motor de

JavaScript V8 de Chrome. Node.js usa un modelo de operaciones E/S sin bloqueo

Página | 30
y orientado a eventos, que lo hace liviano y eficiente. El ecosistema de paquetes
de Node.js, npm, es el ecosistema más grande de librerías de código abierto en
el mundo.

NodeJS y la arquitectura de Micro Servicios

Cuando hablamos de NodeJS es imposible no hablar de la arquitectura de

Microservicios, ya que es una de las arquitecturas más utilizadas y que están de
moda en la actualidad. La cual consiste en separar una aplicación en pequeños
módulos que corren en contenedores totalmente aislados, en lugar de tener
aplicaciones monolíticas que conglomeran toda la funcionalidad un mismo
proceso.

Fig 6 - Arquitectura monolítica vs Microservices

En una arquitectura monolítica todas las aplicaciones escalan de forma

monolítica, es decir, todos los módulos son replicados en cada nodo, aunque no
se requiera de todo ese poder de procesamiento para un determinado módulo,
en cambio, en una arquitectura de microservicios, los módulos se escalan a como
sea requerido.

Todo esto viene al caso, debido a que NodeJS se ha convertido en unos de los
servidores por excelencia para implementar microservicios, ya que es muy ligero
y puede ser montado en servidores virtuales con muy pocos recursos, algo que
es imposible con servidores de aplicaciones tradiciones como Wildfy, Websphere,
Glashfish, IIS, etc.

31 | Página
Hoy en día es posible rentar un servidor virtual por 5 USD al mes con 1GB de
RAM y montar una aplicación con NodeJS, algo realmente increíble y es por eso
mi insistencia en que NodeJS es una de las tecnologías más prometedoras
actualmente. Por ejemplo, yo suelo utilizar Digital Ocean, pues me permite rentar
servidores desde 5 usd al mes.

Introducción a MongoDB

MongoDB es la base de datos NoSQL líder del marcado, ya que ha demostrado

ser lo bastante madura para dar vida a aplicaciones completas. MongoDB nace
con la idea de crear aplicaciones agiles, que permita realizar cambios a los
modelos de datos si realizar grandes cambios en la aplicación. Esto es gracias a
que permite almacenar su información en documentos en formato BSon (Binary
JSON), el cual es básicamente un JSON enriquecido con una mayor cantidad de
tipo de datos.

Además, MongoDB es escalable, tiene buen rendimiento y permite alta

disponibilidad, escalando de un servidor único a arquitecturas complejas de
centros de datos. MongoDB es mucho más rápido de lo que podrías imaginas,
pues potencia la computación en memoria.

Uno de los principales retos al trabajar con MongoDB es entender cómo funciona
el paradigma NoSQL y abrir la mente para dejar a un lado las tablas y las
columnas, para pasar un nuevo modelo de datos de colecciones y documentos,
los cuales no son más que estructuras de datos en formato JSON.

Actualmente existe una satanización contra MongoDB y de todas las bases de

datos NoSQL en general, ya que los programadores habituales temen salir de su
zona de confort y experimentar con nuevos paradigmas. Esta satanización se
debe en parte a dos grandes causas: el desconocimiento y la incorrecta
implementación. Me explico, el desconocimiento se debe a que los
programadores no logran salir del concepto de tablas y columnas, por lo que no
encuentra la forma de realizar las operaciones que normalmente hacen con una
base de datos tradicional, como es hacer un Join o crear procedimientos
almacenados. Y Finalmente, la incorrecta implementación se debe a que los
programadores inexpertos o ignorantes utilizan MongoDB para solucionar
problemas para los que no fue diseñado, llevando el proyecto directo al fracaso.

Bases de datos Relacionales VS MongoDB

Probablemente lo que más nos cueste entender cuando trabajamos con

MongoDB, es que no utiliza tablas ni columnas, y en su lugar, la información se
almacena en objetos completos en formato BSON, a los que llamamos
documentos. Un documento se utiliza para representar mucha información

Página | 32
contenida en un solo objeto, que, en una base de datos relacional, probablemente
guardaríamos en más de una tabla. Un documento MongoDB suele ser un objeto
muy grande, que se asemejan a un árbol, y dicho árbol suele tener varios niveles
de profundidad, debido a esto, MongoDB NO requiere de realizar joins para
armar toda la información, pues un documento por sí solo, contiene toda la
información requerida, en pocas palabras, MongoDB permite grabar objetos
completos con todo y sus relaciones.

Otros de los aspectos importantes de utilizar documentos es que, no existe una

estructura rígida que nos obligue a crear objetos de una determinada estructura,
a diferencia una base de datos SQL, en la cual, las columnas determinan la
estructura de la información. En MongoDB no existe el concepto de columnas,
por lo que los dos siguientes objetos podrían ser guardados sin restricción alguna:

1. { 6. {
2. "name": "Juan Perez", 7. "name": "Juan Perez",
3. "age": 20, 8. "age": 20,
4. "tel": "1234567890" 9. "tels": [
5. } 10. "1234567890",
11. "0987654321"
12. ]
13. }

Observemos que los dos objetos son relativamente similares, y tiene los mismos
campos, sin embargo, uno tiene un campo para el teléfono, mientras que el
segundo objeto, tiene una lista de teléfonos. Es evidente que aquí tenemos dos
incongruencias con un modelo de bases de datos relacional, el primero, es que
tenemos campos diferentes para el teléfono, ya que uno se llama tel y el otro
tels. La segunda incongruencia es que, la propiedad tels del segundo objeto es
en realidad un arreglo, lo cual en una DB relacional, sería una tabla secundaria
unida con un Foreign Key. El segundo objeto se vería de la siguiente manera
modelado en una DB relacional:

Fig 7 - Modelo relacional (SQL)

Como ya nos podemos dar una idea, en un DB relacional, es necesario tener

estructuras definidas y relacionadas entre sí, mientras que en MongoDB, se
guardan documentos completos, los cuales contiene en sí mismo todas las
relaciones requeridas. Puede sonar algo loco todo esto, pero cuando entremos a
desarrollar nuestra API REST veremos cómo utilizar correctamente MongoDB.

33 | Página
La relación entre React, NodeJs & MongoDB

Hasta este momento, ya hemos hablado de estas tres tecnologías de forma

individual, sin embargo, no hemos analizado como es que estas se combinan
para crear proyectos profesionales.

Resumiendo un poco lo ya platicado, React se encargará de la interfaz

gráfica de usuario (UI) y será la encargada de solicitar información al Backend
a medida que el usuario navega por la página. Por otra parte, tenemos NodeJS,
al cual utilizaremos para programar la lógica de negocio y la comunicación con
la base de datos, mediante NodeJS expondremos un API REST que luego React
consumirá. Finalmente, MongoDB es la base de datos en donde almacenamos
la información.

Fig 8 - MERN Stack

Como vemos en la imagen, React está del lado del FrontEnd, lo que significa que
su único rol es la representación de los datos y la apariencia gráfica. En el
BackEnd tenemos a NodeJS, quien es el intermediario entre React y MongoDB.
MongoDB también está en el Backend, pero este no suele ser accedido de forma
directa por temas de seguridad.

Cuando una serie de tecnologías es utilizada en conjunto, se le llama Stack, el

cual hace referencia a todas las tecnologías implementadas. A lo largo de este
libro, utilizaremos el Stack MERN, el cual es el acrónimo de MongoDB, Express,
React & NodeJS, aunque estas tecnologías suelen acompañarse con Webpack y
Redux.

Página | 34
Resumen

En este capítulo hemos dado un vistazo rápido a la historia de JavaScript y como

es que ha evolucionado hasta convertirse en un lenguaje de programación
completo. De la misma forma, hemos analizado como es que JavaScript es la
base para tecnologías tan importantes como React y NodeJS.

También hemos analizado de forma rápida a React, NodeJS y MongoDB para

dejar claro los conceptos y como es que estas 3 tecnologías se acoplan para dar
soluciones de software robustas.

Por ahora no te preocupes si algún concepto no quedo claro o no entiendes como

es que estas 3 tecnologías se combinan, ya que más adelante entraremos mucho
más a detalle.

35 | Página