1
00:00:00,330 --> 00:00:00,810
Beautiful.

2
00:00:00,930 --> 00:00:03,560
Now let's get to work all right away.

3
00:00:03,570 --> 00:00:07,010
Open up, localhost three thousand on line.

4
00:00:07,060 --> 00:00:13,530
Also, I would want to navigate back to my people and of course, I'm looking for the project number

5
00:00:13,530 --> 00:00:18,060
11, the name is number and more specifically, the set up folder.

6
00:00:18,330 --> 00:00:20,780
So I'll make sure that I'm in the route.

7
00:00:20,820 --> 00:00:27,960
And then, of course, once I'm there, I'm just going to go with City and then I'm looking for my setup

8
00:00:27,960 --> 00:00:28,410
folder.

9
00:00:28,800 --> 00:00:29,530
There it is.

10
00:00:29,550 --> 00:00:38,760
Now I'm here and of course, I'm going to go npm install an amp and start with spin up of the server.

11
00:00:38,970 --> 00:00:45,780
Of course, once the dependencies are installed and as far as the project, we've got app Jayesh where

12
00:00:45,860 --> 00:00:47,670
we're going to run the number.

13
00:00:47,970 --> 00:00:50,340
So this is where we'll render at the moment.

14
00:00:50,340 --> 00:00:51,770
Again, there's not much in there.

15
00:00:51,810 --> 00:00:57,870
It is just aiming for and also in the process, we are going to add a logo.

16
00:00:58,200 --> 00:01:01,920
That's why we have a logo file here as well, logo, SPG.

17
00:01:02,310 --> 00:01:08,790
And then we've got a data now not going to talk about data right now because I don't think he is going

18
00:01:08,790 --> 00:01:10,290
to make too much sense.

19
00:01:10,560 --> 00:01:12,180
But then later, of course, yes.

20
00:01:12,240 --> 00:01:15,750
During the project, we will use this file as well.

21
00:01:15,960 --> 00:01:24,060
Essentially more you can notice in the data right now is just two hours, one for lunch and one for

22
00:01:24,060 --> 00:01:25,320
social program.

23
00:01:25,510 --> 00:01:27,300
As far as the data inside the array.

24
00:01:27,570 --> 00:01:29,550
It doesn't make much sense.

25
00:01:29,910 --> 00:01:33,600
So now what I would want is to navigate to an app.

26
00:01:33,600 --> 00:01:36,750
Just the notice here where we have the number.

27
00:01:37,080 --> 00:01:40,700
I would just want to render that nav bar component.

28
00:01:41,040 --> 00:01:47,580
And of course, I also would want to open up localhost three thousand here and I should see the number.

29
00:01:48,000 --> 00:01:54,200
And once I've got a number, then I'm going to navigate of course, through the nav bar component.

30
00:01:54,540 --> 00:01:58,710
And let's just start with a straightforward return.

31
00:01:58,980 --> 00:02:04,560
So eventually, yes, there's going to be all kinds of bells and whistles, but for the time being.

32
00:02:05,480 --> 00:02:11,900
Let's just work on a basic, straightforward return, so we're going to go with NAV and land inside

33
00:02:11,900 --> 00:02:16,940
of this nav, I would want to go with the div with a class of nerve center.

34
00:02:17,420 --> 00:02:24,890
So nerve center class and line inside of this, they're going to have I've had her I'm going to have

35
00:02:25,220 --> 00:02:29,060
links, container and also social icons.

36
00:02:29,300 --> 00:02:36,650
So we go with first def nav header that right after we go with links container.

37
00:02:36,990 --> 00:02:42,500
And then if you want to see the links, you need to add a class of shell container, which of course

38
00:02:42,500 --> 00:02:45,470
eventually we will do dynamically on line.

39
00:02:45,470 --> 00:02:49,310
Like I said, the last thing he is going to be the social icons.

40
00:02:49,340 --> 00:02:58,300
So on our list and on the class of social, um, icons like so so we save online.

41
00:02:58,370 --> 00:03:00,260
Let's start working on the map header.

