Beautiful.
Now let's get to work all right away.
Open up, localhost three thousand on line.
Also, I would want to navigate back to my people and of course, I'm looking for the project number
11, the name is number and more specifically, the set up folder.
So I'll make sure that I'm in the route.
And then, of course, once I'm there, I'm just going to go with City and then I'm looking for my setup
folder.
There it is.
Now I'm here and of course, I'm going to go npm install an amp and start with spin up of the server.
Of course, once the dependencies are installed and as far as the project, we've got app Jayesh where
we're going to run the number.
So this is where we'll render at the moment.
Again, there's not much in there.
It is just aiming for and also in the process, we are going to add a logo.
That's why we have a logo file here as well, logo, SPG.
And then we've got a data now not going to talk about data right now because I don't think he is going
to make too much sense.
But then later, of course, yes.
During the project, we will use this file as well.
Essentially more you can notice in the data right now is just two hours, one for lunch and one for
social program.
As far as the data inside the array.
It doesn't make much sense.
So now what I would want is to navigate to an app.
Just the notice here where we have the number.
I would just want to render that nav bar component.
And of course, I also would want to open up localhost three thousand here and I should see the number.
And once I've got a number, then I'm going to navigate of course, through the nav bar component.
And let's just start with a straightforward return.
So eventually, yes, there's going to be all kinds of bells and whistles, but for the time being.
Let's just work on a basic, straightforward return, so we're going to go with NAV and land inside
of this nav, I would want to go with the div with a class of nerve center.
So nerve center class and line inside of this, they're going to have I've had her I'm going to have
links, container and also social icons.
So we go with first def nav header that right after we go with links container.
And then if you want to see the links, you need to add a class of shell container, which of course
eventually we will do dynamically on line.
Like I said, the last thing he is going to be the social icons.
So on our list and on the class of social, um, icons like so so we save online.
Let's start working on the map header.
So in The Navigator, if I take a look at the project, I've got a logo as well as the toggle button.
So let me make this smaller.
This is going to be the look on a small screen.
And of course, once we get to the big screen, there are going to be some changes.
So now we're just dealing with this one.
I would want to have my logo as well as the toggle button so we didn't have header.
We're going to go with IMG.
And as far as the source.
Remember, we needed to import the file file name as logo SPG and then I just gave it a name of logo.
So now I have the source.
I'm just going to go with logo.
And as far as the alternative, I don't know.
I think I'm going to write a logo that should do it, and then let's set up our button.
So right next to the logo, we're going to go with Button and we're going to add a class name of knive
and then toggle on inside of the button.
And we're want to use one of the react icons, more specifically F a bar.
So F.A.A. and then Barsh.
So so I said and now I have a logo as well as the button.
Beautiful.
Then we have a show container and inside of here I would want to place Álex.
So I'm going to go on our list.
It's going to have a class of links and that list item and then we're going to place a link now for
the time being, for the project that are before react router, which we are going to cover later in
tutorial for all the links.
I'm just going to add a hash tag.
Now, that is going to spit some warnings in a console.
As far as react is concerned, but don't worry about it, there's really no point for me to cover react
right now and then once we cover the reactor, then we'll use links from reactor outr for the time being.
Just go with links that have this dummy value hashtag or whatever, because we're not going to use traditional
links at the end of the day in our react applications.
Anyway, once we learn about reactor will use react router dom works OK.
For the time being these are just drilling's.
So here we go.
We link online.
We just need to come up with some kind of text.
So I'm going to go with home and then I would want to grab this list item copy and paste four times
and we're just going to change these powers around.
So first one was home.
Next one is going to be about and we've got contact.
And then the last one will be products, products like so so we're separate.
We should see our links.
And the last thing we need to work on is the social media icons.
So we go at list item, we have a link here and this one will actually have some kind of URL because
you need to think of these ones as links around our project.
So from Home Page, they're about to contact the product.
And unlike the links of that, navigate around our project.
Why don't we talk about social media links?
Of course, they navigate somewhere externally, so they go to that social media platform and more specifically
to some kind of specific account.
That's why in here we're not going to add the hashtag, because for these ones we won't use react router.
So react router will be only for the links that navigate around our project.
And that's why I'm here right away.
And the actually URL for the Twitter.
So I'm going to go with HTTPS and then kolon to Forward Slasher's, Dub, Dub, Dub, Twitter and dot
com and that inside of this link I'm going to place another icon and I'm looking forward to Twitter
one.
And of course it is already important.
So we're going to go here with F.A.A. and on Twitter now to speed this up.
I'm just going to copy and paste because we'll have to rebuild a few of these things in our way.
We will rebuild the container because there are some downsides with this approach.
But of course, I want to show you that.
And also the same goes for social media icons.
That's why I don't worry too much that essentially the link is exactly the same.
Just copy and paste three times.
And what you'll notice is that cannot see the social media icons on the screen, and that is by design.
But then once you make the screen size bigger, of course, you'll notice that you have the social media
icons, which essentially are links that navigate to Twitter, and then we have the links.
So that should be our basic setup, where on a small screen we just see the links, we have the button
that doesn't do anything.
And then once we make the screen so smaller, then of course we have everything, we have the logo,
we have the links and we have social media icons.
And of course, these changes where the social media accounts are not displayed on small screen but
are displayed on a big screen, are done in excess.
So if you're interested, just navigate to index.
Yes, you're looking for social icons, social and then icons.
And you'll notice that once you get to a hundred, essentially we just display them.
So by default, they will be noticed.
We have display none for social media accounts and then only once we get to the 800, then we go with
social media icons on display like that should be our basic setup.
So then, of course, once we have this one in place, we can start working on more interesting features.