Styling the Pet Component

[00:00:00]
>> Real quick, let's go make pet look a little bit nicer. Pet.jsx, all right, so just delete all of this Let's replace props up here with name, animal, breed, images, location, ID. We're gonna have a hero image. So, let hero=http:// pets-images.dev-apis. To the dev-apis.com/pets/none.jpg. And then if images.length, then hero is images 0 Okay, and then down here in delete all of this markup, a href =, we're gonna make a details page here in a little bit so details/id.

[00:01:32]
ClassName=pet. Div className=image-container. And then this is gonna be an image, sec = (hero) alt is assigned name. They're gonna have div className=info. h1 of the name. And h2, we're just gonna give it like a little like info thing here so, There's a bunch of ways to do this.

[00:02:17]
You could totally do this with like animal. Breed. Location or you can do it with a template string like I have in my notes both of them work just fine. Yeah, VS Code will always warn you when you do dashes. Do you know what dashes is? It's like a longer dash.

[00:02:50]
That's what this yellow outline is. If I just put like a minus sign there, then it's fine. For us to have it there if I'm doing text, you're supposed to do an dash and not a minus if it's text, right? Not that it really matters. Okay, so now we should be able to pop back over here and you should get like an actual fairly nice looking page.

[00:03:17]
So, that's Luna, that's my dog and then Bunna and all of belong to front of masters staff. And then Sudo and Beam belong to Sarah Dresner. And then the rest are just random stock images.
>> So, Sudo get me a beer actually works.
>> It does. And Beam is named after the Erlang VM.

[00:03:41]
Yeah, Sarah has nerdy dogs. They are sweethearts though, I really do like Sarah's dogs. Luna however, it's a tiny jerk. This was just stylistic, I mean, the only thing here that might be interesting to you is like we're doing like a default image here, right? Think if I refresh this, then it just has like a little placeholder image, right?

[00:04:07]
So, if one of these animals came back without an image that you'd have, like a nice little placeholder. That's the point of that. We don't have a good loading experience right now. Basically, it's just like right now our API is fast enough that it doesn't matter. But imagine if we had 10 million web users on the website for some reason.

[00:04:26]
This would slow to a crawl and they'd have like some really bad experience. Or even if we're like here, let's just put it on like slow 3G for a second. This is kind of painful, right? Not rendered, no pets found. And then eventually it shows up, right? Not great, it'd be much better if we had some sort of loading kind of hydration going on.

[00:04:58]
We'll get there. But for now, we're still working through just getting the information there at all. Yeah.
>> Does Sudo have admin privileges?
>> No. And we've informed the admin of your request.
>> [LAUGH]
>> [LAUGH]
>> That's a dumb unix joke for you. Which by the way, if you wanna get that joke, there's a course on front and masters from yours truly about Linux and the CLI.

[00:05:23]
And I do make that joke in there. We are up to 07 component composition. The lesson that I wanted you to take away from here is where components are getting really big and start doing a lot of things, just break it down into smaller components. Even if you're not reusing those components, totally fine.

[00:05:45]
For example, we're not gonna do it in this class, but this could be like a good like stretch goal for you once you're beyond this class. It'd be a good idea to move this form into its own component. And so that search params would be div and then it'd be like form and then results, and then all it did was Marshall stayed around.

[00:06:07]
It would be a much cleaner implementation of this. There's kind of the background thread that I want running in your brain when you're writing react is like, can I break this down into more succinct parts? Now, you can go totally the opposite direction and have way too many components, also a bad idea.

[00:06:26]
One, when you start getting like thousands of components that are like building onto each other, it gets really slow. So, that actually is a real performance concern and it gets nonsensical of like, okay tiny thing makes slightly, less tiny thing that makes slightly less tiny thing. You can get lost in the interaction.

[00:06:45]
So, please just balance it, and that just comes from doing it and experience. But if all of your components like 10 lines, you're doing too much decomposition build your things back up into bigger more macro parts.