React

Sincronización de LocalStorage con React en Next.js

Objetivo del sistemaEl objetivo principal era evitar que los datos de los héroes desaparecieran cada vez que el usuario recargaba la página.Sin un sistema de persistencia, la aplicación siempre empezaría desde cero, perdiendo cualquier modificación realizada.Por eso implementamos un flujo donde:La primera vez se cargan los datos iniciales.Se guardan en el navegador.En futuras visitas, se recuperan automáticamente.Arquitectura de la soluciónPara conseguir una solución limpia y escalable, se separó la lógica en dos partes:1. Hook personalizado (useHeroes)Se encarga de:Gestionar el estado de la aplicación.Decidir de dónde vienen los datos.Conectar React con la lógica de…continue reading →

Guía Paso a Paso: Caché Distribuida con Redis en ASP.NET y React

En el desarrollo de portales web modernos —especialmente aquellos con una alta carga visual e información estática como portales de turismo o catálogos— la velocidad de carga es crucial para la experiencia del usuario (UX) y el posicionamiento SEO. Consultar repetidamente una base de datos para obtener información que apenas varía ralentiza la aplicación y eleva innecesariamente los costes en la nube. Para entenderlo de forma sencilla: imagina que trabajas en una biblioteca. Cada vez que un usuario te pide un mapa de Madrid, tienes que levantarte, ir al almacén del fondo, buscarlo…continue reading →

Construyendo un CV Interactivo: Arquitectura, lógica y diseño.

Si eres desarrollador, te propongo que diseñes tu propio CV interactivo. Te hará diferenciarte del resto de profesionales. Además en él podrás ir subiendo actualizaciones de nuevos proyectos, formación y nuevos certificaciones adquiridas. En este vídeo tutorial os hablo de las ventajas y desventajas. Os muestro mi proyecto terminado y una breve introducción de como he diseñado el código del mismo. Además que herramientas he utilizado para su despliegue. Por otra parte en esta publicación aprovecho para extenderme más y enseñaros todos los pasos que he realizado para crear este proyecto y finalmente…continue reading →

La librería RxJS: Reactive Extensions for JavaScript

El Problema En el desarrollo de aplicaciones web modernas, uno de los mayores retos es manejar flujos de datos en tiempo real, como puede ser una aplicación de mensajería instantánea, eventos de usuario, actualizaciones de una API... Con el uso tradicional de promesas anidadas, callbacks, estados múltiples, la complejidad del código aumenta de forma no sostenible. Es por esto que se utiliza la librería RxJS (Reactive Extensions for JavaScript). Puntos Importantes ¿Qué es RxJS?: RxJS es una librería que implementa el paradigma de programación reactiva en JavaScript. Permite trabajar con observables, que son…continue reading →

Entendiendo Stateful Components en React: Un Viaje Práctico con Tareas Pendientes

https://youtu.be/odY_Ta7dhL0 Introducción En React, uno de los conceptos fundamentales que debemos entender es el de "Componentes con Estado" o "Stateful Components". Este concepto se refiere a componentes de React que tienen la capacidad de mantener y gestionar su propio estado interno. ¿Pero qué significa exactamente esto y por qué es tan crucial para el desarrollo de aplicaciones dinámicas y receptivas? Se explorara este concepto a través de un ejemplo con una aplicación de gestión de tareas. ¿Qué son los "Stateful Components"? React se basa en la construcción de interfaces de usuario mediante componentes,…continue reading →