This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Refactoring the Pet Component" Lesson
[00:00:00]
>> Lets go ahead and go make pet actually look half decent. So head back to pet.js, we're just gonna spruce it up a little bit. Get rid of that, so here, we're gonna do structure up here and we're gonna say name, animal, breed, images, location, ID. So now we're destruction what's coming in from this.
[00:00:30] Also in my notes, you can totally do it this way as you can also say const name equals and then have the destruction work that way. That totally works as well. I'm just gonna do it here, cuz that's what I would normally do. Okay, and the next thing, just to be defensive, let's say let hero = http://pets-images.dev-apis.com/pets/none.jpg.
[00:01:08] This is gonna be the little image that shows up next to the pet. And if nothing comes back from the API, we want it to look like this. Otherwise, if we got any images back from the API, then we wanna make that the image. So we're gonna say hero = images
[0], the first one.
[00:01:38] Now, I think you actually could have said, Does that work? I think this does, I mean, let's just try it for fun. Now you'd run into bugs with this, so I wouldn't be happy with it. Basically what we are doing up here is we'd say images equals this by default, right?
[00:02:01] So we'd always have some array coming back. The problem where you would run into that is what happens if you get an empty array back from the API, in which case, it wouldn't have anything set and you'd have a problem. So let's stick with this. This definitely works.
[00:02:16] It's the problems when you try and get too clever. Okay, we're gonna make this entire thing and a, an anchor tag, a link, right, because if someone clicks on the listing, we wanna send them to a detailed profile page. And the href here is gonna be equal to, that's colon.
[00:02:41] Let's just get rid of all of these. It's gonna go to /details/${id}. That's gonna be the path that we're gonna program here in a little bit. And the class name, it's gonna be equal to pet. Inside of that we're gonna have two divs. One's gonna be className = image-container.
[00:03:12] And that's gonna have the IMG. The source is gonna be equal to hero. And the alt is gonna be equal to name. And then we have to close that. Again, if you leave off the alt, it's gonna yell at you as it should, cuz you don't have an alt text.
[00:03:36] And then the div underneath that, We're gonna have an H1 of name. And an H2 of, Just like various pieces of information about the animal. So animal, I'm putting a dash between these, animal, breed, location. And we can actually delete that import from React up there. And now we should have a nice looking pet component.
[00:04:36] And like what you and I just went through together, this is a lot of what React, it's just pulling out the props and putting them in the proper locations, and wrapping them in the correct classes and stuff like that. This is what, I'm gonna say, most of writing React feels like.
[00:04:50] It's not terribly complicated on the day to day. I'm showing you a lot of the edge cases so that when you run into them, you know how to do it, but this is a major part of my job. Both Reddit and Netflix was just doing stuff like this.
[00:05:07] So let's go back over here, and you can see, Well, this is getting closer. We have pet images, that's good. I forgot the class name here. Line 12, this div, className = info. So I decided this className = info on line 12. And now everything looks significantly better.
[00:05:37] And you get to see some dogs. You're welcome. This is actually my dog right there, Luna. These two belong to the production staff here at Frontend Masters. And then these two, just charmers, Sudo and Beam belong to Sarah Dresner, who's another really good instructor in Frontend Masters. If you haven't watched her classes, you definitely should.
[00:06:02] And then the rest of them are just ones I made up. [LAUGH] Stock images with made up names. Okay, so now we have 07 component composition. That's the checkpoint that we're at now. Does anyone have any questions about anything that we just did together? No, you may not adopt my dog.
[00:06:28] She's a jerk sometimes. She always wants to eat at exactly 2:30PM when she doesn't eat till 4PM, and it's very upsetting. But you can't adopt her, she's my little jerk.