About us

Learning library

For all the self-taught geeks out there, here our content library with most of the learning materials we have produces throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Machine Learning Engineering (16 weeks)

Full-Stack Software Developer

Search from all Lessons

Social & live learning

The most efficient way to learn: Join a cohort with classmates just like you, live streams, impromptu coding sessions, live tutorials with real experts, and stay motivated.

From zero to getting paid as a developer, learn the skills of today and tomorrow. Boost your professional career and be hired by a technology company.

Start Coding

โ† Back to Projects

Todolist Application Using React and Fetch

Goal

4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills

Difficulty

beginner

Repository

Click to open

Video

Not available

Live demo

Not available

Average duration

8 hrs

Technologies

Second Part of the TODO list, adding fetch

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.

๐ŸŒฑ How to start this project

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.

๐Ÿ“ Instructions:

  • Make your to-do list sync with the backend API every time a task is added or deleted.
  • Add a clean all tasks button that will delete the entire list from the server and update the empty list on the front-end.

There are 3 critical moments in the application timeline (a.k.a. The runtime) to focus on your integration:

  • After the list loads empty for the first time (componentDidMount): you should fetch (GET) the data from the API and update the tasks when the information finally arrives.
  • When a new task is added: You should PUT the new list on the server.
  • When a task is deleted: You should PUT the new list on the server.

๐Ÿ’ก Hint

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.

Goal

4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills

Difficulty

beginner

Repository

Click to open

Video

Not available

Live demo

Not available

Average duration

8 hrs