1.4 Una mirada al universo React

React es una biblioteca especializada para crear interfaces gráficas en frontends web. A diferencia de los frameworks con todas las funciones (como Angular), estas bibliotecas cubren solo un aspecto específico de una aplicación. Cuanto más extensa sea una aplicación, más bibliotecas adicionales se deben incluir para acelerar el desarrollo y mantener el código fuente manejable. En las siguientes secciones, presentaremos brevemente algunas de las bibliotecas más importantes del universo React. A lo largo de este libro, conocerá estas herramientas con mayor detalle.

1.4.1 Gestión del Estado

Una de las formas arquitectónicas más populares de las grandes aplicaciones React es la arquitectura flux, que permite desacoplar la presentación del estado y la lógica empresarial. Una implementación concreta de la arquitectura flux es la biblioteca redux. En esencia, redux proporciona un almacén central para almacenar la información de la aplicación. Los datos del almacén se pueden leer, pero no escribir directamente. Aquí hay que tomar un desvío a través de las llamadas acciones. Estos son objetos JavaScript simples que describen los cambios. Son recibidos por funciones reductoras, que a su vez pueden modificar el almacén. Para obtener más información sobre la gestión centralizada del estado y redux, consulte el Capítulo 14.

1.4.2 El Router

Si la aplicación tiene varias vistas, cambiar entre ellas puede llevar mucho tiempo y generar un código desordenado en la aplicación. Una solución que también está disponible en la mayoría de los demás frameworks frontend es el routing. Esta función se refiere a una extensión que se puede utilizar para insertar árboles de componentes según la URL seleccionada. En el caso del enrutador React, se puede utilizar la API de historial del navegador.

Además de simplemente navegar entre árboles de componentes, el enrutador admite otras funciones, como variables en la URL a las que puede acceder en los componentes o rutas anidadas.

1.4.3 Material UI

En la web se pueden encontrar numerosas recomendaciones de diseño. Una de las más utilizadas es Material Design de Google. Para que no tengas que implementar tú mismo los elementos individuales, el paquete Material UI es una colección de componentes que implementa las recomendaciones de Material Design. La colección de componentes incluye no solo componentes estándar como botones o campos de entrada, sino también componentes más amplios como cuadros de diálogo, tablas de datos o menús.

1.4.4 Jest

Meta ha desarrollado Jest, un framework de pruebas que, si bien no está directamente vinculado a React, es ideal para su uso con la biblioteca. De forma predeterminada, Jest no requiere ninguna configuración adicional y ejecuta las pruebas en un entorno simulado en lugar de en el navegador. Este hecho también garantiza que las pruebas se ejecuten mucho más rápido en comparación con otros frameworks (como Jasmine en combinación con Karma).

Otra característica notable de Jest es la prueba de instantáneas, que le permite crear una representación estática de un componente y usarlo como base para la comparación.