Complete Intro to React, v7 Styling the Pet Component

[00:00:00]
>> So let's go back to pet.js. And let's actually make this look kinda nice since at the moment it's kinda black, right? So we're just gonna throw in Real the Quick, it's a nice styling. So, oops, up here we're gonna pull out name, animal, breed, images, location, ID, And we're gonna make a hero image.

[00:00:44] And say let hero=http://pet-images.dev-apis.com/pet/none.jpg. So it's like a placeholder. All of them have images for now, so you don't have to really worry about it. So if there are any images that you've inherited here from images then, hero=images0. So basically, here's my default image. If there's any images that comes back from the pet API, then make that the hero image, okay?

[00:01:36] You can just delete all of this. We're gonna make an a tag, a href=, we'll put some curly braces and backticks there, /details/$ template string here ID. So we're gonna be using React Router here in just a second to make a route that anytime they go to this page they can actually see like a full detail page on whatever pet we're looking at.

[00:02:06] And then we're gonna say ClassName=pet, Okay? Then div ClassName=image-container. Put an image, sources to assign to be hero, alt=the name, Okay? And then div ClassName=info, I'll put the h1 with their name. And h2 with, I don't know why I did it that way, you can do it this way, so animal.

[00:03:01] Animal, Breed, Location. Is this gonna get weird with spacing? No, it doesn't, that's nice. Interesting, that's funny. So, I put M dashes here instead of just normal dashes. Which on Mac you can do with option minus, because it looks nicer in text. And it's telling me is like, Hey, you use an M dash instead of a minus, is that what you meant to do?

[00:03:43] It is, so leave me alone. Okay, so let me just make sure I did this right. Yeah, you can see here this looks a lot nicer. Okay, Any questions about what we did here? This is an application of everything that we've learned already, nothing should be too new here for you.

[00:04:16]
>> Was there a greater meaning or a goal between kinda splitting up all the parameters from props to what we have the name does now?
>> Is there a reason why I did like a distraction appears are you trusting me?
>> Yeah I guess.
>> Instead of doing like props.name and props.breed and,-

[00:04:34]
>> Yeah.
>> Stylistic choice. Yeah, there's no reason other than like, it's shorter to type. I don't have to try prop stop blah a billion times. There's lots of people that do it that way. So that's totally up to you. Yeah, question?
>> I was just gonna say, I don't know if we ever mentioned that we were doing that, I think we just jumped from like to the normal pattern, so that may have created some confusion maybe.

[00:05:00]
>> Around what? Sorry.
>> I think before we were writing perhaps then all of a sudden we jumped right to destructuring and we never talked about it.
>> Okay.
>> Offensively confusion.
>> Yeah so I just did destruction here with the props, right? So this could have been props and it could have said props.id, props.name, props.animal, props.breed, all that kinda stuff.

[00:05:19] And that would have been fine as well. I know lets people do it this that way, but I like doing this.
>> Yeah, someone online is asking if there's any performance considerations if you're doing any of the mapping or template stuff before the return instead of during the return.

[00:05:44]
>> Certainly performance concern around with what mapping, I'm confused about what mapping means in that context.
>> The JSX templates you're using like map and kinda like not in this component but the other-
>> Like results here?
>> Yeah, if you're looping over mapping and building templates outside of the return function.

[00:06:07]
>> So that I guess it's a valid question, for sure. Let me kind of spin it this way. React is really fast and like they have like a bunch of years and a lot of highly paid engineers thinking about this for a long time for a website that makes billions of dollars, several websites that make billions of dollars.

[00:06:29] So, in other words, they have probably higher performance sensitivities than many of us at our day jobs, certainly for me, right? So, they've optimized the hell out of this, so that lots of engineers can write lots of code and not have to worry too much about performance on the whole.

[00:06:46] So in other words, for the most part, you can write code however it occurs best to you and React is typically fast enough that you'll never have any performance problems with it. That's the general rule of thumb. That's the way you should just file it in your brain is like, just write readable code.

[00:07:00] And then if you run into performance problems, solve the specific performance problems that you hit, right? So if I went through here later, and let's say I had a million pets in here, maybe that might actually I'm gonna say probably still wouldn't. It depends on your browser. I think you're gonna have browser problems first before you hit react problems.

[00:07:22] So, to specifically answer that question here, no, never this has a very acceptable performance profile even for large numbers of pets. You can get into maybe there's some sort of heavy duty lifting and processing that you're doing in here, in which case you'd probably wanna, I don't know like he's a worker or something that, like there's some other things really crazy tricks you could get into to try and offload some of that processing and get it off of the main thread.

[00:07:53] Especially react 18 that's coming is really good breaking rendering down into little slow and fast renders. So you can actually kinda do some magic there. Anyway, I'm kinda going in circles now the the real answer to the question is like it's not gonna be a problem almost ever.

[00:08:11] And when it becomes a problem solve the problem that you have and don't preemptively solve problems because just in general life advice for most of you now, Life versus Brian. Don't solve problems before you have them, like when you're coding, right? In general you end up with solving the wrong problem and you end up with a worse solution because you solved the wrong problems.

[00:08:33] Okay questions.
>> Could you say very recently learned that it's most important to in job interviews? [LAUGH] Like when you're trying to solve the tech problem and you're like it has to be perfectly optimized and then you get to the end and you don't finish and you could have solved it did like ten minutes?

[00:08:47]
>> Yep. I mean, as so I teach the complete intro to computer science as well and that's like one of the pieces of advice versus like if someone gives you a tech interview problem. Just solve it the dumbest way possible, right? Like give them the three line answer.

[00:09:01] I remember, his is probably super off track now who cares? [LAUGH] It was the Facebook interview and they asked me to take in a letter and a number, and repeat that letter that many times, right? So, an A and 40, give me back a string with 40 A's on it, right?

[00:09:21] I was like, cool, I'm gonna use Pad Left, right? And so with Pad Left, you can give it a number and a letter and it will pad beating with string with that many times with that many letters and you just give it an empty string. I was like, I'm done and I'm faster than whatever your solution is cuz mine uses the browser.

[00:09:39] They were not amused with my answer. [LAUGH] So they made me go back and actually really solve it. But anyway, I don't know why that, it felt important to tell that story right then. We just finished 07 component composition. The point of this lesson is basically to show you.

[00:09:56] Why I wanna show you using turn areas with React Components. That's important because you'll see it in code quite a bit. And two, I wanted to show you kinda the background thread of processing, when you're reading your components of what you should be thinking. Like, should I break this down into a different component and then once you decide to kinda the process of splitting it out putting another file moving everything over that you need to and then reusing it back in the original component.

[00:10:23] That's a very common thing that you're gonna be doing a lot if you read a lot of React.