Creating the Order Component

[00:00:00]
>> Brian Holt: Hooks, let's talk about hooks. Hooks are the way that we can basically introduce interactivity, or side effects, or some other things to just a fairly normal React component. One thing we didn't chat too much about is, let's actually just go take a look at pizza.
>> Brian Holt: One of the key things here is this function body here.

[00:00:26]
It's a very hot code path, and when I say that, I mean it gets run a lot, right? So it renders and re-renders and re-renders. And if it sees nothing's changing, it doesn't change anything in the DOM, but as soon as it sees something change, then it'll go update it.

[00:00:39]
But the key here is, this gets run more than you see, right? And so it's important that you keep this to be a very performant. You don't wanna put very heavy lifting inside of your render paths, you wanna kinda pull it outside of the render path so it doesn't slow down your DOM rendering.

[00:00:58]
Cuz that's key because people will start to notice jank, right, things shifting around if they're too slow. So it's an important thing to be very performant on. So you don't have to follow up this, I'm just gonna kinda make an example really quick. But if I do something like counter = counter++;.

[00:01:30]
And let counter = 0. So instead of name for just to say R, which is after this, we'll put counter. All right, so you notice this has 0 on it, right? Right now, nothing's actually happening to our component, but if we start adding things to listen for events, right?

[00:01:53]
So let's just say, onClick=, we'll just do something that does literally nothing. So it's just like an empty function.
>> Brian Holt: So this is actually still smart enough to not render anything, that's pretty cool, okay?
>> Brian Holt: Still smart enough to not do anything. But, well, I mean, this is actually a good example.

[00:02:26]
You can even do something like data.now. So again, you would expect this to probably keep re-rendering itself, right? But the point I'm actually trying to drive home here is, you don't actually really know when React is gonna choose to re-render your components. And when it's gonna choose to re-render, you can see none of these are running ever.

[00:02:47]
In fact, these are actually different, which is funny to me, right? There was actually a millisecond difference between the two of these.
>> Brian Holt: That's because React is doing these re-render paths. And it's only gonna try and re-render whenever it's necessary, and it tries to not re-render when it's not necessary.

[00:03:06]
But you need to make sure that it's going to display the same markup every single time given the same inputs. So something like this, where data.now, or counter, where we were counting before, you would call these an effect, right, a side effect to your code. And you don't wanna have any of those.

[00:03:22]
Make sure that no matter when it's run, cuz you don't know when it's gonna run, it's always gonna give you an expected results given the inputs that you give into it, right? So if you were trying to display something where it was gonna display a clock, right, you would need to make sure that all of that was self-contained and the effects were being handled properly.

[00:03:41]
We'll get into that when we start talking about use effect, right? But my point here is, stuff like this where you're keeping track of variables outside of React, is a bad idea. And now I'm going to show you how you're supposed to keep track of statefulness inside of your React components.

[00:03:59]
So let's take away all this nonsense for now.
>> Brian Holt: All right, so let's go ahead and make another component here. We're gonna call it order.jsx. We're gonna make an order page.
>> Brian Holt: Feel free to follow along with me if you want to, this is a somewhat of a long component.

[00:04:27]
So if you wanna just copy and paste from the notes here, I'm not gonna judge you too harshly, just a little.
>> Brian Holt: All right, so another opinion here. I think it's a pretty good opinion. Notice here in pizza, we have an arrow function. And we export default here and order, I did it a different way where I'm doing a named function here called orders.

[00:05:00]
99.99% the same thing. The only thing where I actually kinda like this pattern better than the arrow function pattern is that when your app crashes, so if I have an error in here, order being a named function is gonna show up in the stack trace. So you can actually see order in your stack traces.

[00:05:18]
It helps with debugging, right? This pizza here, it would tell you it came from the pizza component, but it would not tell you the name of the function because, technically, this is not a named function, it's an anonymous function. It would be the same thing if I did const Pizza2 = function blah, right?

[00:05:40]
This is exactly the same thing, Pizza2 would not show up in the stack trace. Now, you might ask yourself, how important is that to me? It's not super important, right? But, it's probably enough for you to know that it's from the order file. You don't necessarily need to know that it's from the order function.

[00:06:01]
So let's just start writing a bunch of code, const pizzaType. We're gonna use this to keep track of what pizzaType they've selected, right? So this is the order page where they're gonna select what kind of pizza they want, what size they want, and they'll click order, or rather add to cart.

