1
00:00:00,150 --> 00:00:07,500
With our ReACT rotor complete we can start working on rest of the straight forward parts of our app

2
00:00:08,010 --> 00:00:14,160
and the straightforward parts that I'm talking about is going to be the number or the header.

3
00:00:14,160 --> 00:00:18,310
Then we're also going to set up a hero component in the home page.

4
00:00:18,330 --> 00:00:22,420
We're also going to do the about page as well as the aero page.

5
00:00:22,470 --> 00:00:28,710
So let's get those things out of the way and then we can start working on the context and all of the

6
00:00:28,740 --> 00:00:30,250
more difficult stuff.

7
00:00:30,300 --> 00:00:36,360
Now I'm gonna head over back to my app and then within the app just first I'm gonna import the header

8
00:00:36,810 --> 00:00:39,110
so the header is going to be where we're gonna have the number.

9
00:00:39,120 --> 00:00:44,340
Again if you're looking at components you're gonna have the heterogeneous with just a simple hello from

10
00:00:44,340 --> 00:00:48,580
header and first I would like to imported in the app drawer yes.

11
00:00:48,600 --> 00:00:52,220
So I'm gonna head over where I have the pages and run after the pages.

12
00:00:52,320 --> 00:00:55,660
I had a comment that by the way was misspelled name.

13
00:00:55,860 --> 00:01:01,370
So I was hoping you would correct me but you didn't so this should be components.

14
00:01:01,500 --> 00:01:08,580
Then we are importing a header header from and then of course we're looking for the header folder or

15
00:01:08,580 --> 00:01:15,660
I'm sorry not a header over components folder and then we're looking for our header component and then

16
00:01:15,750 --> 00:01:22,200
if we would want to render let's say now BAA in all of our pages we just need to place it within the

17
00:01:22,200 --> 00:01:28,830
router so outside of the switch but still within the router we're going to place our header component

18
00:01:29,270 --> 00:01:34,590
so I'm going to say header and then you're gonna notice that each and every page you're navigating to

19
00:01:34,950 --> 00:01:40,650
you're gonna have the header which currently just has a dumb heading one with a hello from header but

20
00:01:40,650 --> 00:01:45,000
eventually that is going to be the number and of course that's what we're looking for because each and

21
00:01:45,000 --> 00:01:49,650
every page would navigate to I would still want to have my number.

22
00:01:49,740 --> 00:01:55,560
Now once we have imported within the app just we're going to head over back to heterogeneous and then

23
00:01:55,560 --> 00:01:58,950
within the header James we would need to import a link.

24
00:01:58,950 --> 00:02:05,490
So in order to navigate around our project we're gonna have to use a link component that is coming from

25
00:02:05,970 --> 00:02:12,150
you guessed it react a router down and then for the time being we're not going to do any more imports

26
00:02:12,420 --> 00:02:16,320
later on there's gonna be user and all that but for the time being we're just going to leave it the

27
00:02:16,320 --> 00:02:17,120
way it is.

28
00:02:17,220 --> 00:02:22,820
And I'm also gonna change around my return so I'm not going to return a damn having one.

29
00:02:22,830 --> 00:02:28,940
Instead we're going to return a header and then this particular header is also gonna have a glass offender.

30
00:02:29,040 --> 00:02:35,760
So who would want to add a class name and just type the proper prob and then we just type in header

31
00:02:36,330 --> 00:02:42,770
and then within a header First I would like to place my logo somewhere have the I am G and we're gonna

32
00:02:42,780 --> 00:02:46,500
have to import our logo from our assets.

33
00:02:46,620 --> 00:02:52,510
So let's go with the import and get a name it logo and that is coming from the assets folder.

34
00:02:52,590 --> 00:02:59,190
So within the assets you're going to find a logo SPG and let's just place that logo.

35
00:02:59,190 --> 00:03:02,640
So let's write logo online for alternative.

36
00:03:02,640 --> 00:03:10,270
I don't know I'm just gonna say a vintage vintage vintage TEC logo.

37
00:03:10,380 --> 00:03:14,150
Let's save it and let's see how do we have of course our logo.

38
00:03:14,190 --> 00:03:14,920
Awesome.

39
00:03:14,940 --> 00:03:20,060
Now for the logo I'm going to add also a class name just so it's now not so massive.

40
00:03:20,130 --> 00:03:24,210
So the class name is going to be logo and of course now it's gonna be smaller.

41
00:03:24,630 --> 00:03:30,840
I would also like to point out that in fact if something doesn't look exactly the same when your computer

42
00:03:30,840 --> 00:03:31,630
is mine.

43
00:03:31,710 --> 00:03:36,750
Well one of the reasons could be the fact that I have massively zoomed in just so you can see it better.

44
00:03:36,810 --> 00:03:38,560
So I am at two hundred and fifty.

45
00:03:38,610 --> 00:03:41,700
So in your case probably this is going to look much smaller.

46
00:03:41,700 --> 00:03:43,230
So this is going to look something like that.

47
00:03:43,260 --> 00:03:49,560
But again I think that it's a little bit more useful if you can see it more clear of what is happening

48
00:03:49,560 --> 00:03:50,500
in my browser.

49
00:03:50,520 --> 00:03:55,530
That's the reason why I have zoomed in and then right after the image we're going to set up our NAV

50
00:03:55,530 --> 00:03:55,970
bar.

