Complete Intro to React v4 Using the Petfinder API Client

[00:00:01]
>> Brian Holt: Now we're gonna go into app.js.
>> Brian Holt: And we're going to import a API library for reading from Petfinder. So you're gonna say import pf from petfinder-client. Because Parcel is really cool, it will install that for you. Full disclaimer, I wrote Petfinder client for this particular workshop. So it's optimized for this class.

[00:00:37]
>> Brian Holt: Yeah, there might still be bugs with it, but I will fix them.
>> Brian Holt: Okay, and then, under Imports we're gonna say, const petfinder equals pf. So this is going to be giving us an actual Petfinder API client. I'm gonna say key is process.env.API_KEY.
>> Brian Holt: And secret is process.env.API_SECRET.

[00:01:16]
>> Brian Holt: So this is how you refer to things that are inside of your .env file.
>> Brian Holt: And Parsel is smart enough to go and do a fine replace of it. There's actually a library called .m that parcel uses to goes and does a find and replace on these.

[00:01:36]
>> Brian Holt: So generally, these Petfinder API keys are actually meant for node servers. So they're not generally meant for client side development work. So if you actually bundle this out and put it out in the open web, people can grab your API keys and start using them. But for our example application here, I think we're fine.

[00:01:58]
>> Brian Holt: Okay, so now we have Petfinder here, which is going to be our API client.
>> Brian Holt: What I wanna do is rather than having this dumb thing that I have to predefine all the pets, I'm going to go out to the inter-webs and grab the latest pets from there, and then load that into my application, right?

[00:02:21] So what I'm going to do here is I'm going to make it so that my application is going to render for the first time by itself, right? So the user sees something right away, and then as soon as the application renders, it's going to go out and make an API call to get more information, right?

[00:02:38] So that's a big key here is you want something to render first to show the users that I'm in a loading state at this moment in time. Go out and grab the things from the API, and then render to the user what they want to see. Does that make sense?

[00:02:50] So what we're going to do is say component did mount. This is called a life cycle method. So every React component has a full life cycle, right? It's going to start up and it's going to run the constructer first, right? Because that's what's gonna get called as soon as something that is created.

[00:03:11] After that, it's gonna call something that's called component will amount. That's about to go into the DOM. That one's supposedly gonna be deprecated some time in the near future because it's actually not really that useful. You're not gonna call things typically before something that's rendered. But the one that you're gonna call all the time, this one is by far the most useful one, is component did mount.

[00:03:31] ComponentDidMount means I've rendered to the DOM for the first time, now I'm ready to go out and do things like buy into DOM element if you're integrating like jQuery and React together, or D3 and React together. Or I'm gonna go make calls to the API. Or I'm gonna fire things to the analytics.

[00:03:47] All these kinda things, that's gonna happen here in component, in Node. So keep that in mind. It renders to the DOM first. It's visible now, and then it's gonna call component did mount, okay? And it gets called once.
>> Brian Holt: Once per component, right? So if I have a component did mount here in Pet, each one of these pets component did mount is going to get run individually for each component.

[00:04:09] Does this make sense? Okay, so as soon as this mounts, I'm gonna say petfinder.breed.list({animal,
>> Brian Holt: Colon dog.
>> Brian Holt: Okay, this returns a promise, which is a JavaScript type. It's a object that represents a future value that's going to be coming, right? So this obviously takes time to go out to the API, get the list of breeds for dogs, and come back.

[00:04:54] So what this returns is a promise. So if I say const promise equals this. Now, this promise, you can even see here,
>> Brian Holt: It's not saying. But this returns a promise to you. And then now, I can come down here, promise.then. So basically, it says, as soon as this comes back, then run this function.

[00:05:18] So I'm gonna get back data.
>> Brian Holt: And actually, all I want it to do is, if it works, call console.log with whatever it got.
>> Brian Holt: And if it fails, then call console.error.
>> Brian Holt: It's gonna give you an eslint error because you shouldn't ship consoles.log statements, right? But we'll remove that here in a second.

[00:05:46]
>> Brian Holt: We'll have const promise here. This is gonna be the result of petfinder.breed.list. This is gonna be called with these credentials, which the Petfinder client is doing. And then here, if it's successful, it'll call console.log with whatever data we got back from the API. And if there's an error, it'll come back like this.

[00:06:05] Fair warning, the Petfinder API is XML-based, which is then being translated into JSON, which is why it's a little silly on how it does things. So we're gonna have to do a fair amount of checking, just because the API is a little insane. But it's all on the name of seeing cute animals.

[00:06:22] So I think we're all prepared for this, right? I am.
>> Brian Holt: So if we refresh the page here, and look here, you'll see this object in your console. So you'll see petfinder and then breeds, right? And if I look in here, you'll see that it gives me back 249 breeds of dogs.

[00:06:41] So you can look here and see English Bulldog, Dutch Shepherd, a. Just kidding. So things of that sort. So that's how this API library works. And that's also how component did mount works. There are more lifecycle methods that we'll kind of get to as we keep going, but component did mount will be the one that you will use by far the most.

[00:07:11]
>> Speaker 2: Hey, Brian, before we get to that, it sounds like some people in Chrome are getting a cores error.
>> Speaker 3: I was getting that before I restarted my server.
>> [CROSSTALK]
>> Speaker 2: Okay, so the moral of the story is restart your server if you're getting a cores error.

[00:07:30]
>> Brian Holt: So if you're not familiar, you hit Ctrl+C here. It'll stop your server, and then you do again.
>> Brian Holt: Now, if you refresh the page, you should see it.