1
00:00:00,180 --> 00:00:01,050
Not bad, not bad.

2
00:00:01,080 --> 00:00:03,360
We're familiar with Star Project.

3
00:00:03,390 --> 00:00:06,930
Next one up, we have style components.

4
00:00:06,960 --> 00:00:12,120
What are those bad boys and why we would want to use them before we continue, I just want to mention

5
00:00:12,120 --> 00:00:14,820
that I do have the course on style components.

6
00:00:15,090 --> 00:00:21,750
So if you're interested in more complicated setups that we're going to use in this particular project,

7
00:00:21,990 --> 00:00:28,590
as far as Dow components are concerned, consider enrolling in, of course, or you can also navigate

8
00:00:28,590 --> 00:00:32,800
to the docks and explore different setups as well.

9
00:00:33,240 --> 00:00:39,030
So just to showcase how you would get up and running with all components, we're going to navigate to

10
00:00:39,030 --> 00:00:41,640
their main docks and keep on scrolling.

11
00:00:41,640 --> 00:00:47,280
And essentially, in order to get Starwood stock components, you need install of the package.

12
00:00:47,460 --> 00:00:52,850
And of course, the commander would be installed as the shave and then styled components.

13
00:00:52,860 --> 00:00:56,650
Of course, I already installed styled components for you.

14
00:00:56,990 --> 00:01:01,920
That's why if you navigate your packages, then you'll see that we have the library.

15
00:01:02,340 --> 00:01:09,390
And to start using stale components, you need to import default from the stock components.

16
00:01:09,660 --> 00:01:11,730
And of course, you can call it whatever you want.

17
00:01:11,730 --> 00:01:12,950
You can call it MacGruber.

18
00:01:13,290 --> 00:01:19,530
But in this case, I'm going to go with style, since that is somewhat of a general convention.

19
00:01:20,250 --> 00:01:25,220
So I'm going with import styled from and then styled components.

20
00:01:25,230 --> 00:01:26,370
So that's my package.

21
00:01:26,790 --> 00:01:30,950
And then I don't have to set up separate or react component.

22
00:01:31,500 --> 00:01:37,470
So essentially, if I just want a simple element that I would want and the styles I need to come up

23
00:01:37,470 --> 00:01:38,020
with a name.

24
00:01:38,550 --> 00:01:40,860
So in my case, I always go with the wrapper.

25
00:01:40,860 --> 00:01:44,190
But of course you can, as I always call this, whatever you want.

26
00:01:44,430 --> 00:01:50,190
So let's say in this case, I'm going to call this button and then we set it equal to styled and then

27
00:01:50,190 --> 00:01:53,040
whichever HDMI element we would want.

28
00:01:53,310 --> 00:01:56,040
So if you want to set out, then of course you would right the button.

29
00:01:56,370 --> 00:02:00,630
If you want to set up their view right here or there, if you want to set up the article, hopefully

30
00:02:00,630 --> 00:02:01,450
you get the idea.

31
00:02:01,710 --> 00:02:05,820
So in this case, since I have the name for the button, I might as well create a button.

32
00:02:06,270 --> 00:02:11,360
And then we have this interesting syntax of two backpacks.

33
00:02:11,760 --> 00:02:13,230
So what is this one?

34
00:02:13,410 --> 00:02:21,060
This is a Joska feature, so it's not like styled components invented that and it is called tag template

35
00:02:21,060 --> 00:02:21,720
literals.

36
00:02:22,170 --> 00:02:28,200
And essentially what that means is that this is going to be a function and the way styled components

37
00:02:28,200 --> 00:02:34,530
use it will just pass in the success that we would want to apply to this element.

38
00:02:34,830 --> 00:02:37,480
So this is how we're creating this component.

39
00:02:37,530 --> 00:02:41,130
We don't have to go and create a separate component.

40
00:02:41,410 --> 00:02:43,560
Essentially, it's going to be done for us.

41
00:02:44,280 --> 00:02:49,260
And I'm going to start with simple styling, simple color styling so we can see how it works.

