1
00:00:00,210 --> 00:00:05,880
Before we start typing away, let me just quickly cover what are you going to find in a star project

2
00:00:06,480 --> 00:00:13,720
and why I made certain choices and everything that you need to know about the project you can find in

3
00:00:13,720 --> 00:00:15,180
the read me in there.

4
00:00:16,290 --> 00:00:21,030
I'll start by saying that all the services is already provided for you.

5
00:00:21,480 --> 00:00:23,590
So you'll find a global Silesian.

6
00:00:23,640 --> 00:00:30,540
The index is less than four specific components are used styled components library, which I'm going

7
00:00:30,540 --> 00:00:32,070
to cover in a second.

8
00:00:32,640 --> 00:00:40,050
Then when it comes to folders and files as well as imports in those files, everything is already set

9
00:00:40,050 --> 00:00:40,500
up for you.

10
00:00:41,010 --> 00:00:47,400
That's why when you check the integrated terminal, you'll notice that there are a bunch of warnings.

11
00:00:47,880 --> 00:00:49,140
Now, these are not errors.

12
00:00:49,230 --> 00:00:56,100
These are just warnings because, of course, since I have all the imports, but we're not using them.

13
00:00:56,690 --> 00:01:02,550
There sort of is just complaining that, hey, you imported such and such, but you are not using it.

14
00:01:03,180 --> 00:01:06,180
Now, why weren't this are all similar?

15
00:01:06,200 --> 00:01:13,110
Because it allows me to save time on a project, meaning we can get the project done in less time.

16
00:01:13,550 --> 00:01:15,900
And by doing so, we can add more features.

17
00:01:16,350 --> 00:01:23,190
Because I've noticed that creating a file and then setting up the import, it takes some time and it's

18
00:01:23,190 --> 00:01:28,540
much more easier if we can just focus on the functionality instead.

19
00:01:29,010 --> 00:01:34,860
Because that way, if the files and imports are already there, we can add more cool features.

20
00:01:35,370 --> 00:01:42,630
Now, why we don't have to spend a necessary time on during the imports and setting up the folders as

21
00:01:42,630 --> 00:01:43,260
well as the files.

22
00:01:43,800 --> 00:01:51,870
Now, the second thing is because I've noticed that a lot of times students get some silly bugs, but

23
00:01:51,870 --> 00:01:55,110
just simple fact that we all have our naming conventions.

24
00:01:55,740 --> 00:02:03,320
For example, I named my dashboard page dashboard, but you thing that you would want to name at home

25
00:02:03,770 --> 00:02:05,190
while at all is good.

26
00:02:05,550 --> 00:02:07,050
What happens is later.

27
00:02:07,140 --> 00:02:11,560
Of course, my functionality depends on the fact that I named my file dashboard.

28
00:02:12,390 --> 00:02:14,150
But you already rename it home.

29
00:02:14,160 --> 00:02:20,130
So a lot of times what I see, people spend unnecessary time on looking for bugs.

30
00:02:20,550 --> 00:02:21,710
So avoid that.

31
00:02:22,110 --> 00:02:24,600
I provided files and folders and all that.

32
00:02:25,020 --> 00:02:28,710
So when you're working on your own project, of course, you follow your own naming conventions.

33
00:02:29,130 --> 00:02:31,020
So you're not going to get those errors.

34
00:02:31,530 --> 00:02:37,260
Now, the only downside of that is the fact, of course, that you will get those warnings.

35
00:02:37,800 --> 00:02:43,980
Now, if you're really sensitive about it, for example, in a browser, you can simply turn them off.

36
00:02:44,610 --> 00:02:45,420
I mean, warnings.

37
00:02:45,510 --> 00:02:53,250
So if you go to the console and if you notice all these warnings, you can simply say that you are not

38
00:02:53,250 --> 00:02:56,550
going to be looking for the warnings and console while you're developing.

39
00:02:57,000 --> 00:03:03,640
Again, I think that in my opinion, the pros are bigger than the cons, of course.

40
00:03:03,660 --> 00:03:04,770
That is only in my opinion.

41
00:03:05,220 --> 00:03:08,760
But that's why I set up the project in the following way.

42
00:03:09,380 --> 00:03:16,920
Now, you will also notice something interesting where if in a folder I am exporting more components,

43
00:03:17,340 --> 00:03:18,660
you'll find the index.

44
00:03:19,950 --> 00:03:26,640
In that index Jass, you'll see the imports from the files and then one export.

45
00:03:27,300 --> 00:03:30,660
Now, why I was sending this up because of that way.

46
00:03:31,070 --> 00:03:34,710
What we can do is we can save lines of code.

47
00:03:35,150 --> 00:03:40,830
So essentially, for example, in the abcess, I have all these components coming from the pages folder.

48
00:03:41,160 --> 00:03:47,040
So instead of having a separate line for each and every import, I can simply say, yeah, get me the

49
00:03:47,040 --> 00:03:47,640
dashboard.

50
00:03:47,670 --> 00:03:49,230
Get me a log in or whatever.

