Pure React Components

[00:00:00]
>> So let's talk about a couple other things a component must return markup, which will always be the result of React.createElement. So this is about the simplest react app possible, this is the hello world of React applications. So next thing, let's get this out of a script tag on a page, so I'm gonna cut this, and I'm gonna make a new file here inside of source and I'm gonna call it App.js.

[00:00:39]
And I'm gonna save that. And then back here my index and literally this is unmodified. Here in App.js and then here I'm gonna put in this script tag source equals dot App.js. Okay, that should be slightly less offensive code now. So back here in App.js, let's make another component, this is a pet adoption app, so we're gonna make a pet component.

[00:01:15]
Be another function it's going to return the results of, React.CreateElement. And it's gonna be a div, it's gonna have nothing there and then we're gonna give it an array of components to return. So React.createElement, we'll give it an h1, empty object, and we're gonna describe one pet individually.

[00:01:49]
So we're gonna do my dog, which is Luna but you can put whatever you want there. And I'm gonna just copy and paste this cuz it's relatively the same thing. And I'm gonna make this in h2, and I'm like that in h2, Luna is a dog and her breed, she is a Havanese So now that we have this pet component again we've created the rubber stamp but we haven't actually used the rubber stamp, right so we have to go use it somewhere I mean, this is just a function at the end of the day, right?

[00:02:30]
You have to use the function doesn't really do anything. So and then you'll notice here, instead of just a result of one React.createElement call, we've given it an array of that which is totally fine. React knows how to handle that, right? Just so you know, this is just trivia that you don't need to know, you actually can just give it, Like multiple parameters here and it'll also know what to do with that, it's variablearity if you want to use the computer science term for it.

[00:03:12]
But what react will do for you under the hood it does put an array so I'm just letting you know that it's in an array. Again, trivia, you can just go ahead and let that go out the other ear doesn't matter. Okay, so now I have this. And I'm gonna make this an array here as well cuz we're gonna use a bunch of pet components.

[00:03:40]
Okay, and let's just put three pets in here, so I'm gonna say react dot create element, and pet. So again, I made this pet rubber stamp and I just went stamped it three times inside of app. And then app is going to be rendered out here to the root.

[00:04:08]
So one of my favorite exercises when I write code like this is I asked myself, when I go back to the browser, what am I expecting to see? Because it forces me to think through logically the code that I've written. Just start from the end and work backwards.

[00:04:25]
We have app, right which has been rendered out to the root, so we have our app component this is gonna be rendered how many times? It's once, we're gonna see an h1 that has an adopt me here at the top. It's gonna be inside of a div, right and then we have used the pet component three times.

[00:04:46]
So how many times is it gonna say Luna on my page?
>> Three
>> Three, dog three times having these three times. Total I'm gonna have four h ones right one of these three of these and I'm going to have what six h twos and inside of and I'll have what four divs.

[00:05:09]
Okay, so now if I refresh the page here you can see I have Luna three times, dog three times, matches up with my expectations, yes? Yeah, so you can see components are made up of components, are made up of components. If you will, right now, just so you know if you look here in your console, you will certainly see you have this warning.

[00:05:34]
That's fine, we will take care of it that's expected right now, just ignore it for the moment. So obviously not everyone's pet is my pet, right, it's not very useful that we have a pet that represents just Luna. It'd be cool if we had a pet component that could be any pet, right?

[00:05:50]
A little bit more flexibility than just outputting Luna dog Havanese three times. It'd be cool if we could have three different pets, as you might imagine, this is this is possible, right. So React is a concept called one-way data flow, which basically means that I can pass data from app down to pet.

[00:06:13]
I cannot pass data from pet up to app for the most part. Let's just say 99% of the time you don't, this is called one way data flow. It was, I'm gonna say popularized by React, but it's basically been adopted now by every major framework, because it was such a good idea.

[00:06:33]
Why is this such a good idea? I'm gonna pass information down to pet. If I have an issue inside of app, I know for a fact that pet didn't cause it because pet can't mess with its parents. App can mess with it's children, but the pet cannot mess with its parents.

