1
00:00:02,000 --> 00:00:04,000
So we got a reusable component

2
00:00:04,000 --> 00:00:06,000
but one thing's missing.

3
00:00:06,000 --> 00:00:09,000
I guess a lot of things are still missing here

4
00:00:09,000 --> 00:00:12,000
but one thing that's missing on our component here

5
00:00:12,000 --> 00:00:14,000
is some styling.

6
00:00:14,000 --> 00:00:15,000
We have some white text

7
00:00:15,000 --> 00:00:17,000
and right now it's not even easy to tell

8
00:00:17,000 --> 00:00:21,000
where one component ends and the next one begins.

9
00:00:21,000 --> 00:00:24,000
I mean, we know because we created it.

10
00:00:24,000 --> 00:00:26,000
This name is the start of the second time

11
00:00:26,000 --> 00:00:28,000
we're using this component

12
00:00:28,000 --> 00:00:30,000
of the second component instance, therefore,

13
00:00:30,000 --> 00:00:32,000
but it's not obvious to see.

14
00:00:32,000 --> 00:00:36,000
And in general, typically you wanna style your components

15
00:00:36,000 --> 00:00:39,000
and not just at the markup.

16
00:00:39,000 --> 00:00:44,000
Just as for any website, you don't just want the HTML code,

17
00:00:44,000 --> 00:00:46,000
you instead also want styling.

18
00:00:47,000 --> 00:00:49,000
Now for React, there is an endless amount

19
00:00:49,000 --> 00:00:51,000
of styling solutions

20
00:00:51,000 --> 00:00:54,000
and I talk more about different approaches

21
00:00:54,000 --> 00:00:58,000
for styling components in my complete guide course.

22
00:00:58,000 --> 00:01:01,000
You can for example, add inline styles

23
00:01:01,000 --> 00:01:04,000
by adding the style attribute to your elements.

24
00:01:04,000 --> 00:01:07,000
Now here, the important thing to understand though

25
00:01:07,000 --> 00:01:10,000
is that you should not add your styles like this.

26
00:01:10,000 --> 00:01:14,000
So some string, some text that defines your styles

27
00:01:14,000 --> 00:01:17,000
but that instead you should add a dynamic value

28
00:01:17,000 --> 00:01:21,000
and then pass a JavaScript object as a value.

29
00:01:21,000 --> 00:01:25,000
So this is not some special double curly braces syntax,

30
00:01:25,000 --> 00:01:28,000
instead it's still the same single curly braces

31
00:01:28,000 --> 00:01:30,000
syntax we used down there,

32
00:01:30,000 --> 00:01:35,000
but with the object passed as a value to the style prop.

33
00:01:35,000 --> 00:01:38,000
And then in that object you set your styles

34
00:01:38,000 --> 00:01:43,000
like for example, color red and text aligned left

35
00:01:43,000 --> 00:01:46,000
if you would want to make it really ugly.

36
00:01:46,000 --> 00:01:51,000
With that code, we would get that styling and yeah...

37
00:01:51,000 --> 00:01:53,000
But that's one way of styling

38
00:01:53,000 --> 00:01:57,000
but just as with vanilla HTML and CSS,

39
00:01:57,000 --> 00:02:02,000
typically you don't wanna use inline styles.

40
00:02:02,000 --> 00:02:04,000
Instead, it's considered better practice

41
00:02:04,000 --> 00:02:08,000
to put your CSS code into CSS files.

42
00:02:08,000 --> 00:02:12,000
And indeed this project has one CSS file

43
00:02:12,000 --> 00:02:15,000
with some styles being predefined.

44
00:02:16,000 --> 00:02:20,000
And what you could do is add a class to your div

45
00:02:20,000 --> 00:02:23,000
and then for example, give this a class of post

46
00:02:23,000 --> 00:02:27,000
to then set the appropriate styles in index.css.

47
00:02:27,000 --> 00:02:29,000
But wait a second,

48
00:02:29,000 --> 00:02:34,000
did I just write className here instead of class?

49
00:02:34,000 --> 00:02:35,000
Yes, I did.

50
00:02:35,000 --> 00:02:40,000
The JSX code you write might look like HTML code

51
00:02:40,000 --> 00:02:43,000
but it actually isn't HTML code.

52
00:02:43,000 --> 00:02:47,000
Instead it is a JavaScript version of HTML

53
00:02:47,000 --> 00:02:51,000
and some HTML attributes have different names here.

54
00:02:51,000 --> 00:02:55,000
Now, to be honest, not too many, so nothing to worry about.

55
00:02:55,000 --> 00:02:58,000
But class is one of the most important attributes

56
00:02:58,000 --> 00:03:02,000
that has a different name when writing JSX code.

57
00:03:02,000 --> 00:03:06,000
Instead of assigning CSS classes with the class attribute,

58
00:03:06,000 --> 00:03:07,000
you instead use className.

59
00:03:09,000 --> 00:03:12,000
Now there are some technical reasons for that,

60
00:03:12,000 --> 00:03:16,000
that the JavaScript elements that are created under the hood

