React con Persistencia en LocalStorage

 En esta guía, aprenderemos a crear una aplicación en React que permita manejar usuarios y listas dinámicas, almacenando los datos en LocalStorage para mantener la información incluso después de recargar la página.

¿Qué es LocalStorage?

LocalStorage es una API del navegador que permite almacenar información de manera persistente en el dispositivo del usuario. Los datos permanecen guardados incluso después de cerrar el navegador, puedes encontrar mayor información en el blog dedicado a local storage aquí.

1. Configuración de la Aplicación en App.jsx

En este blog realizaremos un ejemplo de persistencia de datos con listas dinámicas, empezando por asegurar que el usuario "admin@correo.com" se cree automáticamente si no existe. Recordar que esto es una simulación y no es buena práctica almacenar datos sensibles en LocalStorage.

¿Qué hace este código?

• Usa useEffect para crear automáticamente un usuario "admin" si aún no existe.
• Los datos se almacenan en LocalStorage y permanecen guardados tras recargar la página.
• Define las rutas de la aplicación, incluyendo TaskList y Registro.

2. Registro de Usuarios con Register.jsx

Este componente permite que los usuarios se registren y almacena sus datos en LocalStorage.

¿Qué hace este código?

• Guarda usuarios en LocalStorage.
• Evita registros duplicados verificando si el correo ya existe.
• Redirige a la página de Login después del registro exitoso.

3. Inicio de Sesión con  Login.jsx

El siguiente código permite a los usuarios iniciar sesión, verificando las credenciales almacenadas en LocalStorage.

¿Qué hace este código?

• Comprueba si el usuario existe en LocalStorage.
• Si las credenciales son correctas, lo redirige según su rol (admin o productos).
• Almacena el usuario autenticado en LocalStorage.

Hemos aprendido a:  

• Manejar listas dinámicas en React.
• Utilizar localstorage para persistir usuarios y credenciales.
• Crear un sistema básico de autenticación sin backend.

Actividad Práctica: Crear una Lista de Productos con React y LocalStorage 

1. Configurar la Aplicación en React

Cada estudiante debe crear un componente ProductList.jsx que permita agregar, eliminar y mostrar productos almacenados en LocalStorage.

2. Código Base del Componente ProductList.jsx

Este código servirá como punto de partida para la actividad:

3. Estilos en ProductList.css

Para mejorar la presentación, los estudiantes deben incluir estilos en ProductList. aquí un ejemplo del css:

4. Agregar la Ruta en App.jsx

Para que la funcionalidad sea accesible en la aplicación, los estudiantes deben agregar una nueva ruta en App.jsx, a continuación hay un ejemplo del código.

📢 Extensión de la Actividad.

💡 Añadir precios y descripciones a los productos.

💡 Implementar un botón para limpiar toda la lista de productos.

💡 Crear una sección para mostrar el total de productos agregados.

💬 ¿Tienes dudas o sugerencias? Déjalas en los comentarios.