Transcript

Kent C. Dodds: 0:00 Web applications wouldn't be all that interesting if you couldn't interact with a backend for requesting and posting data. That's why we're going to be making some HTTP requests. The way we do this in the web is with window.fetch. I'll give you a couple of examples of how you use window.fetch both to get data and to send data to a backend.

0:20 I'll also show you how to handle that data when it comes back, because this is an asynchronous interaction, and I'll give you some documentation that you can go take a look at if you want to get a deeper dive on fetch.

0:33 Here is what we've got for our exercise. Let me go ahead and pull up the final version of our exercise. We have the ability to search for some books. I'm going to go ahead and look up Zach and that's going to give me my friend Zach's book, "Voice of War." We can search for any number of queries here, and it's going to give us back a bunch of books that match that query.

0:56 Let's take a look at our Network tab. If I look for a lion, then we'll see we get a request here made to the bookshelf API with the query of lion. We can take a look at the preview and see all the books that come back with that query.

1:12 That's the objective that you have for this exercise. Your job is to make this query, take the data that comes back from the API, and set it into React state, so you can render it out here. All of this has been predesigned for you. Your job is to wire everything up with the API.

1:31 I also give you the API URL that you can use and an idea of what data you can expect back. Here are the files that you're going to be working in. We also have some extra credit for handling failed requests in using a useAsync hook to simplify some of this logic, once you've gotten it all written down.

1:50 I hope you have a good time with this, and we'll see you on the other side of the exercise.