Prefacio
React se ha consolidado como una fuerza a tener en cuenta en el mundo frontend en los últimos años, y es difícil imaginar un mundo sin él como una de las tres grandes soluciones junto con Angular y Vue. Para mí, React representa una forma de desarrollo liviana y flexible que, sin embargo, es altamente profesional. Te da un alto grado de libertad al crear y diseñar tu aplicación. Esto es a la vez una maldición y una bendición. Especialmente para los principiantes, ese es el punto donde se vuelve difícil: ¿Por dónde debo empezar? ¿Cómo estructuro mi aplicación? ¿Cómo resuelvo problemas específicos? ¿Qué bibliotecas y herramientas necesito para desarrollar mi aplicación? Estas son solo algunas preguntas que debes hacerte al comenzar tu viaje con React, y ahí es donde entra en juego este libro. Juntos implementaremos una aplicación completa que cubra numerosos problemas de la práctica diaria. En el proceso, aprenderás no solo sobre React en sí, sino también sobre partes del ecosistema alrededor de la biblioteca. Tanto si estás empezando a utilizar React como si ya tienes experiencia con él, me gustaría invitarte a que utilices este libro como una oportunidad para trabajar activamente con React. Utiliza los ejemplos de código, amplíalos o crea tus propias aplicaciones. Intenta implementar diferentes requisitos e inspírate con los ejemplos de código y los enfoques para tus propias soluciones. No hay mejor estrategia para profundizar en un tema que utilizar la tecnología o la herramienta tú mismo, incluso cometiendo un error de vez en cuando y aprendiendo de ello.
Para trabajar con este libro, debes tener un conocimiento básico sólido de HTML, CSS y JavaScript. Si no estás seguro en algún momento o te preguntas qué hace exactamente un elemento del lenguaje en particular, te recomiendo la Red de desarrolladores de Mozilla en https://developer.mozilla.org. Esta es una referencia completa y actualizada para todas las tecnologías web. Si prefieres trabajar con libros, te recomiendo JavaScript: The Comprehensive Guide de Phillip Ackermann. De lo contrario, te recomiendo que seas curioso y pruebes cosas. Pregúntate: ¿Qué sucede si hago esto o aquello en este punto específico? Pruébalo, abre las herramientas de desarrollo de tu navegador y observa los efectos de tu experimento. La ventaja del desarrollo web frontend es que no puedes romper nada más en tu aplicación excepto el frontend, y también puedes mantenerlo al mínimo usando un sistema de control de versiones como Git, ya que siempre puedes revertir a un estado funcional. Además de estos experimentos, también debes intentar desarrollar la aplicación de muestra de forma independiente o crear tu propia aplicación.
Este libro está diseñado tanto para que empieces a usar React como para que sirva de referencia para el uso diario. Puedes seguir los ejemplos escribiendo el código fuente tú mismo o descargar el código y personalizarlo como quieras. Lo único que realmente importa para mí es que empieces a usar React tú mismo, conozcas la biblioteca y sus capacidades, y te diviertas mucho haciéndolo.
Una de las preguntas más frecuentes relacionadas con las bibliotecas y los frameworks de JavaScript es cuál es el mejor. Por supuesto, React es una buena opción a la hora de implementar un frontend web. Sin embargo, otras soluciones como Angular, Vue, Svelte y muchas más no son peores en absoluto. Trate de tomar su propia decisión en este punto y dé una oportunidad a los diferentes enfoques. Para mí, React ha demostrado su eficacia en la práctica tanto en proyectos pequeños como grandes.
Esta segunda edición refleja la evolución de React y el ecosistema que rodea a la biblioteca. Además, se ha incorporado una gran cantidad de comentarios de los lectores de la primera edición. De este modo, el libro ya no se basa en un ejemplo continuo y, hacia el final del libro, muy extenso, sino en aplicaciones de muestra más pequeñas. Aunque todas ellas tratan el tema de la gestión de libros, no se complementan entre sí de forma lineal.
Antes de presentarte brevemente la estructura de este libro, me gustaría darte una pista: el mundo de los frameworks y bibliotecas de JavaScript avanza muy rápido, por lo que te darás cuenta de que los números de versión y, en cierta medida, las características de las bibliotecas presentadas aquí cambiarán. Es por eso que en este libro también te proporciono información de fondo sobre conceptos y patrones de arquitectura que te permitirán adaptarte a los cambios y ponerte al día muy rápidamente con las nuevas características y bibliotecas.
Estructura del libro
El libro consta de dos partes y está dividido en un total de 21 capítulos. La primera parte del libro trata sobre React en sí, mientras que la segunda parte destaca el ecosistema de la biblioteca con diversos problemas del trabajo diario en proyectos.
La primera parte comienza con una introducción a React, explicando los principios básicos y los términos y conceptos más importantes (Capítulo 1), seguido de una explicación de cómo instalar y usar React (Capítulo 2). Luego aprenderá a usar los componentes de React en el Capítulo 3 y el Capítulo 4. Esto implica construir el árbol de componentes de su aplicación, el flujo de datos en este árbol y la forma en que funciona el ciclo de vida de un componente. Conceptos más avanzados como componentes de orden superior y propiedades de renderizado complementan estos conceptos básicos. En el Capítulo 5, presentaré los componentes de clase ahora obsoletos. La razón principal de esto es que siempre encontrará este tipo de componente en las aplicaciones existentes. El Capítulo 6 está dedicado a la API Hooks, una extensión de React que afecta significativamente la forma en que se construye una aplicación. En el Capítulo 7, aprenderá sobre TypeScript, una herramienta que lo apoya en la implementación y brinda seguridad adicional en el proceso de desarrollo.
React admite diferentes enfoques en lo que respecta a la aplicación de estilos a los componentes. El Capítulo 8 presenta algunos de estos enfoques y muestra cómo integrarlos en su aplicación. Otra herramienta relacionada con el control de calidad de una aplicación se trata en el Capítulo 9, que trata sobre la formulación de pruebas unitarias. El Capítulo 10 concluye la primera parte del libro con un vistazo a los formularios. Mediante formularios, puede brindarles a sus usuarios la oportunidad de interactuar activamente con una aplicación y producir datos.
La segunda parte del libro comienza con un capítulo sobre la integración de bibliotecas de componentes externos (Capítulo 11). Usando Material UI como ejemplo, verás cómo puedes integrar componentes existentes en tu aplicación. En el Capítulo 12, aprenderás cómo usar el enrutador React para navegar dentro de tu aplicación de una sola página y usarlo para renderizar diferentes subárboles de tu aplicación. El Capítulo 13 trata sobre las bibliotecas de componentes qustom. Este es un tema importante cuando se trata de reutilizar componentes en diferentes aplicaciones. El Capítulo 14 y el Capítulo 15 tratan sobre la administración centralizada de estados en una aplicación con la biblioteca Redux y sobre el manejo de efectos secundarios con varias implementaciones de middleware asincrónico como Redux-Thunk.
En el Capítulo 16, aprenderá a direccionar una interfaz GraphQL en su aplicación React. Este lenguaje de consulta proporciona una alternativa flexible a las interfaces RESTful tradicionales que se usan comúnmente en el desarrollo web. El Capítulo 17 integra react-i18next, otra biblioteca externa, en la aplicación para respaldar la internacionalización. Aquí aprenderá más sobre el manejo de números y valores de fecha, además de la traducción pura de cadenas.
Los últimos tres capítulos tratan sobre los diferentes entornos a los que se aplica una aplicación React. El Capítulo 18 comienza con una introducción a la renderización del lado del servidor para mejorar el rendimiento de una aplicación. En este capítulo, también conocerá el popular marco de trabajo de React, Next.js. El Capítulo 19 está dedicado a varios aspectos del rendimiento de las aplicaciones React. Luego, aprenderá a usar React para implementar una aplicación web progresiva que se pueda instalar en los sistemas de los usuarios y ejecutar en tantos sistemas como sea posible (Capítulo 20). El concepto de React en diferentes sistemas se lleva un paso más allá en el capítulo final, el Capítulo 21, con un enfoque en React Native. Aprenderá a usar esta biblioteca para implementar aplicaciones nativas a través de React.
Descargar los ejemplos de código
Todos los ejemplos de código de este libro están disponibles para su descarga desde el sitio web del editor en https://www.sap-press.com/react_5705/.
Agradecimientos
Me gustaría agradecer a todas las personas que me ayudaron a escribir este libro. En primer lugar, a Philip, quien una vez más se encargó de la reseña de uno de mis libros y aportó muchos comentarios y sugerencias.
Un gran agradecimiento también a Friederike Daenecke por el pulido lingüístico.
También me gustaría agradecer a todo el equipo de Rheinwerk Publishing y especialmente a Patricia Schiewald por su apoyo.
Finalmente, estoy muy agradecido a mi esposa Alexandra por toda su paciencia y apoyo.