En la plantilla que se os facilita aparece una un documento HTML de ejemplo (después deberás borrar o comentar las líneas que aparecen) para que veais que elementos teneis que crear y con qué clase para que quede correctamente estilado.

Se trata de crear una lista donde se vean las personas que están actualmente en la plantilla de la empresa DWEC. Para la obtención de los datos, utilizaremos la API de JsonPlaceholder:

• Utilizaremos la parte de usuarios que nos proporciona (solo hay 10 usuarios, así que nuestra plantilla comienza con 10 trabajadores).

• Se mostrará el nombre, el email y el teléfono de cada usuario como se muestra en la imagen de ejemplo.

Tendréis que utilizar un mínimo de 3 componentes (podéis utilizar más si los veis oportuno y razonable).Podéis utilizar los hooks que hemos visto en la teoría ( si creeis oportuno utilizar alguno que no se ha visto podéis hacerlo).

El botón que aparece al lado de cada trabajador sirve para despedir fulminantemente a esa persona de la empresa. Cuando despidamos a esa persona, deberemos actualizar la lista y el número de empleados que aparece en el título superior.

• Cuando os descarguéis la plantilla, ejecutar “npm i” para instalar las dependencias del proyecto.

• Podéis utilizar y guiaros con las estructura de ficheros e imports que utiliza un proyecto de vite de prueba.

• Los nombres de los componentes los decidís vosotros mismos.

Para la entrega de esta tarea tendréis que subir el proyecto a alguna plataforma (github, gitlab, …) para que yo pueda descargarla ya que por tema del tamaño del proyecto no podremos subirlo a la plataforma moodle. Nombrar al repositorio con la nomenclatura habitual.

Apellido1_Apellido2_Nombre_DWEC04_Tarea01

Utilizar los comentarios de código para realizar breves explicaciones. En caso de necesitar/querer explicar más en detalle el ejercicio utilizar la plantilla e ir adjuntando capturas de pantalla del código y las explicaciones y aclaraciones necesarias .