Kitabı oxu: «Ejercicios prácticos con React»

Şrift:

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.

Primera edición original publicada en inglés por Packt Publishing Ltd. con el título:

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.com

Traducció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.

Contenido

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.

Las advertencias o notas importantes se indican así.

Los consejos y trucos se indican así.

Contacte con nosotros

Los comentarios de nuestros lectores son siempre bien recibidos.

Comentarios generales. Si quiere preguntar sobre algún aspecto del libro, por favor, entre en www.marcombo.com/contacto.

Erratas. A pesar de que se han tomado todas las precauciones para asegurar la fiabilidad del contenido, puede haber errores. Si ha encontrado algún error en el libro, le agradeceríamos que nos lo comunique. Por favor, envíe un correo a editorial@marcombo.com.

Piratería. Si se encuentra con copias ilegales de nuestros trabajos en cualquiera de sus formas en Internet, le agradeceríamos que nos proporcione la dirección de la ubicación o el nombre del sitio web.

Por favor, contacte con nosotros en pedidos@marcombo.com indicando el enlace al material pirateado.

Si está interesado en convertirse en autor. Si hay un tema en el que es experto y está interesado en escribir o colaborar en la elaboración de un libro, por favor visite www.marcombo.com.

Reseñas

Por favor, escriba una reseña. Una vez que haya leído y utilizado este libro, ¿por qué no dejar una reseña en el sitio en el que lo compró? Los lectores potenciales podrán leer su opinión imparcial y tenerla en cuenta a la hora de decidir sobre la compra del libro. A nosotros nos permite saber lo que piensa de nuestros productos, y nuestros autores pueden ver sus comentarios sobre su libro. ¡Gracias!