Ejercicios Prácticos con React

Descripción

Las webs actuales exigen aplicaciones eficientes en tiempo real y escalabilidad. Si ya tiene conocimientos básicos sobre la creación de aplicaciones web, JavaScript y Node.js, y quiere ir más allá, ha llegado al libro indicado. Con él aprenderá a crear aplicaciones rápidas y de alto rendimiento con React.

Gracias a este manual se sumergirá directamente en los conceptos más importantes de React y aprenderá a trabajar con las últimas características de ECMAScript. Asimismo, conocerá los fundamentos de Redux, descubrirá cómo implementar animaciones, aprenderá a crear una API con Node.js, Firebase y GraphQL, y a mejorar el rendimiento de sus aplicaciones con Webpack 4.

Además, encontrará ejercicios para implementar el renderizado del lado del servidor, añadir pruebas unitarias y hacer depuraciones, así como prácticas para implementar una aplicación de React en producción. Por último, aprenderá a generar aplicaciones para móviles nativas para iOS y Android desde React Native.

Al finalizar el libro, reducirá los errores en sus pruebas y se convertirá en todo un experto en React.

Contenidos del libro:

o Desarrollar la capacidad de tratar temas complejos como Redux, Webpack y el renderizado del lado del servidor
o Implementar una API desde Node.js, Firebase y GraphQL
o Aumentar el rendimiento de las aplicaciones de React
o Crear aplicaciones para móviles desde React Native
o Implementar una aplicación de React en DigitalOcean
o Conocer las mejores prácticas para organizar y probar aplicaciones de React