51
00:03:49,230 --> 00:03:51,960
I'm exporting from the pages folder.

52
00:03:52,440 --> 00:03:55,650
And since I'm using index, for example, in pages.

53
00:03:55,710 --> 00:04:00,300
But you'll notice this pattern in different components as well, meaning in different folders.

54
00:04:00,820 --> 00:04:06,750
That since I'm setting everything up in the index, I also don't need to say forward slash and then

55
00:04:06,750 --> 00:04:07,100
the file.

56
00:04:07,800 --> 00:04:14,880
Because by default index is going to be the one that's first hit when we're looking for that pages.

57
00:04:15,210 --> 00:04:19,290
And then since in the index, I have all the imports in place.

58
00:04:20,100 --> 00:04:23,940
So I'm importing specific components from specific file.

59
00:04:24,390 --> 00:04:30,680
And then I'm just exporting everything as a named import mulloway in the app.

60
00:04:31,080 --> 00:04:32,700
I can also write a way, access them.

61
00:04:33,180 --> 00:04:37,560
Now, that shouldn't concern you too much because again, all the imports are you there.

62
00:04:37,980 --> 00:04:40,470
But I'm just explaining my setup.

63
00:04:40,710 --> 00:04:43,080
So we all are on the same page.

64
00:04:43,500 --> 00:04:45,440
So that should do it for the basic setup.

65
00:04:45,520 --> 00:04:48,660
And now let's talk about two more interesting things.

66
00:04:49,050 --> 00:04:51,350
One is the stalled component.

67
00:04:51,750 --> 00:04:54,530
And the second one is going to be react icons.

68
00:04:55,050 --> 00:04:57,930
So I said all the systems are already prepared.

69
00:04:58,560 --> 00:04:59,900
And then we have the.

70
00:05:00,190 --> 00:05:00,630
Styles.

71
00:05:00,820 --> 00:05:01,260
And by the way.

72
00:05:01,380 --> 00:05:02,040
Macharia them.

73
00:05:02,800 --> 00:05:05,590
So in the next year, us, you'll find the global styles.

74
00:05:05,950 --> 00:05:13,360
So once in a while we use those classes online for each and every component that has more styling.

75
00:05:13,390 --> 00:05:16,900
And I cannot get away with just global classes.

76
00:05:17,380 --> 00:05:19,420
We will use these tile components.

77
00:05:19,600 --> 00:05:22,590
Now, this project is not about style components.

78
00:05:23,110 --> 00:05:28,140
I'm just using style components so I can setup a specific services.

79
00:05:28,720 --> 00:05:31,610
Now, if you're interested, I have a course on style components.

80
00:05:31,630 --> 00:05:33,400
Of course you can enroll and learn more.

81
00:05:33,820 --> 00:05:39,750
Or if you'd want to just understand the basic setup you can navigate to their main docs.

82
00:05:40,360 --> 00:05:41,840
Just following this link.

83
00:05:42,400 --> 00:05:47,860
Now, to give you a quick and dirty intro, what we would want is each and every time we would want

84
00:05:47,860 --> 00:05:51,910
to use a sound component, we would import styles from style components.

85
00:05:52,240 --> 00:05:55,660
Now, of course, you would need to insert a library that goes without saying.

86
00:05:56,230 --> 00:05:58,780
And then there are multiple ways how you can set it up.

87
00:05:58,900 --> 00:06:03,560
By the way, if you want, you can check it in the main documentation or in my course.

88
00:06:03,970 --> 00:06:07,750
But the way we will do that will have our reac component.

89
00:06:08,140 --> 00:06:13,210
So what I write is gonna be dashboard page, log and page or user in four repos or whatever.

90
00:06:13,750 --> 00:06:18,460
And then from that component, we will return a style component.

91
00:06:18,820 --> 00:06:19,990
That's all you have to know.

92
00:06:20,470 --> 00:06:22,360
You don't have to bother with more info.

93
00:06:22,720 --> 00:06:28,000
That's all you have to know that in that reac component, there's going to be a style component which

94
00:06:28,000 --> 00:06:29,290
we can name whatever we want.

95
00:06:29,320 --> 00:06:32,470
But in my case, I always like to name them wrappers.

96
00:06:32,500 --> 00:06:34,960
But again, it's up to you.

97
00:06:35,080 --> 00:06:36,070
However you'd name them.

98
00:06:36,430 --> 00:06:42,670
And the way we set up that style component is coming up with some kind of name, which in my case is

99
00:06:42,670 --> 00:06:45,700
going to be, in most cases, wrapper and then styled.

100
00:06:46,670 --> 00:06:51,010
So whatever we imported, and then we're creating any kind of racial element.

101
00:06:51,380 --> 00:06:55,010
If you'll visit docks, you'll see that they're using the button as our main example.

102
00:06:55,340 --> 00:06:59,540
But in is going to be sections, articles, devs, whatever.

103
00:07:00,050 --> 00:07:04,550
And then we just simply pass here whatever styles we would want.

