‫So with our new knowledge about JSX,
‫let's now create a couple more components
‫to keep building our application.
‫But before we do that, this is probably the perfect time
‫to show you the application as it will look like
‫after we are finished with this section.
‫So basically, we have this header here
‫with the name of a pizzeria.
‫Then down here we have the menu,
‫and then basically here we have some kind
‫of footer letting the user know
‫that the restaurant is currently open, and this button,
‫which of course doesn't do anything once we click it.
‫So, here is like the heart of this application,
‫which is the display of these six pizzas,
‫and notice how we already kind of displayed this pizza here.
‫And so here you see that we are going
‫to reuse this pizza component six times
‫in order to print these six pizzas.
‫All right?
‫But now, what I want to do in this lecture is
‫to basically focus more on these bigger layout components.
‫So, let's create one component
‫for each of these three big parts.
‫So, one for the header.
‫So, a component called Header,
‫and we can leave this empty for now.
‫We are just building out here the structure.
‫Then, one for the menu,
‫and then one for the footer.
‫And here, I'm always missing the parentheses,
‫so that's not good.
‫Yeah, nice.
‫And just by the way,
‫we could of course also write these functions
‫as function expressions and arrow functions.
‫So, we could also do const, let's just call it test,
‫equal function like this.
‫Or even simpler, it could be an arrow function.
‫So if you prefer these types of functions,
‫feel free to use those,
‫but I always like to use the regular function keywords
‫as I have been using.
‫But anyway, let's now return something from here.
‫And so here is where we write that name of the restaurant,
‫which is Fast React Pizza Company.
‫All right, and here we can now use this component instead
‫of this h1.
‫And again, we include it here
‫as if it was just any other HTML element,
‫and so that's the beauty of JSX.
‫So, it changed to Fast React Pizza Co. right here now,
‫and let's next up create a footer.
‫And here let's actually play around a little bit
‫with JSX and with create element.
‫So using the knowledge that we gained
‫in the previous lecture,
‫let's instead of immediately returning to JSX,
‫return a create element call.
‫So, React.createElement,
‫just so you can see how
‫bad it would be to write components this way without JSX.
‫So we want to return an HTML note, so an HTML element,
‫named footer.
‫Then here, the second argument is null
‫because it is for props,
‫and then here is the child element.
‫So here, we just want some text.
‫Let's say.
‫Anteriors must actually be a string now.
‫We're currently open.
‫And now, of course, we need
‫to then use the component here in the app.
‫So that's footer, close it immediately.
‫And let's check it out down here.
‫Yeah, there is our footer.
‫We can see that also here, at least if we had some space.
‫Yeah, so in the body we have, of course,
‫our root, where the entire application is rendered.
‫Then we have this div right here, which is this one.
‫So coming from the app component,
‫and then we have here the h1, which is this one here,
‫and then these three divs, each for one pizza,
‫and finally the footer that we just created.
‫So of course, here in the actual HTML
‫we will no longer see the name of our components, right?
‫Because once React renders everything into the dom,
‫it only renders the h1 element itself.
‫So the dom doesn't know that this h1 is actually coming
‫from this header component and that these divs,
‫for example, are actually coming from a pizza component.
‫This webpage that is now being rendered here
‫has no idea about any of that.
‫Okay?
‫But anyway, going back here to our footer,
‫let's now just comment this out,
‫and then return what we actually want to return,
‫which is, for now, actually the same
‫but written in a nice way.
‫So we're currently open,
‫and now let's actually enter JavaScript mode here.
‫Why not, just to do some JavaScript in here,
‫and let's just display the current time.
‫We actually did that before.
‫So, just create a new date,
‫and then .toLocaleTimeString.
‫All right.
‫And so down here, we see that right now
‫it's this time we're currently open.
‫Nice.
‫So, this is the power of being able
‫to combine JavaScript basically right into the HTML.
‫So, just as we learned in the previous lecture.
‫Now finally, we have the menu here.
‫And what do we want in the menu?
‫Well, let's start by adding an h2 here,
‫just saying our menu,
‫and then let's actually place our pizzas here.
‫So, these pizzas should actually be part of the menu.
‫So, let's do that.
‫You can just write pizza, but then of course,
‫React is not going to be happy about that,
‫because remember each time that we write one piece of JSX,
‫that JSX can only have basically one root element.
‫All right.
‫So, let's remove all the pizzas.
‫So, I'm cutting them and place them here.
‫And now they are gone from here,
‫because we didn't include the menu yet.
‫So, let's quickly do that.
‫And there we go.
‫So we have the same result as before,
‫but now our components are even more nested.
‫So all of this here is the app component,
‫and then inside the app
‫we have the menu component nested into it,
‫and then inside the menu
‫we have these four pizza components.
‫And so, now you really start to see this idea
‫that we built complex user interfaces
‫by combining small components into bigger ones.
‫So, we have these really small pizza components,
‫then we combine a couple of them
‫into one slightly bigger component,
‫which is the menu, which we then combine with header
‫and footer to create the overall big app component.