- -
- 100%
- +
Nota aclaratoria: los códigos de ejemplo que se pueden encontrar en el libro se han desarrollado usando las versiones de software y librerías más actuales en el momento de la publicación del mismo, pero, como sabe, el software es algo que está en constante evolución y esto puede haber variado desde su fecha de publicación. Por este motivo existe la posibilidad que, de manera puntual, la sintaxis de algún ejemplo pueda variar.
Copyright © Packt Publishing Ltd. 2018. First published in the English language under the title React Cookbook (9781783980727).
Primera edición original publicada en inglés por Packt Publishing Ltd. con el título:
React Cookbook, © 2018 Carlos Santana Roldán
Título de la edición en español: Ejercicios prácticos con React
Primera edición en español, año 2020
© 2020 MARCOMBO, S.L. www.marcombo.comTraducción: Francisco Martínez Carreno
Correctora: Nuria Barroso
Directora de producción: M.a Rosa Castillo
Los códigos de ejemplo que se pueden encontrar en el libro se han desarrollado usando las versiones de software y librerías más actuales en el momento de la publicación del mismo, pero, como sabe, el software es algo que está en constante evolución, y estas pueden haber variado desde su fecha de publicación. Por este motivo existe la posibilidad que, de manera puntual, la sintaxis de algún ejemplo pueda variar.
Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra solo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra.
ISBN: 978-84-267-2867-8
Producción del ebook: booqlab.com
A la memoria de mis abuelas, María Concepción Carrillo y Ana María Ochoa, a mi madre, Thelma C. Roldán, y a mi padre Francisco Santana, por sus sacrificios y por dar ejemplo de la importancia de la determinación y la dedicación.
Carlos Santana Roldán
Sobre el autor
Carlos Santana Roldán es desarrollador web senior con más de 11 años de experiencia. Actualmente, ocupa la jefatura técnica de React Technical Lead en Disney ABC Television Group. Es el fundador de Codejobs.com, una de las comunidades de desarrolladores más populares de América Latina, y se ocupa de la capacitación de personal en tecnologías web tales como React, Node.js y JavaScript.
Me gustaría expresar mi más profundo aprecio y especial gratitud a todas las personas del equipo editorial de Packt que me han ayudado en la realización de este libro, especialmente a Francis Savio Carneiro, Larissa Pinto y Diksha Wakode.
También me gustaría agradecer a Adrian Aguirre y Tony Guerrero la ayuda que me han prestado con el libro. Finalmente, quiero expresar mi más profundo agradecimiento a mi esposa, Cristina Rojas, por su apoyo; a mis padres, Francisco Santana y Thelma Roldán por su estímulo en mi desarrollo profesional y a mis amigos y familiares que me han ayudado a dar a conocer el libro.
Sobre el experto en revisión
Mayur Tanna es consultor senior de TI y es empleado de CIGNEX Datamatics. Ha trabajado en varios proyectos importantes con clientes internacionales como el Banco Mundial y Naciones Unidas, y ha desempeñado un papel clave en la creación de la arquitectura de los citados proyectos utilizando las últimas tecnologías, entre las que se incluyen React, Angular, Node.js, MongoDB, Spring Boot, Firebase, Amazon Web Services y Google Cloud Platform. Mayur es coautor del libro Serverless Web Applications with React and Firebase. Tiene el título de maestría en aplicaciones informáticas y ha entrenado a muchos estudiantes de ingeniería por medio de talleres tecnológicos. En su tiempo libre, juega al tenis de mesa y al críquet.
Quiero agradecer a mi esposa, la doctora Purna, a mis padres, Ratilal y Nirmala, a mi hijo pequeño, Dhyey, y al resto de mi familia, que me han apoyado y animado a pesar de todo el tiempo en el que no he podido disfrutar de su compañía. Sin su apoyo, la revisión de este libro no habría sido posible. También me gustaría agradecer al equipo de Packt que me haya dado la oportunidad de revisar este libro.
Prefacio
Capítulo 1: Uso de React
Introducción
Uso de React con las últimas características de JS
Cómo hacerlo...
¿Qué novedades hay en React?
Cómo hacerlo...
Utilización de React en Windows
Cómo hacerlo...
Capítulo 2: Cómo dominar los componentes y JSX
Introducción
Creación del primer componente de React
Preparación
Cómo hacerlo...
Cómo funciona...
Hay más...
La organización de aplicaciones de React
Cómo hacerlo...
Cómo funciona...
Estilización de componentes con clases CSS y estilos en línea
Cómo hacerlo...
Cómo funciona...
Hay más...
Paso de props a componentes y su validación con PropTypes
Cómo hacerlo...
Cómo funciona...
Hay más...
Uso del estado local en componentes
Cómo hacerlo...
Cómo funciona...
Hay más...
Creación de componentes funcionales o apátridas
Cómo hacerlo...
Cómo funciona...
Hay más...
Asimilación de los métodos de ciclo de vida de React
Cómo hacerlo...
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
Gráficos C3.js, implementación de componentDidUpdate
Animación básica, implementación de componentWillUpdate
Cómo funciona...
Asimilación de los componentes puros de React
Preparación
Cómo hacerlo…
Cómo funciona…
Prevención de vulnerabilidades de XSS en React
Cómo hacerlo...
Cómo funciona...
Hay más...
Capítulo 3: Tratamiento de eventos, vinculación y paquetes de React útiles
Introducción
Métodos vinculantes usando constructores en lugar de funciones flecha
Cómo hacerlo...
Cómo funciona...
Creación de elementos de formularios con eventos
Cómo hacerlo...
Cómo funciona...
Hay más...
Visualización de información en una ventana modal con react-popup
Preparación
Cómo hacerlo...
Cómo funciona...
Hay más...
Implementación con la guía de estilo de Airbnb React/JSX
Preparación
Cómo hacerlo...
Cómo funciona...
Hay más...
Actualización de títulos y etiquetas meta con React Helmet
Preparación
Cómo hacerlo...
Cómo funciona...
Hay más...
Capítulo 4: Adición de rutas a aplicaciones con React Router
Introducción
Implementación de React Router v4
Preparación
Cómo hacerlo...
Cómo funciona...
Hay más...
Adición de parámetros a las rutas
Cómo hacerlo...
Cómo funciona...
Capítulo 5: Dominio de Redux
Introducción
Creación de Store en Redux
Preparación
Cómo hacerlo...
Cómo funciona...
Elaboración de creadores de acciones y envío de acciones
Preparación
Cómo hacerlo...
Cómo funciona...
Implementación de Firebase con Redux
Preparación
Cómo hacerlo...
Cómo funciona...
Capítulo 6: Creación de formularios con Redux Form
Introducción
Creación de formularios controlados mediante el estado local
Preparación
Cómo hacerlo...
Cómo funciona...
Creación de formularios utilizando Redux Form
Preparación
Cómo hacerlo...
Cómo funciona...
Implementación de la validación en formularios
Cómo hacerlo...
Cómo funciona...
Capítulo 7: Animaciones con React
Introducción
Animación de una lista de tareas con ReactCSSTransitionGroup
Preparación
Cómo hacerlo...
Cómo funciona...
Uso de la biblioteca react-animations
Preparación
Cómo hacerlo...
Hay más...
Creación de la primera animación con React Pose
Preparación
Cómo hacerlo...
Cómo funciona...
Hay más...
Capítulo 8: Creación de API con Node.js haciendo uso de MongoDB y MySQL
Introducción
Creación de API básicas con Express
Preparación
Cómo hacerlo...
Cómo funciona...
Elaboración de bases de datos con MongoDB
Preparación
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
Cómo hacerlo...
Cómo funciona...
Puntos finales del método GET
Puntos finales del método POST
Puntos finales del método DELETE
Puntos finales del método PUT
Elaboración de una base de datos con MySQL
Preparación
Cómo hacerlo...
Cómo funciona...
Puntos finales del método POST
Puntos finales del método GET
Puntos finales del método DELETE
Puntos finales del método PUT
Adición de tokens de acceso para proteger las API
Preparación
Cómo hacerlo...
Cómo funciona...
Hay más...
Capítulo 9: Apollo y GraphQL
Introducción
Creación del primer servidor GraphQL
Preparación
Cómo hacerlo...
Cómo funciona...
Hay más...
Creación de líneas de tiempo de Twitter con Apollo y GraphQL
Preparación
Creación de un servidor back-end GraphQL
Cómo hacerlo...
Cómo funciona...
Capítulo 10: Dominio de Webpack 4.x
Introducción
Configuración de Webpack 4 Zero
Preparación
Cómo hacerlo...
Cómo funciona...
Hay más...
Adición de React a Webpack
Preparación
Cómo hacerlo...
Cómo funciona...
Hay más...
Adición de Webpack Dev Server y Sass, Stylus o LessCSS a React
Preparación
Cómo hacerlo...
Cómo funciona...
Hay más...
Optimización de Webpack 4, división de paquetes
Preparación
Cómo hacerlo...
Cómo funciona...
Implementación de Node.js con React/Redux y Webpack 4
Preparación
Cómo hacerlo...
Cómo funciona...
Hay más...
Capítulo 11: Implementación de renderizado del lado del servidor
Introducción
Implementación del renderizado del lado del servidor
Preparación
Cómo hacerlo...
Cómo funciona...
Hay más...
Implementación de promises con renderizado del lado del servidor
Preparación
Cómo hacerlo...
Cómo funciona...
Implementación de Next.js
Preparación
Cómo hacerlo...
Cómo funciona...
Capítulo 12: Pruebas y depuración
Introducción
Prueba del primer componente con Jest y Enzyme
Preparación
Cómo hacerlo...
Como funciona...
Hay más...
Prueba de un contenedor Redux, acciones y reductores
Preparación
Cómo hacerlo...
Depuración de aplicaciones de React utilizando Dev Tools de React y Redux
Preparación
Cómo hacerlo...
Simulación de eventos
Cómo hacerlo...
Cómo funciona...
Capítulo 13: Despliegue en la fase de producción
Introducción
Implementación en producción con Digital Ocean
Preparación
Cómo hacerlo...
Cómo funciona...
Hay más...
Configuración de Nginx, PM2 y un dominio en Droplet
Preparación
Cómo hacerlo...
Cómo funciona...
Hay más...
Implementación de Jenkins (integración continua)
Preparación
Cómo hacerlo...
Cómo funciona...
Capítulo 14: Uso de React Native
Introducción
Creación de la primera aplicación de React Native
Preparación
Cómo hacerlo...
Cómo funciona...
Creación de una lista de tareas con React Native
Cómo hacerlo...
Cómo funciona...
Hay más...
Implementación de React Navigation V2
Preparación
Como hacerlo...
Cómo funciona...
Preguntas más frecuentes sobre React
Prefacio
Hoy en día existen toneladas de bibliotecas JavaScript, frameworks y herramientas para el desarrollo web. Sin embargo, debe evaluar cada tecnología para saber si se ajusta a los requisitos de nuestro proyecto. Este es el motivo de presentar React, una de las bibliotecas más capaces para la creación de interfaces de usuario dinámicas. Actualmente es la biblioteca más extendida (no es un framework) hecha por Facebook. He trabajado con otros frameworks JS como AngularJS (también con las nuevas versiones Angular 2, 4, 5), Backbone.js, Ember, y Vue.js en diferentes proyectos y puedo afirmar que React es la biblioteca con la que más disfruto a la hora de desarrollar nuevas aplicaciones web.
React ha cambiado la forma de desarrollar aplicaciones web y, en combinación con Redux, se consigue una potente arquitectura front-end que tiene sentido no solo para los desarrolladores experimentados, sino también para aquellos que están iniciando su viaje por el front-end.
El libro presenta todas las herramientas y las mejores prácticas de React en recetas sencillas y fáciles de seguir. Todas las recetas del libro son 100 % prácticas y cada una tiene el código necesario para entender lo más importante.
Bienvenido a un futuro mejor; diviértase y aprenda con la lectura de este libro.
A quién va dirigido este libro
Este libro lo pueden utilizar desarrolladores que tengan conocimientos básicos sobre la creación de aplicaciones web. Pero está especialmente indicado para desarrolladores de JavaScript, aunque no pone límite a cualesquiera otros tipos de desarrollos.
De lo que trata este libro
Capítulo 1, Uso de React. React es una biblioteca JavaScript (con licencia del MIT) hecha por Facebook para desarrollar interfaces de usuario interactivas. Se utiliza para crear componentes dinámicos y reutilizables. Lo más importante de React es que se puede utilizar como cliente, como servidor, en aplicaciones móviles e incluso en aplicaciones RV.
Capítulo 2, Cómo dominar los componentes y JSX. Este capítulo contiene recetas relacionadas con la creación de componentes en React. Va a aprender a crear componentes de React (componentes de clase, componentes puros y componentes funcionales) y a organizar la estructura de su proyecto.
Capítulo 3, Gestión de eventos, vinculación y paquetes de React útiles. Este capítulo contiene recetas relacionadas con la gestión de eventos, métodos vinculantes en React, y también va a implementar algunos de los paquetes más útiles de React.
Capítulo 4, Adición de rutas a aplicaciones con React Router. En este capítulo, va a aprender a añadir rutas dinámicas a los proyectos usando React Router v4.
Capítulo 5, Dominio de Redux. Redux es un contenedor de estados predecibles para aplicaciones JavaScript. Esto significa que Redux se puede utilizar con Vanilla JavaScript o con frameworks/bibliotecas como Angular y jQuery. Redux es principalmente una biblioteca encargada de emitir actualizaciones de estados y respuestas a acciones.
Capítulo 6, Creación de formularios con Redux Form. Los formularios son una parte fundamental de cualquier aplicación web, y en las siguientes recetas va a aprender a usar formularios con y sin Redux Form.
Capítulo 7, Animaciones con React. Las animaciones son muy frecuentes en cualquier aplicación web. Desde la aparición de CSS3, las animaciones se han generalizado y se implementan con facilidad. El uso más habitual de las animaciones es el de las transiciones, en las que se pueden cambiar las propiedades CSS y definir la duración o el retardo.
Capítulo 8, Creación de API con Node.js utilizando MongoDB y MySQL. Node.js se utiliza ampliamente como back-end para aplicaciones web porque facilita la creación de API, y su rendimiento es superior al de tecnologías como Java, PHP y Ruby. Habitualmente, la forma más extendida de usar Node.js es utilizar un framework llamado Express.
Capítulo 9, Apollo y GraphQL. GraphQL es un lenguaje de consulta de la capa de aplicación que se puede utilizar con cualquier base de datos, también es de código abierto (licencia del MIT) y desarrollado por Facebook. La principal diferencia con REST es que GraphQL no utiliza puntos finales sino consultas, y es compatible con la mayoría de los lenguajes de servidor como JavaScript (Node.js), Go, Ruby, PHP, Java, Python, etc.
Capítulo 10, Dominio de Webpack 4.x. Webpack 4 no necesita un archivo de configuración por defecto. Antes, en las versiones más antiguas, había que tener un archivo de configuración, pero por supuesto, si necesita personalizar Webpack 4 por necesidades del proyecto, puede crear un archivo de configuración y será mucho más fácil de programar.
Capítulo 11, Implementación para la renderización del lado del servidor. Probablemente, si no le interesa demasiado el SEO, no tiene que preocuparse por la renderización del lado del servidor (SSR). Actualmente, Googlebot soporta Client Side Rendering (CSR), y puede indexar su sitio en Google, pero si le interesa el SEO y le preocupa mejorarlo en otros buscadores como Yahoo, Bing o DuckDuckGo, entonces la mejor opción es usar la renderización del lado del servidor (SSR).
Capítulo 12, Pruebas y depuración. Las pruebas y la depuración son muy importantes para cualquier proyecto que quiera ofrecer una calidad óptima. Desgraciadamente, muchos desarrolladores no se preocupan por las pruebas (pruebas unitarias) porque piensan que reducirán la velocidad del desarrollo y algunos de ellos lo dejan para el final del proyecto. En lo que respecta a mi experiencia personal, puedo decir que las pruebas desde el principio del proyecto ahorrarán tiempo porque al final tendrá que corregir un menor número de errores.
Capítulo 13, Despliegue para la fase de producción. Ahora es el momento de hacer el despliegue de su aplicación para producción y mostrarla al mundo. En este capítulo, aprenderá cómo implementar la aplicación de React utilizando uno de los mejores servicios de la nube: Digital Ocean.
Capítulo 14, Uso de React Native. React Native es un framework para crear aplicaciones para móviles usando JavaScript y React. Muchas personas piensan que con React Native se desarrolla una "aplicación web para móviles" o una "aplicación híbrida" (como Ionic, PhoneGap o Sencha) pero lo que se crea es una aplicación nativa porque React Native convierte el código de React a Java para aplicaciones Android y a Objective-C para aplicaciones iOS.
Cómo sacar el máximo partido a este libro
Para dominar React, es necesario tener un conocimiento fundamental de JavaScript y Node.js. Este libro se dirige principalmente a desarrolladores web, y en el momento de escribirlo, se consideraron las siguientes suposiciones en relación con el lector:
• El lector sabe cómo instalar la última versión de Node.js.
• Es un desarrollador de tipo medio que puede entender la sintaxis de JavaScript ES6.
• Tiene poca experiencia con las herramientas CLI y la sintaxis de Node.js.
El libro también incluye contenido para desarrolladores de móviles (iOS y Android) y usa React Native. Si usted es un principiante debería aprender a instalar Android SDK o el simulador de iOS con Xcode.
Descarga de los archivos con ejemplos de código
Para la descarga de los archivos siga los siguientes pasos:
1. Entre en www.marcombo.info.
2. Introduzca el código REACT1.
3. Rellene las casillas con su nombre, email y acepte la política de privacidad.
4. Busque el código REACT1 en el listado.
Una vez descargado el archivo, asegúrese de descomprimir o extraer la carpeta utilizando la última versión de:
• WinRAR/7-Zip para Windows
• Zipeg/iZip/UnRarX para Mac
• 7-Zip/PeaZip para Linux
Los códigos que se utilizan en el libro están también alojados en GitHub, en https://github.com/PacktPublishing/React-Cookbook. Si se produce una actualización de los códigos, estos se actualizarán en el repositorio existente en GitHub.