This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Components" Lesson
[00:00:00]
>> Hopefully I've made you feel sufficiently gross by writing code in a script tag. We're gonna put move it into a different file now but I just wanted to strip it down to the most basic thing so that you could see that there's no magic going on here.
[00:00:15] We're gonna pile the magic on here as we go further and further. The first one is going to be looking from a different JavaScript file, very magical. So please make a file here called App.js. Okay, just copy that business. I'll cut, get rid of that script tag altogether.
[00:00:41] Actually, you will need a script cuz you'll need the source = ./App.js, like that. So, these two can be in either order it does not matter. This one has to be last. So make sure that App.js one is at the bottom one, needs to be the bottom one.
[00:01:02] I'm saying a couple times, just so people understand has to be the bottom one, okay? Paste that in here. You might have wondered what caused all of my code to rearrange itself, and make it look nice. It's a thing called prettier. I will be showing you how to use that in three sections.
[00:01:24] So for now, if you don't have it installed just make it look nice and then I'll show you how to automatically do that. So we're gonna create another class of components here. We're gonna be creating the Accords. I'm hopefully will not overuse that Honda metaphor too much but I'm entertaining myself so I'm gonna keep doing it.
[00:01:44] Okay, we're gonna make another function here called Pet. It's gonna be another function and it's going to return, React.createElement. And we're gonna put in a div here. Empty object or null, both of those are fine with me. And then we are going to be giving it an array here.
[00:02:13] Cuz it's gonna have multiple children so you have to give it an array of children. But you also could just do comma separated without the array. So could actually just have multiple parameters and it would just list those as children. Again, variable arity here as well. Let's just do arrays here because that's actually what JSX does underneath the hood.
[00:02:32] So I'm gonna show you kind of closest to what our tools are gonna eventually end up doing for us. In other words, we're splitting hairs here and actually, it really doesn't matter. [LAUGH] createElement, we're gonna put an h1 here. It's gonna be an empty object and we're gonna put the name of our animal.
[00:02:56] So you're welcome to put your own favorite pet in here. I'm gonna put Luna because she is objectively the best dog and also the worst, okay? And then I'm just gonna clone that line two times here. These two, I'm gonna make an h2. So I made both line 5 here and line 6, an h2.
[00:03:18] And Luna is a dog, and she is of a breed Havanese. It rearranged that. So, we have a div inside of that div is an array of an h1, h2 and an h2 with the dog name of Luna dog and Havanese. So we have another class of components here called the Pet component, okay?
[00:03:42] So, here in our app, we're gonna make this an array and we're gonna move our existing h1 into here of Adopt Me. And then we're gonna have React.createElement, and we're gonna put a Pet component. And for good measure, let's just put three of them. And it rearranges it again.
[00:04:11] So we have a div, that's an array. The first one is an h1 here of Adopt Me and then we're creating three instances of the Pet. So going back to the rubber stamp analogy, we're stamping the stamp three times, okay? So ask yourself, what do I expect to see when I go over to the DOM?
[00:04:32] So let's just work backwards, what's gonna get rendered out here? We have an app, all right, which is this, so we're gonna render an app out. That's gonna be a div. Inside of that div, there's gonna be an h1 with the Adopt Me. We're gonna have a cool little logo that we made before.
[00:04:47] And then underneath that we're gonna have a Pet component. So we have to go down here and look at what's a pet, right? That pet returns a div and inside of an h1 and h2 and h2, right, with Luna dog Havanese, right? We're doing that three times. So how many times do you think it's gonna say Luna on the page?
[00:05:07] Three times, right? And it's gonna say dogs three times and it's gonna say Havanese three times. Let's go see if that's right. Luna dog Havanese, Luna dog Havanese, right? So, starting to get a little bit further into the programming milestone is hopefully starting to see a little bit like, okay, I can see where this is starting to get a little bit more useful.
[00:05:30] I still could have written this as HTML is significantly easier, but step by step here. Something I'm gonna call out right now, is you're gonna see here in your console some warnings, that's expected, right? So don't worry about those for now, I will show you later how to fix those.
[00:05:46] But that's just react being helpful with its developer tools. If you shipped this and built it for production, it would not show you that anymore, Cuz we're using the development version. The TLDR of why it's doing that is by saying hey you're rendering Pet three times. And if you tried to swap them I wouldn't understand if you swapped them.
[00:06:08] So therefore, I would destroy everything and re-render from the bottom up. So like if you give me a special key that I can say like is this the same one and it can detect that and follow that. Then I'll just move the DOM instead of creating and destroying it, which is way faster, right?
[00:06:22] It's trying to help you with that practice. That's the idea and I'll show you how to do that. So, but that's what the warning is about. Still it'd be really cool if there are other pets besides Luna. She is objectively the goodest girl, right, but it'd be cool if there were other pets available for us.
[00:06:42] So let's make our Pet component flexible, as opposed to being just the Luna component. Let's make it an actual Pet component. So this Pet function can accept something called props, right? As you might guess properties, is what that stands for but we all call a prop so you can just take the props.
[00:07:03] So instead of just rendering out whatever string we put here, we can actually just say give me whatever comes in from props.name, okay? Instead of dog, we'll have a be props.animal, and instead of Havanese, we'll have a be props.breed. Now this Pet component became flexible, right? And now, instead of having to render the same thing three times, we can actually use it to render different things.
[00:07:33] And we're gonna use this empty object that we've been ignoring up until now. So we're gonna give empty object and we're gonna say name Luna. Animal Dog and breed, Havanese. And now this is going to be passed into this. And we'll actually have some sort of flexible component here.
[00:08:05] So let's go do that two more times here and we can make three different pets now. So I'm gonna do the bird that I had as a child, Pepper. I was a very creative child, I named my black and white cockatiel Pepper. That's not a creative child. I was like, it looks like pepper we're gonna call it Pepper.
[00:08:31] And Pepper was a cockatiel. Yeah, and then I named this after my friend's cat cuz Doink is objectively the funniest name for a cat I've ever heard. It's cuz the cat will just like run into the wall, Doink just doing the wall again. Doink is a cat and Doink was some sort of mixed breed.
[00:08:50] I could not tell her where that cat have ever came from. From the cat though, okay? So now you have to ask yourself, what do I think is gonna happen? Well, it's gonna be relatively the same thing but instead of Luna dog Havanese but underneath that'll have Pepper Bird Cockatiel and have Doink Cat Mix underneath it.
[00:09:10] Refresh the page and you can see that is happening exactly the same way, that we thought it would. So the flow of information here is pretty obvious, right? It's going from the parent component down to the child component. Again, one of my favorite things about React is this is called the one way data flow, which definitely not and I think React invented.
[00:09:35] But it's definitely a thing that React popularized that kind of basically every other framework kind of adopted after that. And you'll find that if you've ever in Angular, Ember you're gonna find a lot of things that are very familiar and that's either because React stole it from them or they stole it from React.
[00:09:51] And everyone stole from computer scientists in the 70s, and they stole it from people in like the 60s, right? And it's just a chain of people stealing people's ideas. In other words, it's all great, it's all just whatever your favorite shape of writing it is. I happen to like the shape.
[00:10:07] But yes, data flows from the parent, the parent being App, right? App is the parent component of Pet because the App is rendering Pet, right? So data flows from the parent to the child. So it moves from here to here, right, via props. Now you might ask is like, what happens if I have something that pet needs to do with App, right?
[00:10:28] How does the data flow up? It doesn't. And you might say like, that seems like it's annoying. And when you're kind of learning the paradigm it is because sometimes you're, well, I want to be able to have my child component affect my parent component. It's by design that you can't.
[00:10:45] If I have a bug inside of App, I know that pet didn't cause it, right? By definition, because pet can't affect App, and therefore, when I go start debugging, I can just rule out that entire section of the code and I don't have to worry about it. That is great.
[00:11:03] [LAUGH] It makes debugging significantly easier because just rule out entire sections just by the way that the app exists. Now your next question is like, okay, really how do I make Pet do something? That it's like there are ways there's things called context. There's Redux. There is other things that I can show you later, but it hacks around things that you have to do.
[00:11:27] In general, you want it to work like this. You want the data to flow one way. And the other thing is like, the data's very obvious how it got from point a to point b. It's not mysterious how Luna Dog Havanese got here because I can see it went in here and came out here.
[00:11:45] This was one of my biggest complaints about AngularJS1, is that you would have something bound to the scope and you'd be, I have no idea where this changed in the code, right? If you've ever written any amount of like AngularJS1, you'll know this to a data binding pain that I'm talking about, this change to be something else.
[00:12:06] And that could have happened in the service or the other service or could have happened in the controller or could have happened in the model. There's just a trillion places that could have happened. And then React specifically responded to that kind of pain that that Angular was causing at the time.
[00:12:22] It was magical. I wrote a lot of really productive code that no one wanted to maintain cuz it was terrible, right? And that's what React were trying to avoid here. It's verbose but it does that so that it's easy to maintain and that's worth it. Because I'd rather have a harder time reading the code the first time and an easier time understanding of the second time than rather the opposite of that, right?
[00:12:45] That's my point. React has been meant to be maintainable over being easy to write. Youll hear me writing a lot. That's why I say that like you're gonna be the same, this could have been done so much more easily and it definitely could have been. But again, we're the verbosity is by design.
[00:12:59] So we've reached our first checkpoint in the code. So if you've fallen behind and I'll show you just kind of here what it looks like in the course notes. If you see this little checkered flag down here, that means like you've hit a checkpoint. If you've fallen behind or you just want to see how I did it, you can click here, and you can go in and you can see this is what my App.js looks like.
[00:13:21] This is what the index HTML is, so on and so forth, right? And if you've fallen behind just copy and paste all that over. Where you can just copy the pieces of code that you had missing or something useful that I'll kind of throw out there. You can use something, I have Kaleidoscope to happen on this computer.
[00:13:42] But some sort of div comparing thing like Kaleidoscope app is one of them. That's the one that I use. It's expensive, but I actually really like it. And you can just say, compare this folder to this folder and it'll show you like a git diff between the two of them and you can see what's changed between the two different steps.
[00:14:00] It's also pretty cool.