42
00:02:49,570 --> 00:02:53,520
I'm going to go with background green and then color light.

43
00:02:53,850 --> 00:03:01,140
And you notice that if I'm just going to grab the button right now, I'm going to be able to render

44
00:03:01,470 --> 00:03:02,280
SERN here.

45
00:03:03,240 --> 00:03:10,320
Instead of the heading for I'm going to add another Dave here, I'll make sure that I'm returning,

46
00:03:10,320 --> 00:03:16,560
of course, and I'm just going to go with my button component, which, of course, is right now my

47
00:03:16,560 --> 00:03:20,950
components installed components create that as a react component.

48
00:03:21,300 --> 00:03:26,700
So in this case, I'm going to go with the button and I'll just say click me over here.

49
00:03:27,060 --> 00:03:35,570
And once I say check it out in this case, I'll zoom in and I have my little button component.

50
00:03:35,630 --> 00:03:38,760
So, of course, I have my button ready to go.

51
00:03:38,950 --> 00:03:42,000
And for example, I'm going to go with Consed again, some kind of name.

52
00:03:42,300 --> 00:03:46,380
I'm going to call this container and I'm going to go styled.

53
00:03:46,640 --> 00:03:50,180
And of course, I'm looking for a diff in this case.

54
00:03:50,460 --> 00:03:55,560
So I created Dave and again, I just set up whatever styles I want over here.

55
00:03:55,980 --> 00:04:00,000
And again, I'm going to go with some kind of colors because it's just going to be easier.

56
00:04:00,000 --> 00:04:03,240
So background and we're going to go with the red here.

57
00:04:03,630 --> 00:04:13,190
May be a color is going to be a green white and the font size is going to be two or three arms.

58
00:04:13,470 --> 00:04:17,700
And then right after the button, we set up our container.

59
00:04:18,060 --> 00:04:20,560
So I'm not in place whatever we would want.

60
00:04:20,880 --> 00:04:26,660
So if you want to place, for example, here a div inside of this container, you can simply say, Dave,

61
00:04:26,970 --> 00:04:33,600
and then maybe a heading three with a text on Hello and inWorld.

62
00:04:33,810 --> 00:04:39,470
So once you separate notice, we have the container and then right away I have some kind of stylus.

63
00:04:40,330 --> 00:04:48,040
And then in here, of course, I have the text and I'm getting the styles from my do not wear styled

64
00:04:48,040 --> 00:04:56,920
components truly shine is the fact that once I have my styled component, I can set up a class inside

65
00:04:56,920 --> 00:05:00,430
of it and there's going to be no name collisions.

66
00:05:00,880 --> 00:05:06,040
And the way it's going to look like, for example, I have the container over here and I'm going to

67
00:05:06,040 --> 00:05:12,310
come up with another div, so inside of this container and we're just going to give it the class name

68
00:05:12,520 --> 00:05:14,770
of Hero, something like this.

69
00:05:15,070 --> 00:05:20,050
And then inside of this hero, say hero, hero.

70
00:05:20,950 --> 00:05:25,180
So now of course, in the style component, I can select this class.

71
00:05:25,460 --> 00:05:31,320
So essentially I can select whatever I would want in the container as long as it is in the container

72
00:05:31,540 --> 00:05:34,450
so I could selected, therefore I could select the heading three.

73
00:05:34,660 --> 00:05:37,290
And of course I can also select classes.

74
00:05:37,630 --> 00:05:39,820
So the way it's going to work, I'm going to go with Hero.

75
00:05:40,630 --> 00:05:48,220
And then maybe in this case, I'm going to go with font size of atriums, so I make this text way bigger,

76
00:05:48,520 --> 00:05:48,950
correct.

77
00:05:49,240 --> 00:05:56,560
Now, what's really cool is, again, if we navigate to the bigger screen, notice, we have this specific

78
00:05:56,560 --> 00:05:57,190
class name.

79
00:05:57,640 --> 00:06:01,590
So that's the one that's going to be unique for my container there.

