Hello, everyone, and welcome.
And the previous part we completed with the navar landing page and a photo containing icons to our social
media handles.
So now we're going to move forward and create our list of the things.
First of all, let me just start this hour and start.
And Bill's always starting, let me just create another page, which will be my new dawgs.
Gorgeous and.
Now will use a cool trick to import snippets of boilerplate code that is the odyssey that we have to.
Boilerplate.
Now we're going to create some lives.
The first one will be my new.
The second one would be.
When you tighten.
And the third one would be when you list.
OK.
They will start menu just for their testing purpose, and we'll head soup.
OK.
And.
And then we'll go to.
After just where?
And we will create another path for on the road, basically for the menu page, but its part will be.
And new and exact.
Component will be.
OK.
So by doing this important, it's important the wrong one.
You see, this is from my my anyway.
We don't want this, OK?
I'm the wrong.
But we'll just try.
And you from from.
On Pages Clash.
Many.
That's right, and we need to step.
And.
We're just compiling.
And when we go to a new.
Now, let me take you to the browser and let me just show you how that looks.
Let me just go to the menu.
It's not working right now because we have not configured than I have.
Let me just take you from that.
You want to.
OK.
You can see menu is rendered menus under.
That means a component is being rendered now.
Next, we will do it how and what to display, but it's been rendered.
That is the good part.
Tim will configure it from here, so don't worry from the never.
But right now, most important thing is that it's been rendered.
So let's just go back to school.
And now I will create another component or the folder, which you will, which will be containing the
data, which we want to display, like determines the image of the dish, the name of the dish, the
price of the dish, everything of them.
So for that, we need to create another folder.
You can create it or you can place the file anywhere, but I will get it in the source only.
But that will be data.
It could be data and other data.
I will create.
They turn dogs.
And we will try.
Export.
Bonds and that will be data is equal to an array, an array of what an array of objects.
So how will have key value pairs which will be containing the mean image and everything of a dish?
So how will give name?
And.
William and will be the name like.
First fish and will give a comma an image.
So this is an image.
And the third thing will be the price.
And but I don't need the politicians right.
It's a numerical loser.
You can write it like and anytime you anything you want.
So it's just a number, right?
So you can write it like this and just and just save it.
OK, so this is an array of objects and the objects that are key value pairs.
OK.
So you can just go back to menu.
And basically, this data won't work, actually, because we we have taken this dummy data who actually
I've already created, like I've searched for some dishes and along with the photos title and the price.
So let me just piece that data here.
Let me just paste that data so that you can have a clear look of everything and.
So this is all the data, huh?
So this is all the food which we are going to sell on our website.
So these are all the importations of the image we have all imported by image and.
There's just a.
An image and everything else, so we'll just save it.
And now we go back to our menu dot Jesus.
Now what we've got going to do is we are going to import the data like.
Import.
Data from.
Maybe we can go to.
Data.
Then slash it up.
We call it the only.
OK, now what we are going to do is use the map function.
Now, if you are new to react and if we don't know about the map function, I would highly recommend
you to go and learn the map function from the script.
It is really, really important.
If you don't know the map function, you need to learn it.
It's really, really important.
So let's just let's just start with the map function.
We've already imported data, so now we'll use malfunction.
So map function is a JavaScript.
So to use JavaScript inside the written statement, you need to use coronaviruses.
So inside the calibrations, only you can use JavaScript.
So we'll use the name of the component that is due to a dot dot map.
And.
This is a function, and inside this very will, we will be creating another function.
So this will be a federal function and the Fed does index to federal functions, something like that.
Apprentices and then equal to and then design and clearances.
And so this is a written statement.
If you write written, it's OK.
And if you don't even write it down, you can just write whatever you need to return it like whatever
the function that you need to return over here.
So here we will provide those things.
That is that it expects two arguments basically first variable and second is the idea of the key.
So air will provide menu item, maybe.
Menu item Solecki.
I'm in coma and then so head, we will provide that what we want to return, so we'll provide written,
written statement and we provide this.
And inside OFA will provide our live.
Closing for the death.
OK.
And inside here we will be providing, for example, my new menu and item.
Dog name, maybe, or price, whatever you want to display here.
So this will also be another cuddly place like this.
And then we just say this, and let's just see that any errors are errors.
So data does not contain an export.
OK, we to export the data.
OK.
And this is named as.
Data and then we see it.
And our default export, so that is why we need to put this in the curly braces.
So this also you need to keep in mind that whenever you are importing a constant or or an array from
another component, so you need to put that inside the car.
So that's a really, really important thing to keep in mind.
So there are some adults.
We can't resolve the images, so that is just a normal thing.
And.
It would.
So the name was different here.
It asserts, and we were writing assets.
So I hope now we can render it and go back to the menu here.
Let me take you to the browser first outlooks on the browser.
Let me refresh.
You can see all the names of the best we can see.
And if we change, if we change it to price, maybe from name to price.
And then we heard Save.
And then we go back to the browser.
And we'll see the prices, you can see the prices are displayed here.
So this is what we are going to do now for this review, and we are using the map function because it
is all about like, I don't want to create separate, separate lives and separate separate containers
for every single dish.
Like if I used to, if I wanted to create like one card.
So I don't want to create a card for every single dish and I create every single container and every
single like HDMI of what every single other container.
So that is what we need to keep in mind.
So that is why I'm going to create a standard, a standard container like we used like nav, bar and
footer, and we are using it on every single page.
So just exactly like it, we are going to create another container, which we will be naming as a.
As menu item, so that menu item will be inside the components folder, so.
Let's just go to the components folder and let us create another file that will be.
Menu item dark.
Yes.
Let me just use our trick, which is our key.
OK.
And inside the menu, I don't we'll be having two deaths, and the first one is for the menu item,
and second is is just a normal day and.
It will mean we will be naming it as menu item, so.
Menu item.
And we'll be having another live.
OK, so inside this, do this do will be basically for the image or we'll be using an image for.
But are like display.
So we will provide style to this.
It will be styled.
Background image and how it will provide tactics, and we'll try to you all and this through dollar
sign and provide this.
So here we'll be providing we'll be passing props in this function.
So the props will be Image's name and price the image name.
Price, and then here it will be, it will be image and it will be image and.
Next, we'll be having an one with name.
And you know this, we'll be having an each one with name.
So we are using Dow script, so it will be inside the calligraphers name.
Next, we'll be having a big dog.
Detached insiders will be having the price.
So.
Right.
And in front of this price, we will be using the rupee symbol.
So you need to search for the rupee symbol and you need to just be stood in front of this.
So we'll be using rupee symbol and then we save.
OK, so now we are going to map through the data and we are going to grab the data from the data logs
and every single data, like every single object, will be given one of them one of this one on this
container, which will be saving its image, title and price.
So then every single container will be loading and the data will be having its own guide.
So let me just show you what I'm talking, if you are a beginner and if you do not react, this might
seem a little weird to you.
This might be a little hard to digest, but if you are a beginner or an intermediate level to react,
you know what exactly I'm trying to say.
So if you are new and you are having a little problem, dude, I just don't.
Don't worry, this is a little tricky.
If you go through it through two or three times, you will be understanding what I'm trying to say.
Now we go to the menu and we want to provide this content, which we created as a menu item to every
single data, every single dish.
What I'm trying to say.
So first of all, I'll import it.
So import.
Menu item.
Not.
On.
From.
It's where attitudes and components.
I'm quite OK.
And now in place of this live, we will be providing we will be providing this.
This container of IPA component to this menu item.
Who will be using return and for wrapping this?
This.
OK.
What what what was strong?
OK, so we will be passing those same exact same props and.
That is the key image and price, so key will be.
He.
And we'll be providing space, then we'll provide you meet, so that's that will be a menu item type
image.
Next, we'll be having.
Image and then guess the name.
Full name will be.
Menu item dog name.
Next will be having price or price will be.
Main menu item guide Price, and then we'll save it, so it will look something like this, and I hope
this works and when we go to the browser.
And it is compiling right now for.
We have we have not created any styles and CSIS file for.
We'll do that in a minute.
And then when we come to the browser, we see nothing, so there is something wrong and when we refresh,
so there is some error which we are not able to see.
So let me just go back to.
The.
Be escort and see if that is something we are missing out.
OK, so this should be in calibrates.
We forgot to put this in calligraphers.
Let me just save it.
I've saved it, and everything's OK.
Fast forward, and then we go to the browser.
OK, now we see the details, we see the picture, we see the title of the page, we see the price of
the dish.
So these are the only three things which we want to see, and every does have its own separate container.
That's a very good thing.
This looks a little weird because we have not yet imported the doxy as a.
So for that, we need to go to the style door to use this file and we need to like imported so.
Well, the styles will go to the menu and.
We'll go to the stables and we'll create the file that is the menu dog, see us.
So and we'll peace to see us here, and then we'll have to save.
And this is the CIUSSS I will like to see from the beginning of this year as to which we are using.
So let's go back and see how.
This is the CSIS I think you would want be seeing, so let me show you again.
This is the CSIS which we are using.
OK.
So let us just import this inside the menu.
So let me take that bold statement that is.
Inside the stars, that is the.
Yes.
Let me just save.
OK, so when we go to the browser, it shows like this, I don't know why it's getting messed up.
So let me just take a look at the CSIS.
There is something wrong with the sensors or when you go to the menu item, OK, this image tag is covering
it all.
So we need to move it from here.
Need to be stored here.
It should close right by here because this is just for this image.
We do need to wrap anything around it.
So when we go back, you can see now it's good and you can see our menu and this is the menu.
So now we have created the menu.
So next, we'll be moving on to the other components for.
That's it for this video, and in the next part, we'll be creating the about section and the content
section, and we'll be also adding the links to the neighbor to all the pages which we have created.
So then you see in the next part.