Prefacio xv
Capítulo 1: Uso de React 1
Introducción 1
Uso de React con las últimas características de JS 2
Cómo hacerlo… 2
¿Qué novedades hay en React? 9
Cómo hacerlo… 9
Utilización de React en Windows 12
Cómo hacerlo… 12
Capítulo 2: Cómo dominar los componentes y JSX 15
Introducción 15
Creación del primer componente de React 15
Preparación 16
Cómo hacerlo… 16
Cómo funciona… 18
Hay más… 19
La organización de aplicaciones de React 19
Cómo hacerlo… 19
Cómo funciona… 22
Estilización de componentes con clases CSS y estilos en línea 22
Cómo hacerlo… 22
Cómo funciona… 26
Hay más… 26
Paso de props a componentes y su validación con PropTypes 29
Cómo hacerlo… 29
Cómo funciona… 33
Hay más… 34
Uso del estado local en componentes 34
Cómo hacerlo… 35
Cómo funciona… 39
Hay más… 39
Creación de componentes funcionales o apátridas 39
Cómo hacerlo… 40
Cómo funciona… 43
Hay más… 43
Asimilación de los métodos de ciclo de vida de React 44
Cómo hacerlo… 44
Lista de tareas, implementación de ComponentWillMount
El temporizador Pomodoro, implementación del constructor
y de componentDidMount
Cambiador de criptomonedas, implementación de
shouldComponentUpdate
Notas, implementación de componentWillReceiveProps
y de componentWillUnmount 82
Gráficos C3.js, implementación de componentDidUpdate 84
Animación básica, implementación de componentWillUpdate 89
Cómo funciona… 92
Asimilación de los componentes puros de React 92
Preparación 92
Cómo hacerlo… 93
Cómo funciona… 96
Prevención de vulnerabilidades de XSS en React 101
Cómo hacerlo… 101
Cómo funciona… 113
Hay más… 114
Capítulo 3: Tratamiento de eventos, vinculación y paquetes
de React útiles 115
Introducción 115
Métodos vinculantes usando constructores en lugar
de funciones flecha 115
Cómo hacerlo… 116
Cómo funciona… 121
Creación de elementos de formularios con eventos 121
Cómo hacerlo… 122
Cómo funciona… 135
Hay más… 136
Visualización de información en una ventana modal con react-popup 137
Preparación 137
Cómo hacerlo… 138
Cómo funciona… 140
Hay más… 141
Implementación con la guía de estilo de Airbnb React/JSX 141
Preparación 141
Cómo hacerlo… 143
Cómo funciona… 148
Hay más… 150
Actualización de títulos y etiquetas meta con React Helmet 151
Preparación 151
Cómo hacerlo… 152
Cómo funciona… 153
Hay más… 154
Capítulo 4: Adición de rutas a aplicaciones con React Router 155
Introducción 155
Implementación de React Router v4 155
Preparación 155
Cómo hacerlo… 156
Cómo funciona… 163
Hay más… 164
Adición de parámetros a las rutas 164
Cómo hacerlo… 165
Cómo funciona… 170
Capítulo 5: Dominio de Redux 175
Introducción 175
Creación de Store en Redux 179
Preparación 180
Cómo hacerlo… 180
Cómo funciona… 183
Elaboración de creadores de acciones y envío de acciones 185
Preparación 185
Cómo hacerlo… 185
Cómo funciona… 195
Implementación de Firebase con Redux 197
Preparación 197
Cómo hacerlo… 207
Cómo funciona… 218
Capítulo 6: Creación de formularios con Redux Form 225
Introducción 225
Creación de formularios controlados mediante el estado local 225
Preparación 225
Cómo hacerlo… 226
Cómo funciona… 233
Creación de formularios utilizando Redux Form 233
Preparación 235
Cómo hacerlo… 234
Cómo funciona… 238
Implementación de la validación en formularios 239
Cómo hacerlo… 239
Cómo funciona… 241
Capítulo 7: Animaciones con React 243
Introducción 243
Animación de una lista de tareas con ReactCSSTransitionGroup 243
Preparación 244
Cómo hacerlo… 244
Cómo funciona… 248
Uso de la biblioteca react-animations 250
Preparación 250
Cómo hacerlo… 250
Hay más… 252
Creación de la primera animación con React Pose 252
Preparación 252
Cómo hacerlo… 253
Cómo funciona… 257
Hay más… 260
Capítulo 8: Creación de API con Node.js haciendo uso
de MongoDB y MySQL 263
Introducción 263
Creación de API básicas con Express 264
Preparación 264
Cómo hacerlo… 266
Cómo funciona… 273
Elaboración de bases de datos con MongoDB 275
Preparación 275
Instalación de MongoDB Community Edition
manualmente (opción difícil)
Instalación de MongoDB Community Edition
con Homebrew (opción fácil)
Ejecución de MongoDB 277
Cómo hacerlo… 278
Cómo funciona… 285
Puntos finales del método GET 286
Puntos finales del método POST 289
Puntos finales del método DELETE 291
Puntos finales del método PUT 293
Elaboración de una base de datos con MySQL 295
Preparación 295
Cómo hacerlo… 295
Cómo funciona… 306
Puntos finales del método POST 306
Puntos finales del método GET 308
Puntos finales del método DELETE 310
Puntos finales del método PUT 312
Adición de tokens de acceso para proteger las API 313
Preparación 314
Cómo hacerlo… 314
Cómo funciona… 319
Hay más… 323
Capítulo 9: Apollo y GraphQL 325
Introducción 325
Creación del primer servidor GraphQL 326
Preparación 326
Cómo hacerlo… 326
Cómo funciona… 330
Hay más… 333
Creación de líneas de tiempo de Twitter con Apollo y GraphQL 336
Preparación 336
Creación de un servidor back-end GraphQL 337
Cómo hacerlo… 345
Cómo funciona… 360
Capítulo 10: Dominio de Webpack 4.x 365
Introducción 365
Configuración de Webpack 4 Zero 365
Preparación 366
Cómo hacerlo… 366
Cómo funciona… 368
Hay más… 370
Adición de React a Webpack 4 372
Preparación 372
Cómo hacerlo… 372
Cómo funciona… 376
Hay más… 378
Adición de Webpack Dev Server y Sass, Stylus o LessCSS a React 380
Preparación 381
Cómo hacerlo… 381
Cómo funciona… 386
Hay más… 386
Optimización de Webpack 4, división de paquetes 389
Preparación 390
Cómo hacerlo… 390
Cómo funciona… 392
Implementación de Node.js con React/Redux y Webpack 4 396
Preparación 396
Cómo hacerlo… 397
Cómo funciona… 406
Hay más… 409
Capítulo 11: Implementación de renderizado del lado del servidor 413
Introducción 413
Implementación del renderizado del lado del servidor 414
Preparación 414
Cómo hacerlo… 415
Cómo funciona… 427
Hay más… 429
Implementación de promises con renderizado del lado del servidor 430
Preparación 430
Cómo hacerlo… 430
Cómo funciona… 440
Implementación de Next.js 442
Preparación 442
Cómo hacerlo… 442
Cómo funciona… 450
Capítulo 12: Pruebas y depuración 453
Introducción 453
Prueba del primer componente con Jest y Enzyme 454
Preparación 454
Cómo hacerlo… 454
Como funciona… 459
Hay más… 460
Prueba de un contenedor Redux, acciones y reductores 462
Preparación 463
Cómo hacerlo… 463
Depuración de aplicaciones de React utilizando Dev Tools
de React y Redux 469
Preparación 470
Cómo hacerlo… 471
Simulación de eventos 473
Cómo hacerlo… 473
Cómo funciona… 477
Capítulo 13: Despliegue en la fase de producción 479
Introducción 479
Implementación en producción con Digital Ocean 479
Preparación 480
Cómo hacerlo… 481
Cómo funciona… 487
Hay más… 490
Configuración de Nginx, PM2 y un dominio en Droplet 491
Preparación 491
Cómo hacerlo… 492
Cómo funciona… 493
Hay más… 494
Implementación de Jenkins (integración continua) 497
Preparación 497
Cómo hacerlo… 497
Cómo funciona… 511
Capítulo 14: Uso de React Native 517
Introducción 517
Creación de la primera aplicación de React Native 518
Preparación 518
Cómo hacerlo… 518
Cómo funciona… 525
Creación de una lista de tareas con React Native 531
Cómo hacerlo… 531
Cómo funciona… 535
Hay más… 540
Implementación de React Navigation V2 541
Preparación 542
Como hacerlo… 542
Cómo funciona… 547
Preguntas más frecuentes sobre React 551