This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Component Composition" Lesson
[00:00:00]
>> Component composition, so at this point you're probably thinking to yourself there's a lot of logic in the search params route here, right? Like this is 100 line component there's no hard and fast rule after X amount of lines do this but when you're approaching like 100, 150, 200 components getting pretty long.
[00:00:22] So you might think about like, what is this component doing? And like, is there something that I can break out of here and put into another component and then I can kind of have smaller components that compose into each other. It just makes it easier to manage, easier to kind of reason about but the other thing I wanna kind of put you on to is, you can break it down too much, right?
[00:00:43] I'm trying to remember at Reddit, when I was we were doing our first react app. We broke everything down into the tiniest components, like text line. We like our own paragraph components. There's a point where it gets ridiculous and it's hard to understand, what's going on and why it's done that way.
[00:01:03] And at some point you actually start running into performance problems because there's so many components in your truth. We had depths of 200 components sometimes inside in our React App, which was ungood is the the scientific term for that. So just balance, right? You have to balance like code readability.
[00:01:28] Usually performance is not a thing, particularly now react is much faster than it used to be. So I don't think that necessarily be a concern today but back then it definitely was. Anyway, let's pull our pet rendering out of this red, now we have this little part here, this is just a list of pets.
[00:01:51] So one that could be reusable, right? We can use like a list of pecky components somewhere else. That's good. And it's a very easy thing to break down here. So what I want you to do, I want you to make a new component here and I want you to call it results.js.
[00:02:12] Here we're gonna import pet from pet. And we're gonna make const results equals, and then we're gonna pull a parameter here called pets. And here we're going to return. I am gonna talk about turn [INAUDIBLE] here. Everyone let's turn Aries right? So we're gonna ask a question here, is like do I have any pets?
[00:02:58] So if you don't have any pets, which this is what this is checking, right? So if I have no pets here, then I gonna [INAUDIBLE] because these is no pets found, right? So we're gonna do this with a ternary. And again, I recognize that this is kind of hard to read.
[00:03:20] But I'm showing you this because this is all over react, people use ternary is everywhere. So we're gonna put like an h1 here that says, no pets found. Okay, that's, no, don't do that. That's harder to read. Okay, otherwise, we're gonna put this kinda what we had here.
[00:03:52] In fact, you can just go copy and paste this outta here. I'll just copy it. That
>> Because you don't need the curly bracket? To start pets
>> I think you're right. Thanks, appreciate that. Okay, so let's unpack this cuz it's a little dense. And I intentionally did that, again, cuz you're gonna find react code that looks like this.
[00:04:23] I'm not necessarily telling you this is the best way to write it. Though I did write this. So you can say, Brian that's really dumb and you probably right. So that's fine. So results here this is destruction, right? So basically the same thing here saying const. Pets equals params.pets and this was params, right, same thing, We're just saying that we know that there is a thing here called pets, we would like to pull that out, okay, then we're putting this all inside of a div here.
[00:05:02] And we're saying, hey, if no pets are found, so if there's no length to pets, then do no pets found, right, we'll just display that out. Otherwise, and this is what this ternary is, which is just a normal JavaScript feature. I mentioned most of us don't use it a whole lot because it's kind of unclear.
[00:05:25] But again, because all these are just JavaScript expressions, you can do turneries here but you couldn't put an if statement here. So that's why people end up using a lot of turn arrays in react. So that's what the colon is the otherwise this is like, if this is true do this, if it's not true do this.
[00:05:44] That's the sum of what a ternary is, then you're saying otherwise pets.map. Do all this other stuff. We're gonna pass a few more things into pet. We already have the animal, we have the breed, we have the name, we have key, we have to pass in the images, pet.images.
[00:06:09] We're gonna pass in a location and we're going to actually just put in a template string here. Pet.,pet.city, pet.state and then, id=pet.id. So, what's cool about this now, is we can take in a list of any arbitrary pets and we can display out a list here, right? So you can imagine we have our search results page but let's say, we were going to go build later a, I don't know an administrator tool where someone could go and moderate all the pets coming in, right?
[00:06:50] And we could just throw a results. Other component there so this has become reusable. Yeah.
>> Just a bit ago you said you can't run an if statement. And I guess maybe I'm forgetting fundamentally but at what point when we started this JavaScript? What functions? Why can't we do it as statement?
[00:07:12] Why can't we do?
>> Sure, so there's a term in JavaScript called an expression. And expression is basically anything you can put on the right side of an equal sign. So if I have const X equals, whatever I can put here. That's what you would consider an expression in JavaScript.
[00:07:31] So anything that goes in between curly braces here has to be an expression. So what's different than an expression is a statement. So notice that we always call them if statements because they are statements. So if blah, const x equals five, right? This would be a statement and therefore you can't do statements inside of the curly braces, yep.
[00:08:04] Just to drive further home a little bit, the entire thing here, this entire line ten of the assignment is an assignment statement, right? So it's basically like one line. It's what you'd put between semicolons, is a good way you can think about that. As opposed to what's on the right side here, just the seven, that's the expression.
[00:08:28] That makes sense?
>> Yeah, so to expand it a little further than, if for some reason, we wanted our JavaScript to adjust a variable, change x to 10 or something like that. Then let's kind of fundamentally why we're using use state and things like that, rather than putting in listeners and updating code.
[00:08:46] Within those HTML elements.
>> Yeah, that's one way you could frame it, for sure, cool. Okay, so go back to Search params and instead of this whole statement here of like line 89 to line 96, I am just gonna put results. So now what's cool about VS code here is I can just start typing results.
[00:09:17] It's like, do you want to pull in results from ./results? And it's like, yes, I do. Yes, please. And then if you go look up at the top, it automatically imported it for me. But if it didn't do that for you make sure you have the line for there import results from results.
[00:09:38] Okay, so down here we have to pass in pets to it, right? So pets = {pets}. Okay, and then last thing up here, we can get rid of the pet import since we're no longer using that directly inside of our search params. That's only being used with results.
[00:10:15] Now if we went over to our page here, it should look exactly the same except notice for a hot second. It says, no pets found. Because that's what our new results component will do, it'll show no pets found if there's nothing there and initially there's nothing there on that first render.