Domina tu Arquitectura y Utiliza los Frameworks como Herramientas - React

"React te brinda mucha flexibilidad y lo único que se requiere es pensar en componentes."
 --Pete Hunt


Finalizamos nuestro viaje de exploración por los diferentes frameworks para construir aplicaciones web con React.

React es una librería de JavaScript que facilita la creación de aplicaciones de una sola página, un concepto ya abordado al hablar de Angular. En React, desarrollamos componentes que gestionan su propio estado y que, a su vez, son las que se muestran en la aplicación.

Al igual que en otros frameworks revisados, React combina HTML con JavaScript para lograr el aspecto dinámico de la aplicación. En React a esta combinación de HTML y JavaScript se le llama JSX (JavaScript XML). 

Para transferir datos entre componentes, React utiliza el hook useState, mientras que useEffect se emplea para realizar operaciones cuando un componente se carga por primera vez.

Ejemplos de Código

JSX para mostrar la lista de tipos de usuario:


Hook useEffect para cargar información:

En el código lo que se hace es obtener la información de estado del usuario, al momento de cargar la componente, para posteriormente mostrarla.

React, a diferencia de Angular, se centra en la capa de vista o presentación, y no sigue el patrón MVC. Esta especialización permite un desarrollo más rápido, ya que los desarrolladores solo se concentran en la interfaz de usuario.

Conexión con la Arquitectura

Para integrar React con la arquitectura limpia, se usaron los mismos servicios REST desarrollados para Angular, pero consumidos mediante la función fetch.


Al final, se logró que la aplicación React mantuviera el mismo look and feel que con los otros frameworks, y se aplicaron los siguientes conceptos:
  • Intercomunicación entre componentes mediante useState.
  • Uso de componentes de terceros, como Slider, la versión para React del Slider de Slick utilizado en otros frameworks.
  • Obtención de datos vía fetch.
  • Carga de información inicial con useEffect.
  • Codificación en JSX 

El trabajo hecho en los otros Frameworks aportó a la construcción de la aplicación en React y en este caso:

  • Se reutilizó aproximadamente el 40% del código HTML, eliminando el código específico de Angular y aplicando JSX.
  • Se reutilizó completamente el proyecto Web API de servicios REST creado para Angular.

Conexión con la Arquitectura Establecida

La integración de React con la arquitectura establecida se muestra a continuación: 

En el esquema se puede apreciar:

  • La aplicación React del lado del cliente. Se muestra como las componentes escritas en JavaScript con JSX, se conectan mediante HTTPS al servicio REST Web API permitiendo así obtener o enviar la información requerida por la aplicación.
  • Servicios REST Web API del lado del servidor: Es aquí donde se integra la arquitectura limpia en la aplicación. Y como se ve en el esquema: el componente Main actúa como el punto de entrada de la Web API construida, y es en esta componente donde se hace la inyección de dependencias y por ello es que se muestra que tiene dependencia con varias componentes. Este componente Main corresponde a los archivos Program.cs y Startup.cs. (en .NET 8 solo se usa el Program.cs). 
Aquí está el video de la aplicación construida con React:


Para ver la conclusión de este recorrido da click aquí o utiliza los enlaces de abajo para navegar por las diferentes secciones de este artículo.

Inicio Razor MVC Blazor Angular Conclusión