51
00:03:56,070 --> 00:04:03,660
So we're gonna have a nav element and then within the NAV element we're going to have a U L so on our

52
00:04:03,660 --> 00:04:11,760
list and then there's gonna be two divs and these two divs are just for the styling purposes more specifically

53
00:04:11,760 --> 00:04:13,290
for the layout purposes.

54
00:04:13,350 --> 00:04:18,930
So we're going to have a div and then within the first div there's gonna be few list items and then

55
00:04:18,930 --> 00:04:22,600
there's also gonna be the other day with more list items.

56
00:04:22,620 --> 00:04:28,260
So let me just create these two divs first and then within the first div we're gonna place the home

57
00:04:28,620 --> 00:04:35,280
about product and then the second one is gonna have this log in and cart and the way we set up the links

58
00:04:35,610 --> 00:04:41,210
is we're going to first have a list item and then we're going to have our link component and linked

59
00:04:41,250 --> 00:04:48,660
component has a prop so instead of having a link with an eye trip we in fact have a link component and

60
00:04:48,660 --> 00:04:53,350
then this component has the true bump and then we specifically say where we would want to navigate.

61
00:04:53,640 --> 00:05:00,780
So if this link is gonna be pointing towards the homepage then of course two needs to match to wherever

62
00:05:00,780 --> 00:05:03,170
you are all we had for the homepage.

63
00:05:03,240 --> 00:05:09,060
So if the path the home page was forward slash and you would want to direct a link to our home page

64
00:05:09,330 --> 00:05:13,590
course you'd need to make sure that both of these strings match.

65
00:05:13,590 --> 00:05:18,870
So for the home page this is just going to be a forward slash and that I'm gonna type in whatever text

66
00:05:18,870 --> 00:05:20,320
out of one for my home.

67
00:05:20,540 --> 00:05:21,730
Now I have my first line.

68
00:05:22,080 --> 00:05:27,540
So let me copy and paste it one too and then we're just going to turn this around where second one is

69
00:05:27,540 --> 00:05:33,980
gonna be about third one is going to be products and we're going to do the same thing with the names

70
00:05:34,430 --> 00:05:37,480
about a Zen product.

71
00:05:37,500 --> 00:05:41,090
So those are our first real links.

72
00:05:41,090 --> 00:05:47,040
We're gonna save it and then of course we're gonna work with our log in as well as the card.

73
00:05:47,460 --> 00:05:49,550
So the second one is going to be logging in card.

74
00:05:49,950 --> 00:05:51,770
Let's see whether I have zoomed in.

75
00:05:51,780 --> 00:05:52,120
Yep.

76
00:05:52,170 --> 00:05:53,340
I still have hundreds 50.

77
00:05:53,700 --> 00:05:58,110
Everything's fine so let's go with Ally again in this case.

78
00:05:58,190 --> 00:06:04,740
We are showing a link component link and of course we're going to navigate through a log page so forward

79
00:06:04,740 --> 00:06:10,310
slash log in and then the text is also going to be logging.

80
00:06:10,450 --> 00:06:15,160
Let me copy and paste the allies and we're going to do the same thing for the card.

81
00:06:15,900 --> 00:06:23,820
So we're going to have the card as well as the text is going to be card as a side note if I have links

82
00:06:23,880 --> 00:06:27,740
in multiple places in the project which currently we don't.

83
00:06:27,750 --> 00:06:31,960
And in this project in fact we're not going to have links in multiple places.

84
00:06:32,010 --> 00:06:36,320
I do like to have this info set up somewhere as a separate data.

85
00:06:36,480 --> 00:06:42,120
So that way I can loop over and lets say I can display it within that bar as well as the footer.

86
00:06:42,270 --> 00:06:48,420
And that way if I need to let's say change the path or the text I can do it in one place.

87
00:06:48,420 --> 00:06:54,480
So this is not probably the best case scenario where we're just hard coding but since we are just using

88
00:06:54,480 --> 00:06:57,200
in one place I mean we're just going to go with it.

89
00:06:57,420 --> 00:07:03,180
But again normally if you have links in multiple places it does make sense to set it up somewhere as

90
00:07:03,180 --> 00:07:06,550
a separate data and then just loop over it as an array.

91
00:07:06,570 --> 00:07:10,200
My guess I didn't do it but if you let's say would want to do that.

92
00:07:10,200 --> 00:07:12,710
That's definitely one of the options that you can have.

93
00:07:12,750 --> 00:07:17,590
And now we're going to head over to a bigger browser window which is going to test it out.

94
00:07:17,610 --> 00:07:23,550
So if I'm going to head over to a home page and a half hello from our bridge can navigate to about page

95
00:07:23,670 --> 00:07:29,460
and have about page and the products there and also log in as well as the car.

96
00:07:29,900 --> 00:07:33,360
And if we're going to test it out she'd still have the error page.

97
00:07:33,360 --> 00:07:37,890
So let's navigate to the hello and of course this is going to be on our Web page and you can see that

98
00:07:38,340 --> 00:07:44,180
every time we navigating to a different page we still have the Navarre as well as the logo.

99
00:07:44,310 --> 00:07:45,990
And of course that was our goal.

100
00:07:46,020 --> 00:07:47,480
So everything worked out really well.

101
00:07:47,850 --> 00:07:50,250
And now we can start working on our next component.