Title: Actividad 19: Implementación de FETCH dentro de useEffect en React
Course: 2025 - LI - Desarrollo Web del Lado del Servidor 2-2 > Section: Unidad III - Framework de Desarrollo del Lado del Cliente

1) Objetivo

Que el estudiante practique el consumo de una API utilizando fetch dentro del hook useEffect, almacenando la información en un estado y mostrando los datos en pantalla mediante map.

2) Instrucciones

1. Crea un proyecto de React (puede ser con Vite o Create React App).
2. Dentro del proyecto, crea un componente llamado UsersTable.jsx.
3. En este componente deberás:
  - Declarar un estado llamado users usando useState([]).
  - Implementar un useEffect que se ejecute solo una vez al montar el componente.
  - Dentro del useEffect:
    1. Define una función async llamada fetchUsers.
    2. Usa fetch para obtener datos de la API:
https://jsonplaceholder.typicode.com/users
    3. Convierte la respuesta a JSON con await response.json().
    4. Guarda la información en el estado usando setUsers.
    5. Maneja posibles errores con un try/catch.
  - Una vez guardados los datos, utiliza .map() para mostrarlos en una tabla HTML, con mínimo estas columnas:
    - ID
    - Nombre
    - Usuario
    - Email
4. Asegúrate de que la tabla muestre los datos correctamente en el navegador.
5. Toma un screenshot donde se vea:
  - El código del useEffect con el fetch.
  - La tabla renderizada en el navegador.
6. Exporta el screenshot en un PDF.
7. Sube el PDF como evidencia.

3) Método de entrega

Subir un PDF con el screenshot solicitado.

1) Objetivo

Que el estudiante practique el consumo de una API utilizando fetch dentro del hook useEffect, almacenando la información en un estado y mostrando los datos en pantalla mediante map.

2) Instrucciones

1. Crea un proyecto de React (puede ser con Vite o Create React App).
2. Dentro del proyecto, crea un componente llamado UsersTable.jsx.
3. En este componente deberás:
  - Declarar un estado llamado users usando useState([]).
  - Implementar un useEffect que se ejecute solo una vez al montar el componente.
  - Dentro del useEffect:
    1. Define una función async llamada fetchUsers.
    2. Usa fetch para obtener datos de la API:
https://jsonplaceholder.typicode.com/users
    3. Convierte la respuesta a JSON con await response.json().
    4. Guarda la información en el estado usando setUsers.
    5. Maneja posibles errores con un try/catch.
  - Una vez guardados los datos, utiliza .map() para mostrarlos en una tabla HTML, con mínimo estas columnas:
    - ID
    - Nombre
    - Usuario
    - Email
4. Asegúrate de que la tabla muestre los datos correctamente en el navegador.
5. Toma un screenshot donde se vea:
  - El código del useEffect con el fetch.
  - La tabla renderizada en el navegador.
6. Exporta el screenshot en un PDF.
7. Sube el PDF como evidencia.

3) Método de entrega

Subir un PDF con el screenshot solicitado.