Complete Intro to React, v5 Calling the Pet API

Transcript from the "Calling the Pet API" Lesson

[00:00:00]
>> Brian Holt: Actually gonna show you a cool trick that parcel can do for you. So, we need to install a new client library to make requests against an API.
>> Brian Holt: So, what I'm gonna do here, I'm gonna say, import,
>> Brian Holt: ANIMALS like this from @frontendmasters,
>> Brian Holt: /pet like that.

[00:00:27]
>> Brian Holt: Now, you and I have not installed this, right? This was not in our package.json, but parcel is smart enough to say, hey, this is out on the NPM registry, I'll just go grab it for you. So you don't have to NPM install it, it'll just do it for you.

[00:00:41] So if you see here, if I say save, it's gonna say Installing frontendmasters/pet right there.
>> Brian Holt: And, while it's installing, it will rebuild the project, and now it's available to us on a project. Okay, so we installed this frontendmasters/pet. If you feel more comfortable, you can just say npm install @frontendmasters/pet.

[00:01:08]
>> Brian Holt: But you can also have parcel just do it for him which is kind of a fun feature that it does for you.
>> Brian Holt: And, again, if you look in package.json you can see that it installed it. Here, frontrendmasters/pet and save that in their forest.
>> Brian Holt: Magical.
>> Brian Holt: Okay, so now we have this ANIMAL's array which is just an array of strings I believe.

[00:01:34]
>> Brian Holt: And here, we're gonna say const animal, set animal = useState and we're gonna start with a dog,
>> Brian Holt: Okay?
>> Brian Holt: Then we're gonna go down and then we are going to make underneath our input there, another label,
>> Brian Holt: htmlFor = animal.
>> Brian Holt: And inside of that, we're going to select Animal.

[00:02:21]
>> Brian Holt: And, we're gonna put a select inside of that. So select,
>> Brian Holt: id="animal",
>> Brian Holt: value= animal.
>> Brian Holt: onChange = e, and then setAnimal e.target.value.
>> Brian Holt: So I'm gonna show you something pretty cool that we've done already. So it's saying, hey, if you're gonna do onChange, I need you to have onBlur as well.

[00:03:02] Because some screen readers, when you're tabbing across things, don't trigger onChange events. Which means that your code would not work when being used with a screen reader, which is obviously a big party foul, right? And I love the jsx ally, just catches up for you and says like I'm not gonna let you go forward until you fix this, right?

[00:03:21] Obviously like, this is so distracting to see so many red lines, I just can't even handle myself, right? So, we can fix that by saying onBlur = e, setAnimal,
>> Brian Holt: e.target.value, as well, right? And now, it's all happy again cuz we fixed our accessibility issue,
>> Brian Holt: Okay? And then we're gonna put a bunch of options in here of different types of animals that we can search for.

[00:03:52] So the first one, we put in here, is just a blank option. This is gonna represent when we search for all animals, right?
>> Brian Holt: I guess you could put in here as well,
>> Brian Holt: Something like this,
>> Brian Holt: And put All as well. That's probably not a bad idea.

[00:04:19]
>> Brian Holt: And then here, we're gonna do curly braces and we have an array of animals here, right? And we wanna have one option for every animal in there.
>> Brian Holt: So what we have is a list of strings, and what we need back from it is a list of components, right?

[00:04:36] It makes sense? Like, we have a list of strings and we wanna turn those list of strings into a list of option components. Or option tabs or whatever you want to call them.
>> Brian Holt: Well, luckily, there’s something built directly into JavaScript that translates one array of things to another array of things, right, and it’s called map.

[00:04:54]
>> Brian Holt: So if I say animas.map, right, cuz it’s an array, then you give it a function that takes an item in that array and transforms it into something else. So I'm gonna take this string, right? Or, we'll just call it animal because that's what it is.
>> Brian Holt: And then we're gonna have that return in option component,

[00:05:21]
>> Brian Holt: With the value of that option component is going to be the animal. And, also that it's going to display animal.
>> Brian Holt: Okay, it'll get a red line here for just a second which we'll fix in just one moment.
>> Brian Holt: So does this make sense? First of all,

[00:05:49]
>> Brian Holt: With arrow functions, you could have them implicit returned, right? So in this particular case, I had the arrow function and I have no curly braces, which means it’s implicitly returned. So this would be equivalent if I deleted this parentheses and deleted this one.
>> Brian Holt: And I said return,

[00:06:12]
>> Brian Holt: Like that.
>> Brian Holt: Those two things are the same, but because I have the parenthesis which means continue on the next line, right, it's an implicit return. Does that make sense?
>> Brian Holt: So those two things that I showed you are exactly the same.
>> Brian Holt: So now I'm gonna have one option for every animal.

[00:06:44]
>> Brian Holt: And indeed hopefully, if you go back and look over here, it's still upset but you can see,
>> Brian Holt: I have a list of various different options. It's just a tiny bit bigger. So there's a barnyard, bird, cat, dog, horse, rabbit, scales fins, other and small furry, which are the type of animals that can be able to search for a crosses API.