42
00:03:00,620 --> 00:03:08,750
So in The Navigator, if I take a look at the project, I've got a logo as well as the toggle button.

43
00:03:08,900 --> 00:03:10,170
So let me make this smaller.

44
00:03:10,400 --> 00:03:12,680
This is going to be the look on a small screen.

45
00:03:12,860 --> 00:03:15,990
And of course, once we get to the big screen, there are going to be some changes.

46
00:03:16,220 --> 00:03:18,050
So now we're just dealing with this one.

47
00:03:18,230 --> 00:03:24,820
I would want to have my logo as well as the toggle button so we didn't have header.

48
00:03:24,860 --> 00:03:26,300
We're going to go with IMG.

49
00:03:26,600 --> 00:03:27,840
And as far as the source.

50
00:03:27,860 --> 00:03:34,850
Remember, we needed to import the file file name as logo SPG and then I just gave it a name of logo.

51
00:03:35,180 --> 00:03:36,410
So now I have the source.

52
00:03:36,410 --> 00:03:37,640
I'm just going to go with logo.

53
00:03:38,090 --> 00:03:40,790
And as far as the alternative, I don't know.

54
00:03:41,620 --> 00:03:46,720
I think I'm going to write a logo that should do it, and then let's set up our button.

55
00:03:46,870 --> 00:03:53,790
So right next to the logo, we're going to go with Button and we're going to add a class name of knive

56
00:03:54,220 --> 00:03:56,920
and then toggle on inside of the button.

57
00:03:57,220 --> 00:04:01,690
And we're want to use one of the react icons, more specifically F a bar.

58
00:04:01,690 --> 00:04:04,630
So F.A.A. and then Barsh.

59
00:04:05,050 --> 00:04:10,510
So so I said and now I have a logo as well as the button.

60
00:04:10,670 --> 00:04:11,170
Beautiful.

61
00:04:11,670 --> 00:04:17,760
Then we have a show container and inside of here I would want to place Álex.

62
00:04:17,980 --> 00:04:19,570
So I'm going to go on our list.

63
00:04:19,690 --> 00:04:26,320
It's going to have a class of links and that list item and then we're going to place a link now for

64
00:04:26,320 --> 00:04:32,920
the time being, for the project that are before react router, which we are going to cover later in

65
00:04:32,920 --> 00:04:34,920
tutorial for all the links.

66
00:04:34,930 --> 00:04:36,440
I'm just going to add a hash tag.

67
00:04:36,760 --> 00:04:40,300
Now, that is going to spit some warnings in a console.

68
00:04:41,200 --> 00:04:46,870
As far as react is concerned, but don't worry about it, there's really no point for me to cover react

69
00:04:47,170 --> 00:04:54,610
right now and then once we cover the reactor, then we'll use links from reactor outr for the time being.

70
00:04:54,850 --> 00:05:01,750
Just go with links that have this dummy value hashtag or whatever, because we're not going to use traditional

71
00:05:01,750 --> 00:05:04,540
links at the end of the day in our react applications.

72
00:05:04,540 --> 00:05:11,170
Anyway, once we learn about reactor will use react router dom works OK.

73
00:05:11,470 --> 00:05:13,360
For the time being these are just drilling's.

74
00:05:13,690 --> 00:05:14,980
So here we go.

75
00:05:14,980 --> 00:05:16,810
We link online.

76
00:05:16,810 --> 00:05:18,400
We just need to come up with some kind of text.

77
00:05:18,400 --> 00:05:25,570
So I'm going to go with home and then I would want to grab this list item copy and paste four times

78
00:05:26,050 --> 00:05:28,160
and we're just going to change these powers around.

79
00:05:28,210 --> 00:05:29,590
So first one was home.

80
00:05:29,980 --> 00:05:34,270
Next one is going to be about and we've got contact.

81
00:05:34,720 --> 00:05:40,470
And then the last one will be products, products like so so we're separate.

82
00:05:40,780 --> 00:05:42,730
We should see our links.