61
00:03:16,000 --> 00:03:20,000
have className as a property name for setting CSS classes

62
00:03:20,000 --> 00:03:23,000
but those details aren't too important too keep in mind.

63
00:03:24,000 --> 00:03:27,000
Instead, what is important to keep in mind

64
00:03:27,000 --> 00:03:30,000
is that CSS className are added to elements

65
00:03:30,000 --> 00:03:35,000
with the className prop and not with just class.

66
00:03:36,000 --> 00:03:38,000
But with that name being used,

67
00:03:38,000 --> 00:03:41,000
you can then set any className of your choice.

68
00:03:41,000 --> 00:03:43,000
And if we use post here,

69
00:03:43,000 --> 00:03:45,000
we could for example add a post class here

70
00:03:45,000 --> 00:03:48,000
in the index.css file to give this

71
00:03:48,000 --> 00:03:51,000
a background color of light blue.

72
00:03:52,000 --> 00:03:56,000
And if we do that, we would see that background color here.

73
00:03:56,000 --> 00:03:58,000
Obviously still ugly,

74
00:03:58,000 --> 00:04:01,000
but that's another approach for assigning styles.

75
00:04:01,000 --> 00:04:04,000
We can set up global CSS classes here

76
00:04:04,000 --> 00:04:08,000
and assign their classNames like this.

77
00:04:08,000 --> 00:04:11,000
But besides the fact that this is rather ugly,

78
00:04:11,000 --> 00:04:14,000
which of course is a problem that could be solved,

79
00:04:14,000 --> 00:04:18,000
there is another problem related to this approach.

80
00:04:18,000 --> 00:04:20,000
When using global classNames

81
00:04:20,000 --> 00:04:22,000
you could have name clashes

82
00:04:22,000 --> 00:04:26,000
in bigger, more complex projects.

83
00:04:26,000 --> 00:04:28,000
You could have multiple components

84
00:04:28,000 --> 00:04:31,000
that use the post className internally, for example

85
00:04:31,000 --> 00:04:34,000
and your globally defined CSS classes

86
00:04:34,000 --> 00:04:36,000
could then clash with each other.

87
00:04:37,000 --> 00:04:38,000
Put in other words,

88
00:04:38,000 --> 00:04:42,000
you might prefer to scope CSS styles

89
00:04:42,000 --> 00:04:45,000
to your different components

90
00:04:45,000 --> 00:04:48,000
so that styles applied to the post component

91
00:04:48,000 --> 00:04:53,000
really only affect that component and can't possibly clash

92
00:04:53,000 --> 00:04:56,000
with other styles in other components.

93
00:04:56,000 --> 00:05:01,000
And React projects created with Create React App or Vite,

94
00:05:01,000 --> 00:05:04,000
also support a solution for that problem.

95
00:05:04,000 --> 00:05:09,000
Instead of defining the post style like this,

96
00:05:09,000 --> 00:05:12,000
you can add a dedicated CSS file

97
00:05:12,000 --> 00:05:15,000
which I'll name Post.module.css,

98
00:05:15,000 --> 00:05:20,000
which should typically be located next to the JSX file

99
00:05:20,000 --> 00:05:22,000
though it's not technically required,

100
00:05:22,000 --> 00:05:23,000
it's just a convention.

101
00:05:24,000 --> 00:05:26,000
What is technically required though,

102
00:05:26,000 --> 00:05:30,000
is that the file name is Post.module

103
00:05:30,000 --> 00:05:33,000
and then .css the extension

104
00:05:33,000 --> 00:05:35,000
but the .module part is important.

105
00:05:36,000 --> 00:05:40,000
This tells Vite or Create React App

106
00:05:40,000 --> 00:05:44,000
that you wanna use a feature called CSS modules here.

107
00:05:44,000 --> 00:05:49,000
Now CSS modules is in the end an approach, you could say,

108
00:05:49,000 --> 00:05:52,000
an approach that's implemented by projects

109
00:05:52,000 --> 00:05:56,000
created with Vite or Create React App

110
00:05:56,000 --> 00:06:01,000
where the classNames you set in your CSS files

111
00:06:01,000 --> 00:06:05,000
and which you then use in your HTML or JSX code

112
00:06:05,000 --> 00:06:08,000
are under the hood transformed

113
00:06:08,000 --> 00:06:12,000
to guaranteed unique classNames

114
00:06:12,000 --> 00:06:15,000
so that name clashes are avoided.

115
00:06:16,000 --> 00:06:20,000
And by using .module in the CSS file name,

116
00:06:20,000 --> 00:06:23,000
you tell Vite or Create React App

117
00:06:23,000 --> 00:06:27,000
that you want to use this CSS modules feature.

118
00:06:27,000 --> 00:06:30,000
Now for this post component I prepared some styles,

119
00:06:30,000 --> 00:06:32,000
which you'll find attached

120
00:06:32,000 --> 00:06:36,000
and I just pasted them into this Post.module.css file

121
00:06:36,000 --> 00:06:37,000
these attached styles

122
00:06:39,000 --> 00:06:43,000
and we can now use them by going back to Post.jsx

