Aplicación de Todolist usando React y Fetch

Debes hacer este ejercicio después de la aplicación de la TODO List porque la primera parte es el boilerplate perfecto para comenzar a usar API's.

Para esta segunda parte, sincronizaremos nuestra lista de tareas con una base de datos real, usando la siguiente 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 TodoList API con Fetch.

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

🌱 Cómo comenzar este proyecto

No clones este repositorio porque vamos a usar una plantilla diferente.

Recomendamos abrir el react boilerplate usando una herramienta de aprovisionamiento como Codespaces (recomendado) o Gitpod. Alternativamente, puedes clonarlo en tu computadora local usando el comando git clone.

Este es el repositorio que necesitas abrir o clonar:

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

👉 Por favor sigue estos pasos cómo comenzar un proyecto de codificación.

💡 Importante: Recuerda guardar y subir tu código a GitHub creando un nuevo repositorio, actualizando el remoto (git remote set-url origin <your new url>) y subiendo el código a tu nuevo repositorio usando los comandos add, commit y push desde la terminal de git.

📝 Instrucciones:

• Haz que tu TODO List se sincronice con la API de backend cada vez que se agregue o elimine una tarea.
• 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.

Hay 3 momentos críticos en la línea de tiempo de la aplicación (denominado tiempo de ejecución) para centrarse en su integración:

• Después de que la lista se carga vacía por primera vez (componentDidMount): debes obtener (GET) los datos de la API y actualizar las tareas cuando la información finalmente llegue.
• Cuando se agrega una nueva tarea: debes PONER (PUT) la nueva lista en el servidor.
• Cuando se elimina una tarea: Debes PONER (PUT) la nueva lista en el servidor.

💡 Pista

Utiliza la siguiente fetch call para sincronizar tus tareas con el servidor cada vez que haya un cambio en la lista.

1fetch('https://playground.4geeks.com/apis/fake/todos/user/alesanchezr', {
2      method: "PUT",
3      body: JSON.stringify(todos),
4      headers: {
5        "Content-Type": "application/json"
6      }
7    })
8    .then(resp => {
9        console.log(resp.ok); // Será true (verdad) si la respuesta es exitosa.
10        console.log(resp.status); // el código de estado = 200 o código = 400 etc.
11        console.log(resp.text()); // Intentará devolver el resultado exacto como cadena (string)
12        return resp.json(); // (regresa una promesa) will try to parse the result as json as return a promise that you can .then for results
13    })
14    .then(data => {
15        //Aquí es donde debe comenzar tu código después de que finalice la búsqueda
16        console.log(data); //esto imprimirá en la consola el objeto exacto recibido del servidor
17    })
18    .catch(error => {
19        //manejo de errores
20        console.log(error);
21    });

Para cualquier otra solicitud, debes seguir cambiando las variables en el fetch:El URL, el método y el payload (carga útil).

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 Curso de Programación para convertirte en Full Stack Developer, o nuestro Data Science Bootcamp.