- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.530 --> 00:00:01.363
In this guide,
2
00:00:01.363 --> 00:00:04.890
we are gonna talk about how we can implement styles
3
00:00:04.890 --> 00:00:07.490
into a React application.
4
00:00:07.490 --> 00:00:11.290
So right here, I'm back in our main app component
5
00:00:11.290 --> 00:00:14.450
and we're gonna walk through three different ways
6
00:00:14.450 --> 00:00:16.600
that we can add styles.
7
00:00:16.600 --> 00:00:18.800
We're going to actually create two of 'em
8
00:00:18.800 --> 00:00:20.900
and then I'm gonna give you a preview
9
00:00:20.900 --> 00:00:23.450
of the third because it's a little bit more complex
10
00:00:23.450 --> 00:00:26.500
and we're gonna work on it a little bit later on
11
00:00:26.500 --> 00:00:28.940
in the course when we're actually implementing
12
00:00:28.940 --> 00:00:32.010
our full set of application styles.
13
00:00:32.010 --> 00:00:34.940
So the very first way to add styles
14
00:00:34.940 --> 00:00:39.090
is using in-line style objects.
15
00:00:39.090 --> 00:00:42.440
So I'm just gonna create a little div here,
16
00:00:42.440 --> 00:00:44.830
right below everything that we have.
17
00:00:44.830 --> 00:00:45.930
All the content.
18
00:00:45.930 --> 00:00:47.560
So I'm gonna create a div
19
00:00:47.560 --> 00:00:49.720
and inside of it,
20
00:00:49.720 --> 00:00:52.160
I'm just gonna add a little bit of text.
21
00:00:52.160 --> 00:00:57.030
So here I'm gonna say something like Testing styles.
22
00:00:57.030 --> 00:01:00.810
Now, the way that you can create in-line styles
23
00:01:00.810 --> 00:01:03.860
is slightly different than you would do
24
00:01:03.860 --> 00:01:08.230
with HTML, and that's because we're using JSX code.
25
00:01:08.230 --> 00:01:10.610
So that's something you're gonna be thinking about
26
00:01:10.610 --> 00:01:11.980
and I'm gonna be reminding you about
27
00:01:11.980 --> 00:01:13.760
throughout this entire course.
28
00:01:13.760 --> 00:01:15.843
So inside of this div,
29
00:01:15.843 --> 00:01:17.800
what you're gonna do is pass in
30
00:01:17.800 --> 00:01:20.130
what is called the style prop.
31
00:01:20.130 --> 00:01:22.910
So this is a style property.
32
00:01:22.910 --> 00:01:26.620
And you're gonna set it equal to an object.
33
00:01:26.620 --> 00:01:28.910
Now, this is gonna be something
34
00:01:28.910 --> 00:01:30.960
that might look weird to you
35
00:01:30.960 --> 00:01:32.910
if you've never seen it before.
36
00:01:32.910 --> 00:01:34.600
This syntax right here,
37
00:01:34.600 --> 00:01:37.560
where you say some property name
38
00:01:37.560 --> 00:01:40.630
equals and then these curly brackets,
39
00:01:40.630 --> 00:01:43.830
that is a way that you're telling JSX
40
00:01:43.830 --> 00:01:47.270
that you want to render some JavaScript.
41
00:01:47.270 --> 00:01:50.370
So inside of these curly brackets here,
42
00:01:50.370 --> 00:01:53.520
this is where we're gonna place our list of styles.
43
00:01:53.520 --> 00:01:56.130
Now, the way that JSX works
44
00:01:56.130 --> 00:02:01.130
is you could technically run any JavaScript code in here,
45
00:02:01.600 --> 00:02:04.340
and this is something that can be really confusing
46
00:02:04.340 --> 00:02:07.600
to developers who are just getting into React,
47
00:02:07.600 --> 00:02:09.100
is this syntax right here.
48
00:02:09.100 --> 00:02:11.090
So I wanna take it nice and slow
49
00:02:11.090 --> 00:02:12.740
so that we can walk through it,
50
00:02:12.740 --> 00:02:14.030
and it starts to make sense
51
00:02:14.030 --> 00:02:16.310
'cause if you can understand this part,
52
00:02:16.310 --> 00:02:19.520
a lot of the rest of the context
53
00:02:19.520 --> 00:02:22.000
and some of the other types
54
00:02:22.000 --> 00:02:24.240
of syntax items I'm gonna be showing you
55
00:02:24.240 --> 00:02:25.830
are gonna make more sense.
56
00:02:25.830 --> 00:02:28.527
So inside of this style tag,
57
00:02:28.527 --> 00:02:30.800
we're going to put our set of styles
58
00:02:30.800 --> 00:02:32.210
but before we do that,
59
00:02:32.210 --> 00:02:34.540
let's see how you can actually render
60
00:02:34.540 --> 00:02:36.660
some JavaScript code in here.
61
00:02:36.660 --> 00:02:40.470
So I'm just gonna really quickly just change this
62
00:02:40.470 --> 00:02:41.303
to a className.
63
00:02:42.890 --> 00:02:44.940
And inside of here,
64
00:02:44.940 --> 00:02:47.910
watch what happens if I do something like this.
65
00:02:47.910 --> 00:02:49.710
Inside of the curly brackets,
66
00:02:49.710 --> 00:02:54.080
let's say that I want to run any type of JavaScript code.
67
00:02:54.080 --> 00:02:58.900
So I could say one plus one in curly brackets.
68
00:02:58.900 --> 00:03:00.760
Now, I'm not doing this to do styles,
69
00:03:00.760 --> 00:03:02.690
I'm doing this to show you the way
70
00:03:02.690 --> 00:03:04.660
that you have to work with styles
71
00:03:04.660 --> 00:03:07.750
and how you can implement your own JavaScript code
72
00:03:07.750 --> 00:03:10.890
inside of this JSX code.
73
00:03:10.890 --> 00:03:14.080
So here, I'm gonna say one plus one
74
00:03:14.080 --> 00:03:18.003
and then at the end of these curly brackets say .toString.
75
00:03:19.860 --> 00:03:22.000
And call that as a function.
76
00:03:22.000 --> 00:03:23.370
I'm gonna hit Save right here,
77
00:03:23.370 --> 00:03:25.820
and let's inspect the element.
78
00:03:25.820 --> 00:03:27.290
So it says testing styles,
79
00:03:27.290 --> 00:03:29.430
so we can see that that's working there.
80
00:03:29.430 --> 00:03:33.140
And I'm going to right click here and click Inspect.
81
00:03:33.140 --> 00:03:35.060
Now, it's gonna show me,
82
00:03:35.060 --> 00:03:36.670
and I'll break this out
83
00:03:36.670 --> 00:03:38.570
so that you can see what it's looking like,
84
00:03:38.570 --> 00:03:40.940
so you see where it says class 2?
85
00:03:40.940 --> 00:03:43.600
So what our code did
86
00:03:44.600 --> 00:03:49.480
right here where it says one plus one toString,
87
00:03:49.480 --> 00:03:51.270
this is JavaScript code.
88
00:03:51.270 --> 00:03:55.463
This is something that if I were to copy this right here,
89
00:03:56.470 --> 00:04:00.793
and I were to open up the JavaScript console
90
00:04:00.793 --> 00:04:03.870
in the browser, and I were to run this,
91
00:04:03.870 --> 00:04:06.700
it would give me a string of two.
92
00:04:06.700 --> 00:04:10.720
So anytime that you see this syntax
93
00:04:10.720 --> 00:04:12.760
where we're passing in a property name,
94
00:04:12.760 --> 00:04:15.030
whether it's className, whether it's style,
95
00:04:15.030 --> 00:04:16.760
whether it's one we came up with,
96
00:04:16.760 --> 00:04:19.360
whatever it is, and then you give an equals,
97
00:04:19.360 --> 00:04:20.873
followed by curly brackets,
98
00:04:23.380 --> 00:04:25.230
anything inside of here,
99
00:04:25.230 --> 00:04:27.290
JSX and React are gonna look at it
100
00:04:27.290 --> 00:04:30.530
and say okay, it's time to run some JavaScript code,
101
00:04:30.530 --> 00:04:32.040
just like we did right there.
102
00:04:32.040 --> 00:04:35.600
So what is going to be placed inside of the browser
103
00:04:35.600 --> 00:04:39.620
is the result of that code that we wrote.
104
00:04:39.620 --> 00:04:42.190
So you could actually have this be a function.
105
00:04:42.190 --> 00:04:43.540
Now, we're getting really crazy here
106
00:04:43.540 --> 00:04:44.520
but I just wanna do this
107
00:04:44.520 --> 00:04:45.994
because I've had so many students
108
00:04:45.994 --> 00:04:49.301
over the years really have a hard time understanding
109
00:04:49.301 --> 00:04:52.400
what happens with the syntax
110
00:04:52.400 --> 00:04:53.850
but if you would want,
111
00:04:53.850 --> 00:04:55.120
you could create a function
112
00:04:55.120 --> 00:04:57.976
and you could say I want this function
113
00:04:57.976 --> 00:05:00.970
to run whenever the page loads,
114
00:05:00.970 --> 00:05:02.450
and the function would run.
115
00:05:02.450 --> 00:05:04.730
So that's just something to keep in mind.
116
00:05:04.730 --> 00:05:07.270
Now let's get back to adding the styles.
117
00:05:07.270 --> 00:05:09.460
So hopefully, now that we went through that,
118
00:05:09.460 --> 00:05:12.360
the syntax is gonna make a little bit more sense.
119
00:05:12.360 --> 00:05:14.830
So I'm gonna say style equals,
120
00:05:14.830 --> 00:05:17.150
and then curly brackets.
121
00:05:17.150 --> 00:05:19.500
Now we know anything inside of here
122
00:05:19.500 --> 00:05:21.660
is going to be JavaScript code.
123
00:05:21.660 --> 00:05:25.810
So what we're gonna do is we're going to pass in an object.
124
00:05:25.810 --> 00:05:27.170
So because of that,
125
00:05:27.170 --> 00:05:30.540
I'm going to do another set of curly brackets,
126
00:05:30.540 --> 00:05:34.060
and it's this syntax that I've had many student talk about
127
00:05:34.060 --> 00:05:35.720
being very confusing
128
00:05:35.720 --> 00:05:38.270
because they're confused on why you need two sets
129
00:05:38.270 --> 00:05:39.220
of curly brackets.
130
00:05:39.220 --> 00:05:44.000
And the reason is because the exterior ones here
131
00:05:44.000 --> 00:05:45.970
are telling JavaScript
132
00:05:45.970 --> 00:05:48.750
that it needs to run the code inside of it.
133
00:05:48.750 --> 00:05:51.770
These interior ones, these inside ones here,
134
00:05:51.770 --> 00:05:55.220
that is just a normal JavaScript object.
135
00:05:55.220 --> 00:05:57.700
That's simply like going like this.
136
00:05:57.700 --> 00:06:00.313
If we open put the console again,
137
00:06:01.530 --> 00:06:03.100
that's like writing a variable
138
00:06:03.100 --> 00:06:05.217
and saying const someObject
139
00:06:07.380 --> 00:06:09.500
equals curly brackets
140
00:06:09.500 --> 00:06:14.500
and name equals Kristine, just like that.
141
00:06:16.570 --> 00:06:18.750
Now we have someObject.
142
00:06:18.750 --> 00:06:21.500
So that's all that's happening right here
143
00:06:21.500 --> 00:06:26.500
is we are creating or passing in a style object.
144
00:06:27.490 --> 00:06:29.380
So let's test this out.
145
00:06:29.380 --> 00:06:33.300
I'm gonna use a backgroundColor,
146
00:06:33.300 --> 00:06:35.790
and we're gonna talk about the syntax here in a minute,
147
00:06:35.790 --> 00:06:38.078
and we're gonna do backgroundColor
148
00:06:38.078 --> 00:06:40.190
of let's say blue,
149
00:06:40.190 --> 00:06:44.760
followed by a color of white.
150
00:06:44.760 --> 00:06:47.520
I'm gonna hit Save and let's see what happens.
151
00:06:47.520 --> 00:06:48.480
And there you go.
152
00:06:48.480 --> 00:06:51.000
I'll zoom in here so it's a little easier to see.
153
00:06:51.000 --> 00:06:52.250
But as you can see,
154
00:06:52.250 --> 00:06:54.150
our style has been applied.
155
00:06:54.150 --> 00:06:56.880
So let's talk about the syntax here.
156
00:06:56.880 --> 00:06:58.550
So with this syntax,
157
00:06:58.550 --> 00:07:00.370
we passed in an object.
158
00:07:00.370 --> 00:07:03.350
The object has two keys, backgroundColor
159
00:07:03.350 --> 00:07:04.950
and then color.
160
00:07:04.950 --> 00:07:09.770
Now, this may look kind of like CSS code but it's not.
161
00:07:09.770 --> 00:07:14.030
It is the way that we're telling JSX
162
00:07:14.030 --> 00:07:15.700
to apply this style
163
00:07:15.700 --> 00:07:17.980
but we have to use a syntax
164
00:07:17.980 --> 00:07:19.910
that JSX understands.
165
00:07:19.910 --> 00:07:23.300
The common standard you're gonna see pretty much in all
166
00:07:23.300 --> 00:07:25.550
of your JSX code that you're gonna write
167
00:07:25.550 --> 00:07:27.910
with styles is any time
168
00:07:27.910 --> 00:07:30.740
that you would have code that looked like this,
169
00:07:30.740 --> 00:07:33.470
so if you're really familiar with your CSS,
170
00:07:33.470 --> 00:07:35.750
you might be used to seeing something like this,
171
00:07:35.750 --> 00:07:39.240
where you'd say background-color
172
00:07:39.240 --> 00:07:43.380
and then you'd say I want that to be blue.
173
00:07:43.380 --> 00:07:45.250
My auto completes not even gonna let me type that
174
00:07:45.250 --> 00:07:46.670
'cause it's not valid code
175
00:07:46.670 --> 00:07:49.360
but that is CSS code right here.
176
00:07:49.360 --> 00:07:52.550
The way that you would write that exact same code
177
00:07:52.550 --> 00:07:56.360
in JSX is what we did right here.
178
00:07:56.360 --> 00:07:59.684
So now, if I paste that in, you can see the difference.
179
00:07:59.684 --> 00:08:01.997
So any time that you see a dash,
180
00:08:01.997 --> 00:08:04.240
and you're used to writing a dash
181
00:08:04.240 --> 00:08:07.850
in CSS code, you're gonna get rid of the dash,
182
00:08:07.850 --> 00:08:09.730
and then the next letter,
183
00:08:09.730 --> 00:08:11.460
you're going to capitalize.
184
00:08:11.460 --> 00:08:15.020
So that's how you translate your CSS code
185
00:08:15.020 --> 00:08:18.310
into something JSX can understand.
186
00:08:18.310 --> 00:08:21.710
Then, things like colors need
187
00:08:21.710 --> 00:08:24.571
to be inside of a string
188
00:08:24.571 --> 00:08:26.350
and the reason for that
189
00:08:26.350 --> 00:08:29.150
is if we were to just say blue,
190
00:08:29.150 --> 00:08:31.250
so I'm gonna get rid of this code here,
191
00:08:31.250 --> 00:08:33.970
and if we were to say blue,
192
00:08:33.970 --> 00:08:35.545
for the backgroundColor,
193
00:08:35.545 --> 00:08:37.730
right here, this wouldn't work
194
00:08:37.730 --> 00:08:40.100
because remember, this is JavaScript code.
195
00:08:40.100 --> 00:08:42.260
So what the component would do
196
00:08:42.260 --> 00:08:44.320
is it would look for a variable
197
00:08:44.320 --> 00:08:46.660
or a function called blue
198
00:08:46.660 --> 00:08:48.830
but that's not what we're wanting.
199
00:08:48.830 --> 00:08:51.250
We're really wanting the value of blue,
200
00:08:51.250 --> 00:08:56.250
so the way that you do that is you supply your color
201
00:08:56.330 --> 00:08:57.330
as a string.
202
00:08:57.330 --> 00:08:58.640
The same thing you're gonna see
203
00:08:58.640 --> 00:09:00.410
is going to apply for sizes,
204
00:09:00.410 --> 00:09:02.430
for percents and we're gonna be doing this
205
00:09:02.430 --> 00:09:03.330
throughout the whole course.
206
00:09:03.330 --> 00:09:06.250
So don't worry if this is still a little bit fuzzy.
207
00:09:06.250 --> 00:09:08.960
This is gonna be something we're gonna be doing a lot.
208
00:09:08.960 --> 00:09:11.850
Now, color, for the color,
209
00:09:11.850 --> 00:09:16.850
we're able to actually use the exact same naming structure
210
00:09:17.470 --> 00:09:19.150
that we would normally do.
211
00:09:19.150 --> 00:09:21.780
So because color's only one word,
212
00:09:21.780 --> 00:09:23.230
we didn't have to change it.
213
00:09:23.230 --> 00:09:25.560
So any of your CSS rules
214
00:09:25.560 --> 00:09:27.470
that were only one word,
215
00:09:27.470 --> 00:09:29.540
those are gonna stay the same.
216
00:09:29.540 --> 00:09:32.350
But once again, we're passing in the color
217
00:09:32.350 --> 00:09:36.230
and white is gonna be the actual color value,
218
00:09:36.230 --> 00:09:37.720
which has to be a string.
219
00:09:37.720 --> 00:09:38.940
Now, for numbers,
220
00:09:38.940 --> 00:09:43.180
so let's say that we wanna make this a certain height.
221
00:09:43.180 --> 00:09:44.800
I'm going to add the front here
222
00:09:44.800 --> 00:09:46.870
just so it's easier to see,
223
00:09:46.870 --> 00:09:48.790
I'm gonna say I want this
224
00:09:48.790 --> 00:09:51.870
to be 50 pixels, or let's make it 100
225
00:09:51.870 --> 00:09:53.320
just to make it easy.
226
00:09:53.320 --> 00:09:56.640
You're going to also write that as a string.
227
00:09:56.640 --> 00:09:58.080
Now when I hit Save,
228
00:09:58.080 --> 00:10:00.770
you'll see that that size has been applied
229
00:10:00.770 --> 00:10:03.660
and that is the way that you would write that,
230
00:10:03.660 --> 00:10:05.640
so this is just kind of an introduction
231
00:10:05.640 --> 00:10:08.570
on how you can use in-line styles.
232
00:10:08.570 --> 00:10:12.300
Now, to hopefully make this even a little bit easier
233
00:10:12.300 --> 00:10:14.550
for understanding this syntax,
234
00:10:14.550 --> 00:10:17.620
lets actually turn this into a variable.
235
00:10:17.620 --> 00:10:20.870
So inside of the render function,
236
00:10:20.870 --> 00:10:23.210
I'm going to say const,
237
00:10:23.210 --> 00:10:25.790
and we'll just call it styles.
238
00:10:25.790 --> 00:10:29.360
And we're gonna set this equal to this object.
239
00:10:29.360 --> 00:10:31.420
So I'm going to grab everything
240
00:10:31.420 --> 00:10:34.433
from the beginning curly brackets to the end.
241
00:10:35.290 --> 00:10:37.170
And I'm gonna paste it in here.
242
00:10:37.170 --> 00:10:40.290
It's just gonna be like a normal object.
243
00:10:40.290 --> 00:10:43.100
Now, inside of this style prop,
244
00:10:43.100 --> 00:10:45.930
I can pass styles, hit Save
245
00:10:45.930 --> 00:10:48.860
and you'll see everything here is identical.
246
00:10:48.860 --> 00:10:52.120
So hopefully this makes a little bit more sense
247
00:10:52.120 --> 00:10:53.290
on the syntax.
248
00:10:53.290 --> 00:10:55.500
Styles is simply an object
249
00:10:55.500 --> 00:10:58.200
and then we're passing in that style object
250
00:10:58.200 --> 00:10:59.700
to the style prop
251
00:10:59.700 --> 00:11:03.180
and that's how we're able to customize the look
252
00:11:03.180 --> 00:11:05.750
and feel for in-line styles.
253
00:11:05.750 --> 00:11:10.070
So that's the first way of implementing styles in React.
254
00:11:10.070 --> 00:11:11.490
So what's the next way?
255
00:11:11.490 --> 00:11:13.470
Well, we have, right here,
256
00:11:13.470 --> 00:11:15.230
this className of app,
257
00:11:15.230 --> 00:11:20.230
so we can use normal Sass or CSS code as well,
258
00:11:20.780 --> 00:11:22.550
and that's what we're gonna do right now.
259
00:11:22.550 --> 00:11:25.640
So if I open up the file system,
260
00:11:25.640 --> 00:11:28.730
and navigate down into the style directory,
261
00:11:28.730 --> 00:11:31.440
so I'm going src, components,
262
00:11:31.440 --> 00:11:34.340
src, style and then main,
263
00:11:34.340 --> 00:11:39.090
you'll see that we have our regular Sass code right here.
264
00:11:39.090 --> 00:11:42.630
If I come down into this app class
265
00:11:42.630 --> 00:11:44.450
and let's say that here,
266
00:11:44.450 --> 00:11:46.340
I wanted to add a background-color again
267
00:11:46.340 --> 00:11:47.207
just to make it easy.
268
00:11:47.207 --> 00:11:50.570
I'm gonna say background-color
269
00:11:50.570 --> 00:11:52.690
and let's change this one to red.
270
00:11:52.690 --> 00:11:55.750
Now, notice, I'm writing normal CSS
271
00:11:55.750 --> 00:11:56.730
or Sass code here.
272
00:11:56.730 --> 00:12:00.590
I'm not having to use that JSX syntax.
273
00:12:00.590 --> 00:12:02.260
Now, if I hit Save here,
274
00:12:02.260 --> 00:12:05.060
now red is the background.
275
00:12:05.060 --> 00:12:09.030
So this is how you can write your styles the second way.
276
00:12:09.030 --> 00:12:11.410
That's where you are passing in,
277
00:12:11.410 --> 00:12:12.770
you're writing classes,
278
00:12:12.770 --> 00:12:15.820
and then you're using the className prop
279
00:12:15.820 --> 00:12:19.460
and then you're passing in whatever the className is.
280
00:12:19.460 --> 00:12:21.600
Now, because this is Sass,
281
00:12:21.600 --> 00:12:22.670
I'm gonna show you something
282
00:12:22.670 --> 00:12:24.880
that I really love doing
283
00:12:24.880 --> 00:12:27.900
is organizing our style code here.
284
00:12:27.900 --> 00:12:29.320
So we have our main.
285
00:12:29.320 --> 00:12:31.490
This is our entry point here
286
00:12:31.490 --> 00:12:33.760
and I'm gonna show you in one of the next guides
287
00:12:33.760 --> 00:12:36.677
how this is getting automatically imported for us.
288
00:12:36.677 --> 00:12:39.830
So I'm going to create a new file here.
289
00:12:39.830 --> 00:12:42.070
And this is gonna be called base.
290
00:12:42.070 --> 00:12:44.700
So these are gonna be our base set of styles,
291
00:12:44.700 --> 00:12:46.300
and in fact, if you want,
292
00:12:46.300 --> 00:12:48.250
for anything that is common,
293
00:12:48.250 --> 00:12:50.620
like shared across the entire application,
294
00:12:50.620 --> 00:12:53.050
I'm going to actually create a directory here,
295
00:12:53.050 --> 00:12:55.410
and if you're new to Visual Studio Code,
296
00:12:55.410 --> 00:12:57.140
I'll show you a really neat trick.
297
00:12:57.140 --> 00:12:59.910
If you type the name of the directory
298
00:12:59.910 --> 00:13:01.210
that you wanna create,
299
00:13:01.210 --> 00:13:04.106
a dash and then the file name,
300
00:13:04.106 --> 00:13:07.430
so in this case, I'm gonna create a directory
301
00:13:07.430 --> 00:13:10.320
called common, and then a file name called base.
302
00:13:10.320 --> 00:13:13.690
If you can do that all in one motion,
303
00:13:13.690 --> 00:13:16.090
it'll actually create that for you.
304
00:13:16.090 --> 00:13:18.800
Now what I'm gonna do with our main file,
305
00:13:18.800 --> 00:13:22.570
I'm going to cut everything out here.
306
00:13:22.570 --> 00:13:25.190
I'm going to open up our base file,
307
00:13:25.190 --> 00:13:27.520
hit Paste, hit Save,
308
00:13:27.520 --> 00:13:29.490
and then in main what I'm gonna do
309
00:13:29.490 --> 00:13:33.840
is be able to say that I want to import,
310
00:13:33.840 --> 00:13:37.710
so I'll say @import, because this is Sass code,
311
00:13:37.710 --> 00:13:39.570
this is not just CSS,
312
00:13:39.570 --> 00:13:41.170
we're actually working with Sass,
313
00:13:41.170 --> 00:13:46.170
I can say ./common/based.scss,
314
00:13:49.650 --> 00:13:51.890
and then end with a colon.
315
00:13:51.890 --> 00:13:54.380
Now, if I hit Save now,
316
00:13:54.380 --> 00:13:56.700
and come back here and hit Refresh,
317
00:13:56.700 --> 00:13:58.600
you'll see that all of those styles
318
00:13:58.600 --> 00:14:00.800
in our base style sheet,
319
00:14:00.800 --> 00:14:03.520
they got carried over and imported.
320
00:14:03.520 --> 00:14:07.740
So this is a much better way to organize your code.
321
00:14:07.740 --> 00:14:10.080
You would not want to build your application,
322
00:14:10.080 --> 00:14:13.610
and all of your styles be right here.
323
00:14:13.610 --> 00:14:15.220
The further we go along,
324
00:14:15.220 --> 00:14:18.150
you're gonna see that this file's gonna grow with imports.
325
00:14:18.150 --> 00:14:20.620
We're never gonna write code directly
326
00:14:20.620 --> 00:14:23.720
inside of this file expect for import statements.
327
00:14:23.720 --> 00:14:25.870
So you're gonna see we're gonna have things like this,
328
00:14:25.870 --> 00:14:27.140
and we don't have these files yet
329
00:14:27.140 --> 00:14:28.890
but just so you can see an example.
330
00:14:28.890 --> 00:14:32.680
We might have one that says import blog
331
00:14:32.680 --> 00:14:35.420
and then maybe blog-list.
332
00:14:35.420 --> 00:14:36.810
Or something like that.
333
00:14:36.810 --> 00:14:38.400
And then we might have one
334
00:14:38.400 --> 00:14:41.180
that is going to be portfolio,
335
00:14:41.180 --> 00:14:43.310
and then, for the portfolio,
336
00:14:43.310 --> 00:14:47.730
we're gonna say something like portfolio-item.
337
00:14:47.730 --> 00:14:50.880
And so we can create these dedicated,
338
00:14:50.880 --> 00:14:53.470
kind of modules in these directories
339
00:14:53.470 --> 00:14:56.350
that we can organize all of our styles in,
340
00:14:56.350 --> 00:14:58.050
and then this main file
341
00:14:58.050 --> 00:15:00.077
is simply going to be in charge
342
00:15:00.077 --> 00:15:03.670
of organizing the code for us.
343
00:15:03.670 --> 00:15:05.870
So I'm gonna get rid of those two examples.
344
00:15:05.870 --> 00:15:07.130
Just keep our base one.
345
00:15:07.130 --> 00:15:09.230
So that's nicely refactored.
346
00:15:09.230 --> 00:15:11.930
Now, any time we wanna add a new style,
347
00:15:11.930 --> 00:15:16.520
we are either going to create a new style sheet,
348
00:15:16.520 --> 00:15:17.730
and then import it,
349
00:15:17.730 --> 00:15:20.440
or we're gonna go into a pre-existing one
350
00:15:20.440 --> 00:15:22.090
and update those values.
351
00:15:22.090 --> 00:15:25.340
So those are two ways you can add styles.
352
00:15:25.340 --> 00:15:29.590
One is with in-line JSX code,
353
00:15:29.590 --> 00:15:30.770
just like we have right here,
354
00:15:30.770 --> 00:15:32.820
where you're passing in a style object
355
00:15:32.820 --> 00:15:34.500
with the style prop.
356
00:15:34.500 --> 00:15:39.500
The second one is by using normal CSS or Sass,
357
00:15:39.630 --> 00:15:42.210
and building out all of your styles that way,
358
00:15:42.210 --> 00:15:45.670
and then working with the className prop.
359
00:15:45.670 --> 00:15:49.805
So the third one, I'm going to give you this link,
360
00:15:49.805 --> 00:15:53.780
is to use what is called a styled component.
361
00:15:53.780 --> 00:15:55.330
Now, we're not gonna do this one yet,
362
00:15:55.330 --> 00:15:56.580
we're gonna do this one later
363
00:15:56.580 --> 00:16:00.850
when we get into our style implementation section
364
00:16:00.850 --> 00:16:03.410
but what a styled component is,
365
00:16:03.410 --> 00:16:07.540
it's where you're actually creating dedicated components,
366
00:16:07.540 --> 00:16:09.470
and they have a great example right here.
367
00:16:09.470 --> 00:16:11.430
We may even use this example.
368
00:16:11.430 --> 00:16:13.810
And so you create a component,
369
00:16:13.810 --> 00:16:17.670
like a button, and then, inside of the button,
370
00:16:17.670 --> 00:16:21.080
you add all of those styles.
371
00:16:21.080 --> 00:16:24.930
So any styles that you want specific to a button,
372
00:16:24.930 --> 00:16:26.650
you would put right here.
373
00:16:26.650 --> 00:16:28.830
And then, later on,
374
00:16:28.830 --> 00:16:31.010
what you can do is anywhere else
375
00:16:31.010 --> 00:16:34.930
in the application that you wanna use that set of styles,
376
00:16:34.930 --> 00:16:36.870
like in this case, a button,
377
00:16:36.870 --> 00:16:40.440
then you are gonna call that button component
378
00:16:40.440 --> 00:16:42.060
and then pass in the data,
379
00:16:42.060 --> 00:16:44.020
and then it's gonna render out for you.
380
00:16:44.020 --> 00:16:46.390
And I really like their website
381
00:16:46.390 --> 00:16:48.440
because these buttons here
382
00:16:48.440 --> 00:16:50.780
are actually the exact code.
383
00:16:50.780 --> 00:16:54.260
They're rendered from the code they gave right here.
384
00:16:54.260 --> 00:16:56.410
So you can actually change these,
385
00:16:56.410 --> 00:17:00.250
play with them and you can see it changing on the screen.
386
00:17:00.250 --> 00:17:03.330
So that is a styled component.
387
00:17:03.330 --> 00:17:08.200
Now, there's not one of these that is better
388
00:17:08.200 --> 00:17:09.430
than the others.
389
00:17:09.430 --> 00:17:11.457
I will tell you what I personally like to use,
390
00:17:11.457 --> 00:17:13.650
and the pattern that I like to follow,
391
00:17:13.650 --> 00:17:15.770
but I want you, as you go along,
392
00:17:15.770 --> 00:17:17.720
and as you build out these components,
393
00:17:17.720 --> 00:17:21.160
to start getting used to building out your own style,
394
00:17:21.160 --> 00:17:23.580
and finding what works best for you.
395
00:17:23.580 --> 00:17:26.020
So my personal preference
396
00:17:26.020 --> 00:17:29.200
is to build the majority of my styles
397
00:17:29.200 --> 00:17:32.400
using style sheets and using class names
398
00:17:32.400 --> 00:17:35.420
and following that kind of approach.
399
00:17:35.420 --> 00:17:37.800
If I need anything dynamic,
400
00:17:37.800 --> 00:17:39.763
so if I need something
401
00:17:39.763 --> 00:17:43.730
where say, for example, one of these elements,
402
00:17:43.730 --> 00:17:46.100
like the h2 tag here,
403
00:17:46.100 --> 00:17:49.440
maybe I wanted that to be highlighted
404
00:17:49.440 --> 00:17:52.650
in one scenario but then,
405
00:17:52.650 --> 00:17:55.020
if another scenario happens,
406
00:17:55.020 --> 00:17:57.640
then I want the highlight to be removed.
407
00:17:57.640 --> 00:17:58.830
Well, in that case,
408
00:17:58.830 --> 00:18:01.470
I like to use a style object
409
00:18:01.470 --> 00:18:03.860
and pass in that style prop,
410
00:18:03.860 --> 00:18:05.120
because the reason for it
411
00:18:05.120 --> 00:18:07.480
is because inside of this component,
412
00:18:07.480 --> 00:18:09.880
I can actually change these values.
413
00:18:09.880 --> 00:18:11.860
So watch what happens right here.
414
00:18:11.860 --> 00:18:15.530
Say that I have a variable here
415
00:18:15.530 --> 00:18:17.880
called dynamicBackgroundColor
416
00:18:21.330 --> 00:18:23.300
and you could change this.
417
00:18:23.300 --> 00:18:25.620
So it's gonna start out as blue
418
00:18:25.620 --> 00:18:28.520
but say the application was built
419
00:18:28.520 --> 00:18:31.910
so that this were to change to red
420
00:18:31.910 --> 00:18:34.890
if there was some scenario that happened.
421
00:18:34.890 --> 00:18:36.400
So a good example of this
422
00:18:36.400 --> 00:18:38.650
would be say a validation error.
423
00:18:38.650 --> 00:18:41.320
So say you wanted the form,
424
00:18:41.320 --> 00:18:43.230
you're building out a form on the site
425
00:18:43.230 --> 00:18:46.690
and as users type in their email address,
426
00:18:46.690 --> 00:18:50.070
if they are not typing in a valid email address,
427
00:18:50.070 --> 00:18:52.750
maybe you want to change the border to red,
428
00:18:52.750 --> 00:18:54.040
or something like that.
429
00:18:54.040 --> 00:18:55.840
Well, the easiest way of doing that
430
00:18:55.840 --> 00:19:00.190
is by setting up your data inside of the component
431
00:19:00.190 --> 00:19:02.830
and then dynamically changing that value.
432
00:19:02.830 --> 00:19:04.490
So like right here,
433
00:19:04.490 --> 00:19:07.220
we're gonna say this is our dynamicBackgroundColor
434
00:19:07.220 --> 00:19:09.050
and for backgroundColor,
435
00:19:09.050 --> 00:19:11.420
we're going to actually use a variable
436
00:19:11.420 --> 00:19:13.660
instead of a hard-coded string.
437
00:19:13.660 --> 00:19:16.530
So now, if you come back here,
438
00:19:16.530 --> 00:19:18.970
you'll see everything there is still the say.
439
00:19:18.970 --> 00:19:21.700
But say something happened in the application,
440
00:19:21.700 --> 00:19:24.700
and now, we wanna change it to black.
441
00:19:24.700 --> 00:19:28.540
Hit Save, and now you'll see that it got updated.
442
00:19:28.540 --> 00:19:30.800
So that's a scenario
443
00:19:30.800 --> 00:19:33.810
where whenever you need some dynamic behavior
444
00:19:33.810 --> 00:19:36.720
with your styles that it can be really helpful
445
00:19:36.720 --> 00:19:38.270
to use the style prop,
446
00:19:38.270 --> 00:19:40.100
because all of that logic
447
00:19:40.100 --> 00:19:43.800
can happen right here in the JavaScript code.
448
00:19:43.800 --> 00:19:45.530
And then what I like to do
449
00:19:45.530 --> 00:19:48.040
when I am using style components,
450
00:19:48.040 --> 00:19:49.760
I like to integrate them
451
00:19:49.760 --> 00:19:53.570
when I'm building dedicated components,
452
00:19:53.570 --> 00:19:56.950
like a button or maybe, one thing we're gonna do,
453
00:19:56.950 --> 00:19:59.310
is say a dashboard wrapper.
454
00:19:59.310 --> 00:20:01.040
Say we wanna have some type of layout
455
00:20:01.040 --> 00:20:02.610
that's always gonna be the same
456
00:20:02.610 --> 00:20:04.950
or it's always gonna be pretty close to the same,
457
00:20:04.950 --> 00:20:07.390
then I like to use a component like that.
458
00:20:07.390 --> 00:20:10.410
But we're gonna be using all three
459
00:20:10.410 --> 00:20:11.780
as we go through the course
460
00:20:11.780 --> 00:20:13.800
so if any of this is fuzzy
461
00:20:13.800 --> 00:20:15.770
or doesn't make sense, do not worry.
462
00:20:15.770 --> 00:20:17.900
I wanted this to be a high-level,
463
00:20:17.900 --> 00:20:20.420
but pretty comprehensive, overview
464
00:20:20.420 --> 00:20:22.690
of those three options
465
00:20:22.690 --> 00:20:25.330
and now, as we go through the rest of the course,
466
00:20:25.330 --> 00:20:27.930
you're gonna see how we pick and choose
467
00:20:27.930 --> 00:20:30.139
which implementation we're gonna use
468
00:20:30.139 --> 00:20:32.993
on a screen-by-screen basis.