Aplicación de Todolist usando React y Fetch

Segunda parte de la TODO List, agregando fetch

Debes hacer este ejercicio después de la aplicación de la TODO list con React porque la primera parte es el boilerplate perfecto para comenzar a usar APIs.

Para esta segunda parte, sincronizaremos nuestra lista de tareas con una base de datos real, usando la siguiente API RESTful y API pública realizada para este ejercicio.

🔗 Clic aquí para acceder a la documentación de la API del TODO-list.

👉 Aqui hay un video explicando como usar el TODO-List API con Fetch.

Todo este ejercicio se trata de la programación asíncrona porque las interacciones desde y hacia el servidor deben realizarse de forma asíncrona. De esa manera, el usuario no tiene que esperar a que llegue la información.

1https://github.com/4GeeksAcademy/react-hello

📝 Instrucciones:

1. Haz que tu TODO List se sincronice con la API de backend cada vez que se agregue o elimine una tarea.
2. Agregue un botón de limpieza de todas las tareas que eliminará toda la lista del servidor y actualizará la lista vacía en el front-end.

👉 Momentos clave para la integración:

1. Cargar tareas al iniciar (useEffect)

   • Usa el método GET especificado en la documentación para obtener la lista y actualiza el estado que guarda la lista de tareas.

2. Agregar una tarea.

   • Usa el método POST especificado en la documentación para añadir una nueva tarea y luego, usa GET para actualizar la lista de tareas.

3. Eliminar una tarea

   • Usa el método DELETE para eliminar una tarea y luego GET para actualizar la lista.

4. Asegúrate de crear un usuario antes de añadir tareas.

💡 Pista:

Utiliza el siguiente fetch call para crear una nueva tarea en el servidor. Recuerda crearte un usuario primero.

1fetch('https://playground.4geeks.com/todo/todos/alesanchezr', {
2      method: "POST",
3      body: JSON.stringify(task),
4      headers: {
5        "Content-Type": "application/json"
6      }
7    })
8    .then(resp => {
9        console.log(resp.ok); // Será true si la respuesta es exitosa
10        console.log(resp.status); // El código de estado 201, 300, 400, etc.
11        return resp.json(); // Intentará parsear el resultado a JSON y retornará una promesa donde puedes usar .then para seguir con la lógica
12    })
13    .then(data => {
14        // Aquí es donde debe comenzar tu código después de que finalice la búsqueda
15        console.log(data); // Esto imprimirá en la consola el objeto exacto recibido del servidor
16    })
17    .catch(error => {
18        // Manejo de errores
19        console.log(error);
20    });

⚠️ Para cualquier otra solicitud, debes cambiar las variables en el fetch: La URL, el método y el payload.

Este y otros proyectos son usados para aprender a programar por parte de los alumnos de 4Geeks Academy Coding Bootcamp realizado por Alejandro Sánchez y muchos otros contribuyentes. Conoce más sobre nuestros Cursos de Programación para convertirte en Full Stack Developer, o nuestro Data Science Bootcamp.