123
00:06:43,000 --> 00:06:45,000
and in there we now first of all

124
00:06:45,000 --> 00:06:48,000
have to import this CSS file.

125
00:06:48,000 --> 00:06:52,000
Now in main.jsx, a CSS file is imported

126
00:06:52,000 --> 00:06:55,000
by simply using the import keyword

127
00:06:55,000 --> 00:06:57,000
and then the path to the CSS file name.

128
00:06:58,000 --> 00:07:03,000
When using CSS modules this syntax must change a little bit.

129
00:07:04,000 --> 00:07:07,000
We do still import from that path

130
00:07:07,000 --> 00:07:10,000
so in this case from Post.module.css,

131
00:07:10,000 --> 00:07:13,000
which is the relative path to that CSS file

132
00:07:13,000 --> 00:07:16,000
seen from that Post.jsx file.

133
00:07:17,000 --> 00:07:20,000
But instead of just importing the file like this,

134
00:07:20,000 --> 00:07:25,000
we import classes or styles, the name is up to you,

135
00:07:25,000 --> 00:07:30,000
from that file so you must use this import syntax.

136
00:07:32,000 --> 00:07:35,000
And this under the hood will then kick off

137
00:07:35,000 --> 00:07:39,000
that CSS className transformation process

138
00:07:39,000 --> 00:07:41,000
that's supported by the project we have here.

139
00:07:41,000 --> 00:07:45,000
And the classes thing we get here is in the end

140
00:07:45,000 --> 00:07:50,000
an object where any classNames used by you in the CSS file

141
00:07:51,000 --> 00:07:55,000
will be available as property names.

142
00:07:55,000 --> 00:07:58,000
And then the values for these property names

143
00:07:58,000 --> 00:08:01,000
will be the transformed unique classNames.

144
00:08:02,000 --> 00:08:04,000
So we can use this classes object

145
00:08:04,000 --> 00:08:09,000
to set the className on this div to classes.post,

146
00:08:10,000 --> 00:08:13,000
.post because in Post.module.css

147
00:08:13,000 --> 00:08:17,000
I have a post CSS class selector.

148
00:08:17,000 --> 00:08:20,000
And as I just said, those classes which are defined

149
00:08:20,000 --> 00:08:23,000
with class selectors in the CSS file

150
00:08:23,000 --> 00:08:27,000
will be picked up by some behind the scenes process

151
00:08:27,000 --> 00:08:28,000
that's part of the project

152
00:08:28,000 --> 00:08:32,000
and will be converted to unique classNames.

153
00:08:32,000 --> 00:08:35,000
And the unique className is then yielded as a value

154
00:08:35,000 --> 00:08:39,000
for this post property on the classes object,

155
00:08:39,000 --> 00:08:42,000
which is imported from the CSS file.

156
00:08:42,000 --> 00:08:44,000
So we get some behind the scenes

157
00:08:44,000 --> 00:08:46,000
transformation magic going on here

158
00:08:47,000 --> 00:08:50,000
and we can then also add a class in here to the author,

159
00:08:50,000 --> 00:08:53,000
classes.author in this case

160
00:08:53,000 --> 00:08:56,000
because in my Post.module.css file

161
00:08:56,000 --> 00:08:58,000
I also have an author class.

162
00:08:59,000 --> 00:09:01,000
I also have a text class

163
00:09:01,000 --> 00:09:04,000
and this text class can (indistinct) be assigned down here.

164
00:09:04,000 --> 00:09:06,000
And please note that I'm always using

165
00:09:06,000 --> 00:09:10,000
this dynamic expression syntax with the curly braces

166
00:09:10,000 --> 00:09:14,000
to refer to the values stored under these properties

167
00:09:14,000 --> 00:09:16,000
on this classes object.

168
00:09:18,000 --> 00:09:21,000
And with that done, we now got this style

169
00:09:21,000 --> 00:09:25,000
still not the final look I wanna have

170
00:09:25,000 --> 00:09:29,000
but a great step closer to the intended final result.

171
00:09:30,000 --> 00:09:34,000
And if you now inspect this in the developer tools,

172
00:09:34,000 --> 00:09:36,000
you will see that there we have

173
00:09:36,000 --> 00:09:39,000
these CSS classNames being assigned

174
00:09:39,000 --> 00:09:41,000
and these are clearly not the classNames

175
00:09:41,000 --> 00:09:43,000
to find in my CSS file.

176
00:09:43,000 --> 00:09:47,000
Instead, these are the transformed classNames

177
00:09:47,000 --> 00:09:51,000
because as I mentioned, that's what this CSS modules feature

178
00:09:51,000 --> 00:09:53,000
does under the hood.

179
00:09:53,000 --> 00:09:56,000
And that's their for another possible approach you can use

180
00:09:56,000 --> 00:09:57,000
for styling your components.

181
00:09:57,000 --> 00:10:00,000
And it is the approach I'll use in this course here

182
00:10:00,000 --> 00:10:02,000
but as mentioned in my Complete Guide course,

183
00:10:02,000 --> 00:10:05,000
I also show alternatives to that.