83
00:05:42,730 --> 00:05:48,040
And the last thing we need to work on is the social media icons.

84
00:05:48,340 --> 00:05:56,980
So we go at list item, we have a link here and this one will actually have some kind of URL because

85
00:05:56,980 --> 00:06:00,690
you need to think of these ones as links around our project.

86
00:06:01,210 --> 00:06:04,480
So from Home Page, they're about to contact the product.

87
00:06:04,930 --> 00:06:08,890
And unlike the links of that, navigate around our project.

88
00:06:08,890 --> 00:06:11,550
Why don't we talk about social media links?

89
00:06:11,830 --> 00:06:18,940
Of course, they navigate somewhere externally, so they go to that social media platform and more specifically

90
00:06:19,180 --> 00:06:21,620
to some kind of specific account.

91
00:06:21,970 --> 00:06:28,930
That's why in here we're not going to add the hashtag, because for these ones we won't use react router.

92
00:06:29,230 --> 00:06:34,360
So react router will be only for the links that navigate around our project.

93
00:06:34,570 --> 00:06:36,940
And that's why I'm here right away.

94
00:06:36,950 --> 00:06:40,060
And the actually URL for the Twitter.

95
00:06:40,420 --> 00:06:49,860
So I'm going to go with HTTPS and then kolon to Forward Slasher's, Dub, Dub, Dub, Twitter and dot

96
00:06:49,870 --> 00:06:57,370
com and that inside of this link I'm going to place another icon and I'm looking forward to Twitter

97
00:06:57,370 --> 00:06:57,610
one.

98
00:06:58,000 --> 00:06:59,800
And of course it is already important.

99
00:07:00,190 --> 00:07:05,110
So we're going to go here with F.A.A. and on Twitter now to speed this up.

100
00:07:05,440 --> 00:07:10,960
I'm just going to copy and paste because we'll have to rebuild a few of these things in our way.

101
00:07:11,110 --> 00:07:16,030
We will rebuild the container because there are some downsides with this approach.

102
00:07:16,030 --> 00:07:17,530
But of course, I want to show you that.

103
00:07:17,910 --> 00:07:21,060
And also the same goes for social media icons.

104
00:07:21,340 --> 00:07:26,140
That's why I don't worry too much that essentially the link is exactly the same.

105
00:07:26,530 --> 00:07:28,480
Just copy and paste three times.

106
00:07:28,810 --> 00:07:36,010
And what you'll notice is that cannot see the social media icons on the screen, and that is by design.

107
00:07:36,340 --> 00:07:42,700
But then once you make the screen size bigger, of course, you'll notice that you have the social media

108
00:07:42,700 --> 00:07:48,760
icons, which essentially are links that navigate to Twitter, and then we have the links.

109
00:07:49,000 --> 00:07:54,970
So that should be our basic setup, where on a small screen we just see the links, we have the button

110
00:07:54,970 --> 00:07:56,050
that doesn't do anything.

111
00:07:56,320 --> 00:08:01,720
And then once we make the screen so smaller, then of course we have everything, we have the logo,

112
00:08:01,930 --> 00:08:06,370
we have the links and we have social media icons.

113
00:08:06,370 --> 00:08:12,610
And of course, these changes where the social media accounts are not displayed on small screen but

114
00:08:12,610 --> 00:08:16,000
are displayed on a big screen, are done in excess.

115
00:08:16,060 --> 00:08:19,780
So if you're interested, just navigate to index.

116
00:08:19,900 --> 00:08:25,720
Yes, you're looking for social icons, social and then icons.

117
00:08:25,960 --> 00:08:32,370
And you'll notice that once you get to a hundred, essentially we just display them.

118
00:08:32,560 --> 00:08:35,070
So by default, they will be noticed.

119
00:08:35,320 --> 00:08:41,650
We have display none for social media accounts and then only once we get to the 800, then we go with

120
00:08:41,650 --> 00:08:46,540
social media icons on display like that should be our basic setup.

121
00:08:46,540 --> 00:08:52,120
So then, of course, once we have this one in place, we can start working on more interesting features.