80
00:06:02,050 --> 00:06:07,870
And that's why if I select this hero, it's going to have this specific last name and then the font

81
00:06:07,870 --> 00:06:08,150
size.

82
00:06:08,530 --> 00:06:10,930
So there's going to be no name collisions.

83
00:06:11,200 --> 00:06:20,530
So if I go back to the objects and if I copy and paste and if I'll set up container number two and essentially

84
00:06:20,530 --> 00:06:26,320
repeat the same steps, I'm going to copy and paste and I'll name this container number two.

85
00:06:26,590 --> 00:06:31,600
I'll still have the Hurring three, I'll still have the hero.

86
00:06:31,810 --> 00:06:38,380
But in this case, if I set up my container number two here, I'll text, for example, to be smaller.

87
00:06:39,070 --> 00:06:40,420
I don't know, one RTM.

88
00:06:40,960 --> 00:06:47,740
You'll notice that essentially I can just get lazy where in this case I can go where the class name

89
00:06:47,740 --> 00:06:52,220
ofthe hero and this is going to be styled the eight hour or whatever.

90
00:06:52,230 --> 00:06:53,140
Fonso, as you said.

91
00:06:53,440 --> 00:06:58,240
And then for the second one, for container number two, I can still use the same class name.

92
00:06:58,450 --> 00:07:03,310
But now of course, the style is going to be different, is going to be whatever I have in the container.

93
00:07:04,330 --> 00:07:12,250
And what I'm getting at is the fact that in all of my components, I don't have to be original with

94
00:07:12,250 --> 00:07:14,890
my classmates, I can set up my component.

95
00:07:15,250 --> 00:07:20,050
I set it up as a component, and I'll show you how I do that second.

96
00:07:20,320 --> 00:07:27,730
And then inside of that styled component, essentially, I can just use the same class names that I'm

97
00:07:27,730 --> 00:07:29,700
using in other components.

98
00:07:29,830 --> 00:07:35,110
And that is very, very beneficial because again, I know I said this already 20 thousand times, but

99
00:07:35,350 --> 00:07:40,690
when it comes to bigger project, that is one of the annoying things where you need to get really creative

100
00:07:40,960 --> 00:07:46,690
with a class times when it comes to success and stealth components takes care of that.

101
00:07:47,170 --> 00:07:51,870
And once we understand the basics, we can set up style components.

102
00:07:52,120 --> 00:07:57,190
And of course, we also need to take a look what happens if we have react component?

103
00:07:57,550 --> 00:08:04,270
Because in this case, of course, yes, it is a component, but we created that using the style component.

104
00:08:04,600 --> 00:08:07,940
But what if I would want some kind of functionality?

105
00:08:08,270 --> 00:08:10,990
Now, if you want, you can keep it for your reference.

106
00:08:11,390 --> 00:08:18,940
My case, I will remove it because Appoggiaturas is getting quite busy and I'll remove these suckers

107
00:08:18,940 --> 00:08:24,790
as well and for testing purposes right next to the objects.

108
00:08:25,090 --> 00:08:29,790
So let me close all the folders so I don't push it somewhere where I don't want to.

109
00:08:30,040 --> 00:08:37,360
In the source, I'm going to create testing, testing Jass and you can probably already guess that I

110
00:08:37,360 --> 00:08:39,940
will delete this component once I'm done.

111
00:08:40,210 --> 00:08:44,080
So I'll use my snippets to create a new component.

112
00:08:44,410 --> 00:08:52,030
So and while there are many ways how you can export this component using styled components as well.

113
00:08:52,060 --> 00:08:54,880
So keep in mind this is going to be some kind of functionality, right.

114
00:08:54,890 --> 00:08:57,520
So maybe some button or whatever.

115
00:08:57,550 --> 00:09:03,790
Right now we would need to import style component styled from style components.

116
00:09:03,790 --> 00:09:07,300
And there's many ways how we can export this particular component.

117
00:09:07,570 --> 00:09:12,520
But the way I like to do it is following where I go with the name of rapper.

