Vanilla React Components

[00:00:00]
>> Brian Holt: Let's make another component up here. We're gonna call it pizza.
>> Brian Holt: Okay, this is gonna be another component, and we're gonna say, return. Yeah, we have to do react.createElement.return.
>> Brian Holt: This can be a div. It's gonna be empty object here. We're gonna give it an array just for fun because we want to return multiple top level React components.

[00:00:37]
And that's how you do it, you do it with an array. React.createElement ( h1, {}), and this is gonna be the pepperoni pizza. Feel free to put in here whatever you want, if you like a pineapple on your pizza. No judgment here.
>> Brian Holt: All right, so we've now made this pizza component.

[00:01:07]
You see this is returning an array. This is the way that you return two siblings as a top-level component here. The other way that this could work, you can actually delete this and have it just to be like multiple parameters to the React create element, function. Honestly, it doesn't really matter because once we start getting into JSX, it's irrelevant of how it happens.

[00:01:35]
But just so under the hood, JSX will convert this to an array, which occasionally can be useful or it's at least good to know or irrelevant, I don't know. You might forget it and who cares? Anyway, an array, so now we have this array and we want to render a bunch of pizzas inside of our app, right?

[00:01:59]
>> Brian Holt: So we're also gonna turn this into an array. I'm gonna move this create element inside of it as the first thing. And then I'm just gonna create a bunch of pizzas, react.createElementPizza, okay? And I'm just gonna make a couple of those.
>> Brian Holt: So something you might be gathering here, if it's a string, it's going to literally output that string to the DOM as like a DOM node, right?

[00:02:35]
And if it's a function or a React component of some variety, right? It's going to try and render that function. But the cool thing about React is you kind of get to treat them the same.
>> Brian Holt: Now you might be asking well, what happened to this stuff, right?

[00:02:57]
You can put it in there. So this will pass down properties into pizza. And we'll talk about that in just a second. And you can give pizza children elements as well, which we'll also talk about later. But just so it's the same function. It works exactly the same way because we have no nothing to give it as children because we have no properties to give it.

[00:03:15]
We can just omit all of it, which is what we're doing here, okay? So again, my favorite thing to do, what do we expect to happen here? And I like to work at the top of the tree, which is app, and then work my way down. All right, so we're gonna render into route app.

[00:03:32]
So we're gonna render this, then we're gonna have a div, and inside of that div, we're gonna have an h1 with Padre Ginos, which is what we had before, but then we have pizza here. Okay, so this is gonna go into pizza and it's gonna render an h1 with pepperoni pizza and a p with mozzarella cheese and pepperoni, okay?

[00:03:55]
It does it once and then it's gonna do it again. Another h1, another p, and it does so five different times, right? So far, so good makes sense? So how many h1s do you expect? It's kind of mildly a trick question.
>> Brian Holt: Six, right? Cuz you're gonna have five from the pizza and then one from Padre Gino's, right?

[00:04:20]
That's why it says mildly a trick question. And then how many p's do you expect? Five, all right, let's take a look.
>> Brian Holt: A lot of pepperoni pizza. Pretty cool though, right? You might get React yelling at you. Is this about keys? Yeah, just go ahead and straight up ignore React.

[00:04:46]
Doesn't know what it's talking about. Well, [LAUGH] talk about that. But for now, just ignore React. What you're doing is fine. Now I want to have multiple types of Pizza. I am a connoisseur of pizza. You might call me, you might not. So how do we do that?

[00:05:03]
What's cool is pizza can accept what these things called props, stands for properties, in case you're wondering. It probably was illuminating to no one. You probably got that right away. That's fine, it made me feel smart to say it, and we're gonna say here on props, we can pull things off of it that we pass down into it.

[00:05:24]
So we wanna give it whatever the name of the pizza is, and then we wanna give it a description, right? So we're gonna say props start I call it description, I did.
>> Brian Holt: So cool, now it's a bit more flexible. I can accept a name, I can accept a description.

[00:05:42]
Let's go ahead and add these to our pizzas. So this is where this object is gonna come in handy. Now we can come in here and say object and we're gonna give it a name and we'll give it. But this one can be the pepperoni pizza and the description can be, I have like nice looking descriptions here and I'm not gonna do that cause I don't wanna type that much.

[00:06:12]
So some dope pizza, right? Something like that. Whatever you wanna put there. I'm not your mum Name, we're gonna put the Americano in here because I was just talking about it. And I want you to sit there and think about French fries on your pizza. That's really what I want from this.

[00:06:33]
French fries and hot dogs. What the WTF Italy. All right, there we go.
>> Brian Holt: Name, just to continue with the theme, we'll do the Hawaiian here next.
>> Brian Holt: Description, pineapple and ham, WTF America. All right, there we go.
>> Brian Holt: And now we have the world's worst pizza menu [LAUGH].

[00:07:09]
All right, outside of indicting many cultures with their pizza attitudes, what is interesting and useful here?, is now, this pizza component, became far more useful to us, right? We get to create this, like encapsulated bit of logic that handles everything about having a pizza. So if you imagine working with our Padre Geno's website that we're about to go build, you imagine that we have to display Pizza in various different parts of the website.

[00:07:39]
On the pizza of the day, we have to show it. On the orders page, we have to show it. On the past orders page, we have to show it. And now we just get like one pizza component that we just, if you give it the right information, it's going to display nicely and encapsulate all the logic for making a pizza, right?

[00:08:01]
It's kind of interesting to look at the history of React and why it's built this way. When React was created, the really big things on the market were model view controllers or model view view models of frameworks, which was like backbone an old Angular knockout. They all had these kind of like they were copying basically what Rails was doing on the back end, and they were trying to ship that logic to the front end.

[00:08:27]
I wrote lots of it, pretty good code bases. I mean, I'm not actually gonna really talk down too much to it, but React kinda had this epiphany is like, it's actually really easy to write websites with PHP, right? The page model really appealed to them were like, you have everything kind of mashed together for small things, right?

[00:08:50]
So instead of trying to separate, here's my model that talks to the database, here's my view of what people look at it. And here's the view model which connects the two things, they were let's take the model, the view and the view model and shove it together. So you have these components that contain everything for very small pieces of code.

[00:09:08]
That was kind of the PHP way unintentionally at the time, but I'll say that my first job was I was a PHP dev. I was very productive, right? I shipped a lot of code very quickly, so that is the story of React of how we got this idea of like, we're gonna take everything for these small components and we're going to shove them together.

[00:09:26]
So that you have everything for one concern in one place. And it turns out for UIs that's extremely useful because now we can have this Pizza logic. And instead of having to connect everything together, we have to connect the view model to all these different places. We just say, here's a pizza, and all the logic for pizza is contained in one space.

[00:09:48]
It's great I obviously have been doing it for a decade, so I stuck with it. So it's a really nice way of writing interfaces. You'll see this like little checkered flag here, if you click this should take you to the directory that we were in, right? So this is the no frills React one.

[00:10:05]
You'll click in there. You'll see that we have our app.js. This is a much more culturally sensitive version of what we were writing. Yeah, so if you got stuck, feel free to go grab this code or take a look. And you can diff between the two and say what's different, what worked, what didn't work, and just look for those checkered flags throughout the course.