All language subtitles for 7. Creating More Components

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 time 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 keyword 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 one.

And again, we include it here.

As if it was just any other element.

And so that's the beauty of.

So it changed to fast react pizza code right here now and let's next up, create a footer.

And here, let's actually play around a little bit with DJs and with Create Element.

So using the knowledge that we gained in the previous lecture, let's instead of immediately returning

the DJs return a create element call.

So react dot create element 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.

Interiors must actually be a string now.

Were.

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.

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 a body we have of course or route 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 web page 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 dot to local time string.

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 JS that 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 build 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.