118
00:09:13,360 --> 00:09:20,020
And I just like this type of name, but of course, you can call it whatever you want, then I create

119
00:09:20,020 --> 00:09:26,260
the element that is going to be displayed here in the component, whether that is the main element,

120
00:09:26,260 --> 00:09:31,570
whether or not is a deflection section, whatever, whatever is the actual react component doing.

121
00:09:31,900 --> 00:09:34,900
And then I'm going to go with that with the name of that component.

122
00:09:34,900 --> 00:09:39,430
In this case, maybe you let me go with section and then I apply my styles.

123
00:09:39,790 --> 00:09:47,430
And what I do is here are usually set it up as a main element that I'm returning now.

124
00:09:47,440 --> 00:09:51,370
Sometimes I set up as a react fragment as we're going to be working on a project.

125
00:09:51,370 --> 00:09:57,670
You'll see, it looks like in that case, but I have my wrapper, so that's my style component and then

126
00:09:57,670 --> 00:09:59,950
whatever functionality I place in.

127
00:09:59,980 --> 00:10:04,920
So this is going to be sitting in a wrapper and here I can apply all my styles.

128
00:10:05,230 --> 00:10:13,250
So if I go with having three and Hello World and then maybe I'll add here a paragraph of hello and then

129
00:10:13,270 --> 00:10:20,140
people and then I don't know, I'm going to go with Button and I'll say, click me now in this wrapper,

130
00:10:20,350 --> 00:10:21,670
I can just style it.

131
00:10:22,000 --> 00:10:26,850
And I don't need to stress about the class names or about the elements.

132
00:10:27,040 --> 00:10:33,070
So when I'll style them here, if I say adding three and I don't know, I'm going to go with color.

133
00:10:34,160 --> 00:10:40,190
Colour and red, this is just going to be styled for this particular component and then in order to

134
00:10:40,190 --> 00:10:42,650
render it, we would need to go back to objets.

135
00:10:42,650 --> 00:10:48,290
Now, I don't need the style components anymore since I'm already importing from there and we go with

136
00:10:48,440 --> 00:10:52,250
testing from and then testing.

137
00:10:52,850 --> 00:10:54,740
Let's see here it is this thing.

138
00:10:55,100 --> 00:10:59,670
And then right after the heading for we're just going to randomly testing.

139
00:10:59,960 --> 00:11:07,430
So now I have my component and I might need to add, by the way, sorry, should be export default.

140
00:11:07,820 --> 00:11:14,270
So in this case, I'm going to remove the export and we're going to say export.

141
00:11:15,050 --> 00:11:22,580
Export default, and then, of course, the name is this thing over here, let's say this should work

142
00:11:22,580 --> 00:11:29,600
and now known as this, that in theory is only going to be styled in red in this component.

143
00:11:29,840 --> 00:11:33,810
That's why if you take a look at the components, wrapper does not.

144
00:11:33,950 --> 00:11:37,820
And let me repeat, it does not add any functionality.

145
00:11:38,240 --> 00:11:47,210
This is just so I can be lazy with the class names and not to worry about the name collisions.

146
00:11:47,520 --> 00:11:52,940
Now, I have to be honest, there's more features that style components provide, but the reasons why

147
00:11:52,940 --> 00:11:54,730
I like them so much are following.

148
00:11:55,160 --> 00:11:58,070
I like the fact that I can Nestore here.

149
00:11:58,320 --> 00:12:05,390
So notice I have the class of colors and once we set up the component in that color div, there's going

150
00:12:05,390 --> 00:12:09,470
to be a span and I can directly style the span.

151
00:12:09,890 --> 00:12:11,900
So again, there's going to be no name collisions.

152
00:12:12,200 --> 00:12:19,810
And I also really like stealth components because I don't have to play all my styles in the indexes,

153
00:12:19,940 --> 00:12:22,440
so it's way harder to navigate.

154
00:12:22,970 --> 00:12:29,570
For example, if I'm setting up this component, if I need to change around as far as success is concerned,

