Demo: https://ironptsolutions.github.io/react-list-use-effect-lab/
En esta primera iteración, trabajaremos con react-router-dom (ya instalado en el proyecto). El objetivo es crear una página llamada Home, que será accesible desde la ruta /.
Simplemente muestra un texto lorem ipsum en la página Home.
La página que acabamos de construir, junto con las próximas que crearemos, no respetan los márgenes de CSS. En esta iteración, crearemos un componente llamado PageLayout que solucionará este problema.
📂 Ubicación: components/layouts/page-layout
- Usa un contenedor de Bootstrap para definir el diseño.
- Establece los márgenes necesarios.
En esta iteración, trabajaremos con el listado de contactos ubicado en data/users.json. Si tienes curiosidad, puedes generar nuevos usuarios ejecutando el comando npm run build-users. Para entender cómo funciona, revisa las instrucciones en el package.json.
- ContactList: será responsable de gestionar el estado de los contactos.
- ContactItem: representará cada contacto individual.
Tareas:
- Usa el hook
useEffectenContactListpara cargar la lista de contactos desdedata/users.json. - Enfócate en implementar la lógica y funcionalidad. No te preocupes demasiado por el diseño en esta etapa; ya habrá tiempo para eso.
Añade un botón al componente ContactItem que permita eliminar un contacto de la lista.
Nota: Recuerda que el estado de la lista de contactos está gestionado por el componente ContactList.
En esta última iteración, agrega un campo de entrada en la página Home. El texto ingresado en este input deberá filtrar la lista de contactos en tiempo real, mostrando únicamente aquellos cuyo nombre coincida con el filtro.