Ejercicio de programación con React: Estado y ciclo de vida de los componentes

Código
Puntuación
0h 20m

Ejercicio de React de código para crear y gestionar el ciclo de vida de componentes React y su estado, imprescindible para desarrollo de Frontend con React.

Crea un componente funcional en React que muestre una lista de tareas y permita añadir nuevas tareas. 

Utiliza useState para manejar el estado de las tareas y useEffect para realizar un efecto secundario que muestre un mensaje en la consola cuando se añada una nueva tarea. 

Además, implementa una limpieza en el efecto para mostrar un mensaje cuando el componente se desmonte.

Instrucciones a seguir:

  1. El componente debe llamarse ListaTareas.
  2. Debe utilizar el hook useState para manejar el estado de una lista de tareas.
  3. Debe tener un formulario con un input de texto y un botón para añadir nuevas tareas.
  4. Al añadir una nueva tarea, debe actualizar la lista de tareas y mostrar un mensaje en la consola.
  5. Debe utilizar el hook useEffect para gestionar un efecto secundario que se ejecute cada vez que se añada una nueva tarea.
  6. El efecto secundario debe mostrar un mensaje en la consola indicando que una nueva tarea ha sido añadida.
  7. El useEffect debe retornar una función de limpieza que muestre un mensaje en la consola cuando el componente se desmonte.
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 y ciclo de vida de los componentes

Hooks

Otros tutoriales de programación con React