155
00:12:29,930 --> 00:12:37,040
I simply navigate to that component and then I can see all the styles that I've used over here, apart

156
00:12:37,040 --> 00:12:39,290
from if I'm using some global class.

157
00:12:39,500 --> 00:12:43,130
You notice there are few global classes, like, for example, for a button.

158
00:12:43,400 --> 00:12:45,820
Then of course it is a little bit different.

159
00:12:46,190 --> 00:12:52,490
But one thing I would want you to understand that this rapper that we're going to add pretty much to

160
00:12:52,490 --> 00:12:58,000
all the components that we're going to create together does not affect functionality.

161
00:12:58,000 --> 00:13:01,440
And let me repeat, it does not affect functionality.

162
00:13:01,730 --> 00:13:03,500
This is just for styling.

163
00:13:03,830 --> 00:13:07,430
So in a wrapper, there is going to be a class by the name of Lincoln Center.

164
00:13:07,700 --> 00:13:09,420
And then I'm just applying these styles.

165
00:13:09,740 --> 00:13:11,060
Same goes for Link Button.

166
00:13:11,270 --> 00:13:13,700
And hopefully you get the gist again.

167
00:13:14,030 --> 00:13:20,540
If you want to find out more about style components, either you can utilize my course or you can go

168
00:13:20,540 --> 00:13:22,460
to their docs and explore more.

169
00:13:22,880 --> 00:13:29,780
But this is the general setup where if we would have only the style component, then of course I would

170
00:13:29,780 --> 00:13:31,130
just render it like so.

171
00:13:31,370 --> 00:13:38,990
But then if I have a component, usually what I like to do is wrap my whole react component in the style

172
00:13:38,990 --> 00:13:42,710
component and then apply whatever styles oud one.

173
00:13:42,950 --> 00:13:47,840
And then quickly, if you want to see this thing, for example, here, I'm going to have div with a

174
00:13:47,840 --> 00:13:50,750
class of, I don't know, Artecoll.

175
00:13:51,080 --> 00:14:00,620
And then sort of this article I'm going to have a paragraph of this is article which you'll notice that

176
00:14:00,620 --> 00:14:04,450
if I am by the way, my typing is as always terrible.

177
00:14:04,760 --> 00:14:11,280
So if we go with class of Artecoll and then just like in SAS, if we would want a nested notice, I

178
00:14:11,390 --> 00:14:14,780
select article class and then inside of it I go with paragraph.

179
00:14:15,090 --> 00:14:18,230
I don't know, I'm going to go with color green.

180
00:14:18,560 --> 00:14:24,320
You'll notice that only the paragraph that is sitting inside of the article is green.

181
00:14:24,680 --> 00:14:30,380
Now be careful with this one because there's going to be some cases that you would want to override

182
00:14:30,380 --> 00:14:30,650
this.

183
00:14:30,920 --> 00:14:33,200
And of course, this is going to be way more specific.

184
00:14:33,330 --> 00:14:38,630
So, for example, if you are going to go in the next line and say that all the paragraphs should be

185
00:14:39,020 --> 00:14:46,190
blue, then of course, only the first one is going to turn blue because this one is having a larger

186
00:14:46,190 --> 00:14:47,060
specificity.

187
00:14:47,330 --> 00:14:49,200
So that's why this was staggering.

188
00:14:49,430 --> 00:14:56,120
So what I'm trying to say is I wouldn't suggest must think of the selectors seven levels deep, because

189
00:14:56,120 --> 00:15:01,700
you also need to keep in mind that, for example, if you hover over the element or whatever, you also

190
00:15:01,700 --> 00:15:05,630
would need to retype the same nested selection.

191
00:15:05,780 --> 00:15:06,260
Yes.

192
00:15:06,260 --> 00:15:12,650
Once in a while I use these nested selectors and they're pretty cool, but I wouldn't suggest over doing

193
00:15:12,650 --> 00:15:12,860
that.

194
00:15:13,340 --> 00:15:19,430
Hopefully we're clear with the basics and now we can finally start working on some functionality.