Ejercicio de programación con React: Estado local con useState y useReducer

Código
Puntuación
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.
Empezar ejercicio de programación

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.

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

React

Estado local con useState y useReducer

Servicios y gestión de estado

Otros tutoriales de programación con React