Ejercicio de programación con React: Estado local con useState y useReducer
0h 25m
React estado local: gestiona lista de favoritos usando useState y useReducer. Aprende useState y useReducer con este ejercicio de programación en React.
Deberás construir un componente funcional en React para la gestión de una lista de artículos favoritos, usando los hooks useState
y useReducer
. Este reto se centra en comprender cómo React gestiona el estado local y aplicar diferentes hooks para mejorar la estructura y funcionalidad del código. A partir de este contexto, el componente debe permitir al usuario agregar, eliminar y marcar como leídos los artículos de la lista.
Primero, useState
se encargará de manejar el texto del nuevo artículo a añadir. Luego, se usará useReducer
para gestionar la lista de artículos con las operaciones de añadir, eliminar y marcar/desmarcar como leído. Cada artículo debe tener un identificador único, un título, y un estado booleano que indica si ha sido leído.
Requisitos
- Usa
useState
para manejar el estado del texto del nuevo artículo a añadir. - Usa
useReducer
para manejar las acciones relacionadas con la lista de artículos, como añadir, eliminar y marcar como leído. - Muestra la lista de artículos, indicando cuáles han sido marcados como leídos.
- Proporciona botones para cada acción (añadir, eliminar, marcar como leído).
Detalles adicionales
- Cada artículo debe tener un identificador único, un título y un estado de leído (booleano).
- Asegúrate de que las actualizaciones del estado no muten directamente el estado anterior.
- No es necesario crear estilos CSS, céntrate en la funcionalidad.
Todos los ejercicios de programación de React
Evalúa tus conocimientos con ejercicios de programación en React de tipo Test, Puzzle, Código y Proyecto con VSCode.
Props y manejo de datos entre componentes
Definición y manejo de rutas
Conocimiento general de React
Galería de imágenes en React
Eventos en React
Gestor de tareas con React
Custom Hooks para servicios compartidos
Nuevos métodos create de React Router
Solicitudes HTTP con Fetch API
Instalar React y crear nuevo proyecto
Renderizado condicional
Introducción a JSX
Manejo de clases y estilos
Introducción a React Router
Solicitudes HTTP con Axios
Estado global con Redux Toolkit
Estado y ciclo de vida de los componentes
Hooks para gestión de estado complejo y contexto
Componentes funcionales
Certificados de superación de React
Supera todos los retos de React y obtén estos certificados de superación para mejorar tu currículum y tu empleabilidad.
Tutorial para resolver este ejercicio de programación
React
Estado local con useState y useReducer
Servicios y gestión de estado