6.2 Web Requests and Lifecycle Events
It's really hard these days to talk about creating front-end applications and not talk about making web requests. Well, this course is no different. In this lesson, we are going to discuss how to make these types of requests using the
fetch function. We'll also ask at what point in the component lifecycle web requests should be made.
1.Introduction2 lessons, 03:04
2.Getting Started3 lessons, 15:16
3.Building React Components4 lessons, 24:57
4.Working With State6 lessons, 40:38
5.Winning and Losing3 lessons, 17:14
6.Refactoring and Final Changes3 lessons, 16:55
7.Conclusion1 lesson, 01:40
6.2 Web Requests and Lifecycle Events
As promised in the previous lesson, I talked about giving you a way to make this interesting for yourself. And I'm gonna show you a couple of little nifty tricks. So the first thing that I wanna tell you is that I want to show you how to make API calls from your React Components out somewhere onto the internet. So this is a very useful trick to know how to do it is to be able to make HTTP requests out to the internet somewhere to get some data, bring it back into your application into some of your components and then actually use it. And one of the more interesting things that I have found on the internet is actually this Wordnik API. So what's this is actually going to allow you to do is to make some API requests out to this website and get back some random words. And that's kind of what we're looking for. The nice thing about this is that you can sign up for free to get access to this API. You simply click the Sign up now. You enter in some information, they will send you an API key, and you're basically ready to go. So you can go ahead and do that sign up for all that sort of good stuff. And then get your own API key, and then kinda follow along. So the interesting thing then is if you were to go into getting started and go through the links there, it will take you to a page that looks like this. And what this is it's showing you the definition of their API. And if you were to go down into the words resource here, you're gonna see that there is a random words API. So what this is going to do is it's actually going to return back to you a list of random words. And this UI just kind of shows you some of the parameters that you can pass in and different things that you can do. I'm not gonna go into this in great detail, but one of the interesting things that you can do is you can kinda test this out a little bit. So we're gonna leave the defaults here just as they are. So has dictionary definition, which is probably useful to have some sort of word that has a definition is set to true. If you come down here a little bit, you're going to see that the words that it's going to return is gonna have a minLength of 5. So every word that comes back is gonna be at least 5 characters and a maxLength of -1, meaning there is no max. So you can cap that off at something if you want to, that's fine. And then you can limit the number of results you get. So in this case, it will give you 10 random words. Well, I really only want one. So I'm gonna make those modifications. Let's go ahead and hit Try it out here. And you're gonna see we're gonna get back response here that says pairs. So that's the random word that came back. But more interesting than that is this request URL. So I'm gonna go ahead and copy this request URL. And all you will need to do is take your API key and stick it right in here where it says, YOURAPIKEY. Once you've done that, you can copy this URL and bring it into your application and start to use it. So where are you going to use that? So let's go ahead and go back into our application. So what I wanna do now instead of hard coding this target word right here, I wanna make a call to that API. So then I'm going to take the result of that, parse that information that's coming back in JSON format. And then populate that dynamically into the target word. I think that would be pretty cool. So what we're gonna now is we're gonna augment hangman here just a little bit. So this is gonna be where all that magic happens. And just like we've done in other places before, let's go ahead and create our constructor, and we're gonna say props, we're just gonna take this information in. Like I said before, this is just a good habit to get into. So now I'm going to introduce state to hangman. And I'm going to say that my state is going to have a target word. And it's gonna be initialized to nothing because at this point, when I'm calling this constructor, I don't really have a target word. I have nothing to specify here. So then what I'm gonna do is I'm gonna come down in here and I'm going to say that my target word here is going to be this.state.targetword. Now, obviously, there's nothing there yet, it's blank. So in this case, I'm not gonna wanna show this yet until it's populated with something. And we're gonna use that little nifty trick that I showed you before on how you can actually show and hide this if you want to. So what I'm gonna do here is I'm gonna say this.state.targetword. If that target word is equal to an empty string, which is what it is by default, then I'm going to, I don't really wanna show nothing. Maybe I wanna show like a little bit of a loading screen first. So I'll just put in a paragraph tag in here like this and it will say something like Loading... Then obviously, if it does have a value, if it's something other than an empty string, then I'm gonna show the game board. So let's go ahead and save that. So if I pop back over here to my Hangman Clone, you're gonna see it's just just loading. There's nothing there. But obviously nothing's going to happen at this point because we're never loading it with anything. So let's pop back into our code. And I wanna introduce you two things. I wanna show you a little bit of state. Some other different life cycle operations that you can take advantage of within your React Components and then how to make some network calls. So what I'm gonna do is i'm going to come in here and just like we have a built in render function, we have another series of functions that we can take advantage of and one of them is, as you can see, if I start to type in component, we said DidCatch, DidMount, DidUpdate, WillMount, WillReceive, WillUnmount, WillUpdate, so these are all life cycle events that are happening that you can tie into. And one of the interesting ones that you can advantage for doing things like network requests is going to be component DidMount. So this operation, this function going to fire when our component is mounted and shown on the screen and at that point you can do different things with it. So this is your first opportunity to take advantage of that. Now what I wanna do is I want to go ahead and make a request out to that API that I just copied before, and then actually use it to get a word out. So the way that I do that is by using the fetch function and the fetch function is going to take in a URL. So I'm just copying and pasting this URL in there and this is going to return a promise. And a promise allows you to write asynchronous code. So at this point I can use the .then function. Which means when I get a response back I can process it. So that response that comes back is going to be some information coming back from that API. So I can say when I get a response back, I want to go into that response and I want to convert it to JSON because I know that's what response is going to look like. And once again this is going to return a promise and when that is done I can then come in once again with another event and then I can take the data that is coming from that. Once again that is going to be. And JSON object. And I already know because I've done this a little bit I've played around with it. I know that there's a certain structure to this, that the data that's coming back. Remember, I'm asking for a single word, but it's gonna return a list. So I'm gonna say I want the first word in that list. And I know that there is a word property in there. And that's gonna give me that value back. Just like we saw when we were in this API over here. You can see I get back that first object and then I want that word property which will give me that value. And then once I have that I will go ahead and get that data and instead of just getting it I want to set my state. I'll say this.setstate, and I will set my state in here I will say I wanna set my target word equal to the value that is coming back from the API. Just like that. So now we've hooked into the life-cycle event where the component mounted on the screen, and then I am using the fetch function to go and retrieve a word back from that web service. And then once I get that response, I'm going to convert it to JSON. I'm gonna take that data I'm going to set the state equal to the word that is returned. So all I need to do now is go ahead and put my API key into this URL, and then I'll show you how it works. All right, so now I have updated this call with my API key and I have saved it. And now I can pop back over to Chrome and you can see that it has actually populated and I have some sort of word here. But let's see if I refresh this if we see loading there at all. Yep, so you saw loading there it was very quick hopefully you didn't blink and miss it. But now I have a new word here. So now I can play my game. And I can actually not know what the word is going to be. So I can check for some letters here. RSTU and I can play my game, and see if I actually can guess what the word is that comes back. Now, I have done this before. It's actually quite complicated. There are some very complicated words that come back from this API. And I was not able to guess the word and that actually does remind me that at the point when you actually lose the game, it would be nice to actually see the full word that you weren't able to guess. So in the next lesson, I'm gonna show you how to finish that up and then your application will be complete.