Ejercicio de programación con React: Estado y ciclo de vida de los componentes
Código
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:
- El componente debe llamarse
ListaTareas
. - Debe utilizar el hook
useState
para manejar el estado de una lista de tareas. - Debe tener un formulario con un input de texto y un botón para añadir nuevas tareas.
- Al añadir una nueva tarea, debe actualizar la lista de tareas y mostrar un mensaje en la consola.
- Debe utilizar el hook
useEffect
para gestionar un efecto secundario que se ejecute cada vez que se añada una nueva tarea. - El efecto secundario debe mostrar un mensaje en la consola indicando que una nueva tarea ha sido añadida.
- El
useEffect
debe retornar una función de limpieza que muestre un mensaje en la consola cuando el componente se desmonte.
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
Puzzle
Definición y manejo de rutas
Puzzle
Conocimiento general de React
Test
Galería de imágenes en React
Proyecto
Eventos en React
Código
Gestor de tareas con React
Proyecto
Custom Hooks para servicios compartidos
Test
Nuevos métodos create de React Router
Código
Solicitudes HTTP con Fetch API
Test
Instalar React y crear nuevo proyecto
Puzzle
Renderizado condicional
Código
Introducción a JSX
Código
Manejo de clases y estilos
Puzzle
Introducción a React Router
Test
Solicitudes HTTP con Axios
Puzzle
Estado local con useState y useReducer
Código
Estado global con Redux Toolkit
Código
Hooks para gestión de estado complejo y contexto
Código
Componentes funcionales
Código
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 y ciclo de vida de los componentes
Hooks