1
00:00:00,450 --> 00:00:01,320
Not bad, not bad.

2
00:00:01,620 --> 00:00:04,410
We're almost ready to start with React router.

3
00:00:04,950 --> 00:00:09,390
But before we do that, I want to set up a separate component for the logo.

4
00:00:09,630 --> 00:00:09,990
Why?

5
00:00:10,410 --> 00:00:14,970
Well, because in the application, we will reuse it in quite a few places.

6
00:00:14,970 --> 00:00:22,800
So it kind of makes sense that we have a separate component where we do have the import as well as the

7
00:00:22,950 --> 00:00:25,110
image tag with the class and everything.

8
00:00:25,620 --> 00:00:27,000
So let's start working on that.

9
00:00:27,420 --> 00:00:31,320
Essentially, what I want you to do is to create a components folder.

10
00:00:31,860 --> 00:00:35,580
And as you can imagine, well placed, there are quite a few components.

11
00:00:36,240 --> 00:00:41,650
I want you to create a logo jazz file, then move the import for the image.

12
00:00:41,670 --> 00:00:48,690
And if you have to, you need to set up the correct path for the image for the logo on and then set

13
00:00:48,690 --> 00:00:49,740
up the image logic.

14
00:00:50,190 --> 00:00:56,340
So that doesn't change pretty much whatever we have right now and then set it up as default export.

15
00:00:56,640 --> 00:01:05,099
And then at the very end, I'll show you my preference for setting up exports and imports in the components

16
00:01:05,099 --> 00:01:05,489
folder.

17
00:01:06,000 --> 00:01:12,270
So that's coming up, and I'm going to start by navigating back to my project and in here, I'm looking

18
00:01:12,270 --> 00:01:18,450
for the source and I want to start with new folder and we're going to go here where the components create

19
00:01:18,450 --> 00:01:18,840
the folder.

20
00:01:18,850 --> 00:01:21,000
And like I said, we're going to create a logo one.

21
00:01:21,630 --> 00:01:22,780
So logo.

22
00:01:22,900 --> 00:01:23,350
Yes.

23
00:01:23,820 --> 00:01:26,370
And in here, we want to set up the proper import.

24
00:01:26,700 --> 00:01:29,100
So now let's navigate back to the landing one.

25
00:01:30,120 --> 00:01:31,290
And if I take a look.

26
00:01:31,710 --> 00:01:37,320
Well, long, I'm still going to be sitting in the components so the path shouldn't change because we

27
00:01:37,320 --> 00:01:40,020
already have that master structure over here.

28
00:01:40,320 --> 00:01:43,670
So let me take this one now we're getting back to the logo.

29
00:01:43,680 --> 00:01:44,690
So important.

30
00:01:45,180 --> 00:01:47,620
And then the same goes for the image.

31
00:01:48,000 --> 00:01:51,120
So I'll just take this and then it's really up to you.

32
00:01:51,600 --> 00:01:58,980
If you want to set up a different logic where you pass in the custom class each and every time around,

33
00:01:58,980 --> 00:02:00,810
there is a component that's really up to you.

34
00:02:01,170 --> 00:02:03,030
In my case, I'm just going to keep that logo.

35
00:02:03,060 --> 00:02:03,480
Why?

36
00:02:03,780 --> 00:02:10,410
Well, because I know that in the places where I'll have to style, I'm going to be targeting that logo

37
00:02:10,410 --> 00:02:10,800
class.

38
00:02:11,310 --> 00:02:17,070
So in this case and the landing page, we're not targeting, but I always know that I can reach it if

39
00:02:17,070 --> 00:02:17,700
I have to.

40
00:02:18,060 --> 00:02:21,260
So what I'm trying to say here is concept and then logo.

41
00:02:21,270 --> 00:02:25,080
So let's create a VAT component, then let's go with the return.

42
00:02:25,500 --> 00:02:32,220
And again, if you want, you can set up here a custom logic where each and every time you render this

43
00:02:32,220 --> 00:02:32,760
component.

44
00:02:33,700 --> 00:02:39,790
You can set up some kind of prop the value for the prop is going to be attached to this class.

45
00:02:40,090 --> 00:02:41,860
Now that's not what I'm going to be doing.

46
00:02:42,100 --> 00:02:47,530
So I'm just going to leave it the way it is, and I always remember that I have this logo class that

47
00:02:47,530 --> 00:02:48,820
I can always style.

48
00:02:48,910 --> 00:02:52,750
So let's go here with export default and we're looking for the logo.

49
00:02:53,140 --> 00:02:56,350
So let's set this up and back in the landing.

50
00:02:56,620 --> 00:02:58,600
Now we're finally want to go with import.

51
00:02:59,080 --> 00:03:00,820
And we're looking for a logo.

52
00:03:01,150 --> 00:03:01,510
Correct.

53
00:03:01,540 --> 00:03:06,580
So it's going to be in the components and we go here with a logo component.

54
00:03:06,910 --> 00:03:07,840
So let's save it.

55
00:03:08,320 --> 00:03:12,970
And again, if nothing breaks, that means that everything is correct.