[00:06:15]
It's gonna be a pepperoni pizza. And we're gonna start with the pizza size of medium, these are the defaults. PizzaSize equals capital M for medium. And then we'll return a whole lot of markup.
>> Brian Holt: So we'll call this order. My CSS is structured in such a way that we don't have to write className on every single thing.

[00:06:45]
That's purely for the sake of this class so that you don't have to write className a bunch. In general, please give everything a class, don't do all the weird selector stuff that I did to make it easier for you. In other words, the CSS is intentionally bad to make it easier for you to write code.

[00:07:02]
That's generally not this trade-off that you would wanna make. All right, h2, this is gonna be Create Order page. It's gonna have a form, and then it's gonna have a div, and another div.
>> Brian Holt: And then we're gonna do a label. The label is gonna be for pizza-type, pizza Type.

[00:07:31]
Then we're gonna have a select name="pizza-type".
>> Brian Holt: We're gonna give it a value too, that'll be fun. Value = pizzaType.
>> Brian Holt: So value, just basically say, you're gonna set whatever the value of pizzaType is to the value here.
>> Brian Holt: Okay, we're gonna give it a couple of options.

[00:08:02]
Option value="pepperoni" >The Pepperoni Pizza. Okay, we're gonna make a few of those.
>> Brian Holt: Hawaiian.
>> Brian Holt: And this one was big_meat. The Big Meat Pizza. Okay, so far, if it feels like we're just writing a normal HTML form, it's cuz we're writing a normal HTML form.
>> Brian Holt: There's not a lot too interesting to talk about here.

[00:08:46]
Okay, that's the first div that we're escaping there, correct, yep.
>> Brian Holt: Make another div in here. And we're making another label, this is for pizza-size. And pizza-size, and this is Pizza Size, all right? Another div here, and we're gonna have some radio buttons, it's out of spans, input, checked=,
>> Brian Holt: (PizzaSize === 'S').

[00:09:30]
Again, my ligature is putting three equal signs together, that's why it looks like that fat equal sign. Type="radio", name="pizza-size", value="S", and id="pizza-s".
>> Brian Holt: Okay, and then we'll close that off.
>> Brian Holt: Get that all spaced out. And then we will do a label, again, for "pizza-s", and this is a small size.

[00:10:20]
>> Brian Holt: So we're doing radio buttons for all the various sizes of pizza, right? So I'm just gonna go ahead and copy and paste this span. And so I have the top one, which is gonna be small. This one is gonna be medium. So we'll just change all the places where it says S to M.

[00:10:48]
Right, so they're pretty similar, this one's just medium, this one's just small. Same thing here, this will be the large size.
>> Brian Holt: And Large.
>> Brian Holt: Okay, once we have that, and span and div, and next div, button. Type is gonna be "submit".
>> Brian Holt: Add to cart.
>> Brian Holt: Okay.

[00:11:47]
>> Brian Holt: And then inside of that, we're gonna put another div. Brian, you have too many divs, I'm not gonna disagree with you. "Order-pizza".
>> Brian Holt: Put a pizza in here. Right now we're just gonna give it a normal pepperoni pizza, but eventually, we'll make it dynamic, to be the one that you have selected, right?

[00:12:09]
But for now, we're just gonna say, "pepperoni", description=,
>> Brian Holt: "Another pizza". Whatever you wanna put there, image is going to be assigned "/public/pizzas/ pepperoni.webp", and then close that tag, okay? And then just underneath that, we just wanna put the price. We'll put that in a p and we'll just say, whatever you wanna put there, $13.37.

[00:12:53]
>> Brian Holt: Okay, so basically, we're just working on forms here, right? The classic thing for most webs, most stuff can be boiled down to, you're just submitting a form somewhere, right?
>> Brian Holt: Using some divs here, I know all the div seem excessive, but it's for the styling, right, just to kinda get everything grouped together visually.

[00:13:17]
And we got some radio buttons here, so they can be small, medium, or large, that sounds good. And we have a submit button that adds to cart, which will submit the form. We will get to how to handle that form submittal, but let's save here. So yeah, we've now created an order component.

[00:13:37]
We have to go use it before anything's gonna show up, right? So let's go to our app.jsx. We're going to delete the pizza import cuz we're not gonna use that now. We're gonna say, import Order from './Order', cool. And for now, we're just gonna make this the default home page.

[00:13:59]
So you're just gonna say, Order, okay?
>> Brian Holt: I think I'm very wide, cool. But you should see something that can do this. You'll probably have some errors in here, that's fine, ignore those for now.