[00:06:52]
So basically it allows it makes debugging react apps much more straightforward. It also makes the data flow very explicit, if pet has weird data being passed into it you know it came from app, right? Cuz that you can see the data flow from parent to child from parent to child from parent to child.

[00:07:13]
This is one of the biggest benefits of React in my opinion is it makes this flow of data very explicit, very easy to read, very easy to follow. My favorite story about React as I showed you that tweet of me launching React at Reddit for the first time.

[00:07:27]
I had a colleague Python developer, awesome developer but very much not a front end developer. I launched that React code and then immediately went on a cruise, immediately, like launched it, left the next day. Great idea I was an awesome coworker, hire me please. It broke as all codes want to do, my coworker was able to look at the code and he is like, I get this.

[00:07:51]
I can read this, I can understand where the data is going, and he found it very quickly fixed it and relaunched. And I only owed him a few beers instead of like an entire case of beers afterwards, right so it ended up being okay. But that is due to the fact of how explicit React is, you're, gonna get a little annoyed at how explicit it is because it requires a decent amount of typing.

[00:08:14]
So that part it's worth it, though like the juice here is worth the squeeze. Yeah, because you're gonna have to say every time like this goes here. That was, like one of the really cool benefits of like old angular is it was very implicit, right? You were able to say, okay, this is bound to this and it made writing that code really nice, but it made maintaining that code an absolute nightmare.

[00:08:38]
They fix that modern Angular doesn't do that anymore, I'm talking about really old Angular, that like two way data binding. If you've done that before you now have this forlorn look on your face and you're like having like flashbacks of terrible times in your coding career. If you don't know what that is, just consider yourself very lucky.

[00:08:58]
Anyway, okay, so I've explained to you that we wanna flow some data from our app parent into pet. Let's see how you do that, so what I want is I wanna get some sort of like object in here. Let's just call it props and I wanna use these props here, these properties that are gonna be passed in from the parent here.

[00:09:19]
So instead of having Luna here I'm gonna have props dot name, instead of having dog here I'm gonna have props dot animal. Instead of having Havanese here I'm gonna have props dot breed Okay, so now it's expecting something from its parent that it needs to be passed into so that it can render it.

[00:09:46]
So it shows you here like here I can give it like an ID of whatever. Same thing applies here for properties passed into a component, I can just say all right, here's properties I wanna give to pet. I wanna give it an animal of We'll just use Luna again here, animal is gonna be dog, though, the name is gonna be Luna and the breed is gonna be Havanese.

[00:10:24]
And let's just copy and paste that a few times here. This one instead of being a dog, let's make this was my childhood bird, so this is gonna be a bird. And the bird same was Pepper I was a very creative child that we had a black and white bird which I named Pepper I thought that was very clever it was not, it was not clever.

[00:10:49]
Pepper was a cocktail. And this was my neighbor's cat, which I just has the best name ever, the name of the cat was Doink. And there was some mixed breed, we called the cat Doink because it was mostly blind so we just run into walls all the time, it's very charming cat.

[00:11:12]
So now what do I expect to see? Can be really similar, same amount of divs and H ones and H twos but now I'm gonna have a more flexible structure here, right? And it's gonna have a different name for each one, it's gonna have a different breed and different animal.

[00:11:29]
So if I go back over here and refresh the page, you can see here I have Luna, I have Pepper and I have Doink. And again, one way data flow I have information flowing from App into pet right through these properties. But how would data, like how would pet ever mess with app?

[00:11:49]
It can't, right? It has no concept of where or how it's being rendered, pet is just simply a function. No pun intended, actually is that it's just a function of its state, right it gets props passed into it and it renders itself based on whatever the state I did, right?

[00:12:08]
And you can do like right now I'm just doing strings but I could do is dark mode, right. And I could have this one be true and this one be false and all that kind of stuff and go back and forth that way, right? You can pass any sort of state in there, you can pass objects you can pass URLs like whatever you need to do there.

[00:12:25]
And we're gonna do all sorts of wild stuff with state but that is how you pass information down from parents to children.