4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills
Difficulty
beginnerRepository
Click to openVideo
Not available
Live demo
Not available
Average duration
8 hrs
Technologies
This exercise is meant to be completed after the TODO list react application because the first part its the perfect boilerplate to start using API's.
For this second part, we will sync our todo list with a real database, using the following RESTful and public API made for this exercise.
🔗 Click here to access to the TODO-list API documentation.
This whole exercise is about asynchronous programming because the interactions from
and to
the server need to be done async. That way the user does not have to wait for the information to arrive.
Do not clone this repository.
The first step to start coding is cloning the react boilerplate on your local computer or gitpod.
a) If using Gitpod you can clone the boilerplate by clicking here.
b) If working locally type the following command from your command line: $ git clone https://github.com/4GeeksAcademy/react-hello
.
💡 Important: Remember to create a new repository, update the remote (git remote set-url origin <your new url>
), and upload the code to your new repository using add
, commit
and push
.
There are 3 critical moments in the application timeline (a.k.a. The runtime) to focus on your integration:
Use the following fetch call to synchronize your tasks with the server every time there is a change on the list.
1fetch('https://assets.breatheco.de/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); // will be true if the response is successfull 10 console.log(resp.status); // the status code = 200 or code = 400 etc. 11 console.log(resp.text()); // will try return the exact result as string 12 return resp.json(); // (returns promise) will try to parse the result as json as return a promise that you can .then for results 13 }) 14 .then(data => { 15 //here is were your code should start after the fetch finishes 16 console.log(data); //this will print on the console the exact object received from the server 17 }) 18 .catch(error => { 19 //error handling 20 console.log(error); 21 });
For any other request, you have to keep changing the same variables on the fetch: The URL, the method and the payload.
4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills
Difficulty
beginnerRepository
Click to openVideo
Not available
Live demo
Not available
Average duration
8 hrs
Technologies