56
00:03:13,150 --> 00:03:17,050
So let me just double check refresh and everything seems to be working.

57
00:03:17,050 --> 00:03:20,470
And if I come south, I shouldn't see the logo correct.

58
00:03:20,740 --> 00:03:24,910
So let me set it up properly, and now we're good to go.

59
00:03:25,330 --> 00:03:30,730
And lastly, let me just mention what is my preference when I'm setting up the folders in such a way.

60
00:03:31,330 --> 00:03:36,640
So at the moment, I'm importing logo from the components and everything is awesome, but we need to

61
00:03:36,640 --> 00:03:40,690
keep in mind that components folder is going to be somewhat big.

62
00:03:41,380 --> 00:03:45,490
So what ends up happening will have to make bunch of imports like this.

63
00:03:45,940 --> 00:03:50,620
So there's going to be a side bar, maybe, maybe some other components.

64
00:03:51,020 --> 00:03:57,700
And my preference is always set up the index just here in the components folder or any other folder

65
00:03:57,700 --> 00:03:59,200
where I have a bunch of files.

66
00:03:59,620 --> 00:04:04,990
And the reason why I didn't do that with wrappers is because, well, these ones will be one profile,

67
00:04:05,260 --> 00:04:12,220
but with components that could be multiple components, profile and not in that index address, I actually

68
00:04:12,220 --> 00:04:14,470
have already import for the logo.

69
00:04:14,890 --> 00:04:16,930
And then I export everything.

70
00:04:17,410 --> 00:04:21,190
And if this doesn't make any sense, I'll show you that in a second.

71
00:04:21,700 --> 00:04:28,270
So for now, what I want to do is just remove this logo and then back in the pages.

72
00:04:28,870 --> 00:04:33,040
We're going to go with it next year, and that is going to be a default export.

73
00:04:33,370 --> 00:04:35,080
And not inside of its pages.

74
00:04:35,230 --> 00:04:37,570
Now I'm looking for that logo.

75
00:04:37,960 --> 00:04:39,250
So let's say your logo.

76
00:04:39,580 --> 00:04:41,770
And then I want to set up the export.

77
00:04:42,070 --> 00:04:44,710
So I'm going to go here, export and logo.

78
00:04:44,980 --> 00:04:51,160
And now every time I'm going to create a new file here in the components, I'll also set it up here

79
00:04:51,340 --> 00:04:52,370
in the next year.

80
00:04:52,600 --> 00:05:00,460
And as a result, back in the landing one now, instead of looking one file at a time, I'm going to

81
00:05:00,460 --> 00:05:01,840
be able to look at import.

82
00:05:02,210 --> 00:05:04,600
And then I'm just specifically saying what I'm looking for.

83
00:05:04,690 --> 00:05:09,580
So in this case, it is logo and that it is coming from the components.

84
00:05:09,970 --> 00:05:10,750
So we go here.

85
00:05:10,790 --> 00:05:11,150
Notice.

86
00:05:11,440 --> 00:05:16,840
I don't need to specifically say the path because basically index will be the default one.

87
00:05:17,320 --> 00:05:21,430
And then I'm looking for the logo over here and it looks like I have a bug.

88
00:05:21,760 --> 00:05:26,140
And of course, the bug is following where I set up the index just in the pages.

89
00:05:26,320 --> 00:05:27,040
My apologies.

90
00:05:27,370 --> 00:05:31,510
So what do we want to do is to move this up to a component and then everything is going to work.

91
00:05:32,350 --> 00:05:32,920
My bad?

92
00:05:33,160 --> 00:05:35,310
So let me go back here in the next.

93
00:05:35,320 --> 00:05:36,670
Yes, I'll save everything.

94
00:05:36,850 --> 00:05:37,600
Let's refresh.

95
00:05:37,870 --> 00:05:39,520
Now, of course, everything is working.

96
00:05:39,910 --> 00:05:42,430
And the thing is, we'll do the same thing in two pages.

97
00:05:42,730 --> 00:05:48,250
So at the moment, we have only one page, but eventually there's going to be more and it's always my

98
00:05:48,250 --> 00:05:49,970
preference to set up this image.

99
00:05:50,290 --> 00:05:55,870
Again, we're not doing that for the wrappers because for wrappers, I pretty much know that for every

100
00:05:55,870 --> 00:05:57,920
file, there's only going to be one wrapper.

101
00:05:58,330 --> 00:06:02,920
But for two components, it's different in the landing page at the moment.

102
00:06:03,130 --> 00:06:08,860
We have only this one logo, but essentially as we move from page to page component two component,

103
00:06:09,160 --> 00:06:14,740
there's going to be multiple components imported, and that's why it's my preference to set up this

104
00:06:14,740 --> 00:06:15,310
export.

105
00:06:16,420 --> 00:06:22,210
Such a matter where I'm only looking for index one, meaning I'm only looking for the folder and then

106
00:06:22,210 --> 00:06:28,840
I can specifically say what I'm looking for instead of creating a import line for every component.

107
00:06:28,930 --> 00:06:33,550
Hopefully this makes sense and I can finally dive into or react router.