104
00:07:05,180 --> 00:07:12,740
Now, while Axtell components so much because they allow me to scope styles for that specific component.

105
00:07:13,150 --> 00:07:16,190
So that way I don't need to worry about naming collisions.

106
00:07:16,490 --> 00:07:21,500
And of course, since they're using JavaScript on their herd, there's a lot of cool features that we

107
00:07:21,500 --> 00:07:21,910
can use.

108
00:07:21,920 --> 00:07:27,740
But I can tell you honestly that in this project, when I was setting up CSX, I purposely avoided using

109
00:07:27,740 --> 00:07:32,660
those features because that would mean that I would need to explain what is happening with a stalled

110
00:07:32,660 --> 00:07:33,140
component.

111
00:07:33,500 --> 00:07:38,070
And since they are not our main concern in this project, that's why I avoid it.

112
00:07:38,210 --> 00:07:41,330
But hopefully that is clear as far as these torque components.

113
00:07:41,720 --> 00:07:43,070
And then let's talk about the icons.

114
00:07:43,100 --> 00:07:49,640
Now, there's many ways how we can add icons to our project, but I went with React Icons Library.

115
00:07:50,120 --> 00:07:56,510
And if you'd want to visit and you know this case, I will actually visit this page.

116
00:07:56,900 --> 00:07:58,190
So let me go over here.

117
00:07:58,400 --> 00:07:58,730
Yep.

118
00:07:59,090 --> 00:08:02,190
Now, this is unfortunately going to open up on a smaller browser window.

119
00:08:02,210 --> 00:08:03,260
That's not what I want.

120
00:08:03,630 --> 00:08:05,420
So let me navigate to a bigger one.

121
00:08:05,750 --> 00:08:08,150
So that's the library that I'm using.

122
00:08:08,720 --> 00:08:13,280
You can see that they offer many options, everything starting from font.

123
00:08:13,280 --> 00:08:13,850
Awesome.

124
00:08:13,880 --> 00:08:17,180
And then they have material design and all that.

125
00:08:17,740 --> 00:08:20,900
And the way to set up works, of course, we would need to install a library.

126
00:08:21,170 --> 00:08:23,030
Again, that goes without saying.

127
00:08:23,520 --> 00:08:27,980
And then if you'd want to import the icon, you just go with a name.

128
00:08:27,980 --> 00:08:28,490
The import.

129
00:08:28,640 --> 00:08:29,660
That is important.

130
00:08:30,260 --> 00:08:30,920
That is important.

131
00:08:30,920 --> 00:08:35,330
That you always need to use the name import because that's how they set everything up.

132
00:08:35,810 --> 00:08:38,060
And then which library is using.

133
00:08:38,480 --> 00:08:42,530
So if you navigate back, for example, you're gonna go with font.

134
00:08:42,560 --> 00:08:44,010
Awesome and Nourse.

135
00:08:44,360 --> 00:08:46,490
It just says get the icon name.

136
00:08:46,640 --> 00:08:48,500
So these are your options.

137
00:08:49,030 --> 00:08:51,520
And then you need to say a react icon.

138
00:08:51,620 --> 00:08:52,490
That's the library name.

139
00:08:52,820 --> 00:08:54,190
And then forward slash F.I..

140
00:08:54,680 --> 00:08:59,330
So if you're going to do the same thing with material design, we can already put two and two together

141
00:08:59,330 --> 00:09:00,410
where it says M.D.

142
00:09:01,370 --> 00:09:04,280
Now what I really like is just searching for the icon.

143
00:09:04,640 --> 00:09:06,260
So I can go off here for the user.

144
00:09:06,620 --> 00:09:08,690
And this gives me all the icons.

145
00:09:08,840 --> 00:09:11,420
So from all my options.

146
00:09:11,810 --> 00:09:13,040
And that way I can just pick it out.

147
00:09:13,100 --> 00:09:13,370
All right.

148
00:09:13,430 --> 00:09:14,510
I would want to choose this one.

149
00:09:14,870 --> 00:09:19,700
And then, of course, I just need to make sure I'm getting it from the correct library.

150
00:09:20,030 --> 00:09:24,270
Again, we import from the reactor icons and for slash.

151
00:09:24,830 --> 00:09:30,530
And the actual library that we're using, whether that's font awesome or material design or whatever,

152
00:09:30,830 --> 00:09:32,630
we need to have the same exact name.

153
00:09:33,020 --> 00:09:38,210
And then once we would want to use that icon, we just set it up as a component.

154
00:09:38,610 --> 00:09:44,420
And what I really like is the fact that you can even add a class name on that icon.

155
00:09:44,660 --> 00:09:49,640
So that way you can directly targeted and it returns the necessary G, which is even better.

156
00:09:49,970 --> 00:09:52,520
So overall, I really like this library.

157
00:09:52,940 --> 00:09:54,650
So that should do it for a star.

158
00:09:55,440 --> 00:09:58,280
Hopefully we are all on the same page.

159
00:09:58,730 --> 00:10:02,270
And of course, we can start typing away and building our awesome project.