- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.730 --> 00:00:03.470
In this guide, we are gonna start to learn
2
00:00:03.470 --> 00:00:06.550
about styled components in react.
3
00:00:06.550 --> 00:00:09.430
Now styled components are technically a library.
4
00:00:09.430 --> 00:00:12.160
And they're a library that allows you
5
00:00:12.160 --> 00:00:16.870
to create a component that has no real functionality,
6
00:00:16.870 --> 00:00:21.860
but simply offers a wrapper and contains a set of styles.
7
00:00:21.860 --> 00:00:25.220
And one of the best examples of thinking about this
8
00:00:25.220 --> 00:00:26.150
is a button.
9
00:00:26.150 --> 00:00:28.620
And that's what we're going to be implementing.
10
00:00:28.620 --> 00:00:32.080
And we're gonna see how we can create a button component,
11
00:00:32.080 --> 00:00:34.490
we're not gonna worry about what the button does,
12
00:00:34.490 --> 00:00:37.260
what type of action it's gonna do or anything like that.
13
00:00:37.260 --> 00:00:39.740
All we're gonna do is create a button
14
00:00:39.740 --> 00:00:44.280
that can actually have a set of preset styles.
15
00:00:44.280 --> 00:00:46.150
And we're gonna break this into two guides
16
00:00:46.150 --> 00:00:50.020
because I want you to learn about how you can research
17
00:00:50.020 --> 00:00:52.110
these type of libraries and then we're gonna see
18
00:00:52.110 --> 00:00:53.310
how we can implement it.
19
00:00:53.310 --> 00:00:55.910
So in this guide, what I want you to do
20
00:00:55.910 --> 00:00:59.050
is I want you to come to the styled components website
21
00:00:59.050 --> 00:01:01.650
and I'll provide a link in the show notes to it,
22
00:01:01.650 --> 00:01:04.300
and I want you to go through the documentation.
23
00:01:04.300 --> 00:01:07.720
So right here, it actually gives you a really cool
24
00:01:07.720 --> 00:01:10.880
little introduction for how the code
25
00:01:10.880 --> 00:01:12.630
is gonna look for a styled component.
26
00:01:12.630 --> 00:01:14.680
And this is a live updating code.
27
00:01:14.680 --> 00:01:17.430
So assuming the homepage looks the same,
28
00:01:17.430 --> 00:01:19.740
when you're going through this course is right now,
29
00:01:19.740 --> 00:01:23.170
you can actually come here to this button and change it up.
30
00:01:23.170 --> 00:01:25.750
So say I wanted to change this border,
31
00:01:25.750 --> 00:01:27.960
and I wanted the border to be red,
32
00:01:27.960 --> 00:01:30.650
you can see these buttons actually are changing
33
00:01:30.650 --> 00:01:33.920
on the fly as we are updating this code.
34
00:01:33.920 --> 00:01:35.140
So that's a pretty cool way
35
00:01:35.140 --> 00:01:38.210
to get an introduction for how they work.
36
00:01:38.210 --> 00:01:41.200
But if you click on the documentation link here,
37
00:01:41.200 --> 00:01:44.740
you'll see that it has all kinds of different use cases.
38
00:01:44.740 --> 00:01:47.600
And these are really important skills to learn,
39
00:01:47.600 --> 00:01:50.220
not just for learning about styled components,
40
00:01:50.220 --> 00:01:52.900
but one of the reasons why I want you to take some time,
41
00:01:52.900 --> 00:01:55.580
I want you to go through this documentation
42
00:01:55.580 --> 00:01:59.430
is because a lot of other react libraries
43
00:01:59.430 --> 00:02:03.540
use the same type of flow with their documentation.
44
00:02:03.540 --> 00:02:06.630
And so it's really good practice to go through it,
45
00:02:06.630 --> 00:02:08.100
because it's gonna teach you
46
00:02:08.100 --> 00:02:10.710
how you can research other libraries.
47
00:02:10.710 --> 00:02:12.780
Because after you finish this course,
48
00:02:12.780 --> 00:02:15.170
and after you finish going through the code school,
49
00:02:15.170 --> 00:02:17.610
I'm not gonna be there teaching you how to build
50
00:02:17.610 --> 00:02:20.910
every one of the features you're gonna need to build.
51
00:02:20.910 --> 00:02:25.230
Instead, I'm trying to teach you how you can learn
52
00:02:25.230 --> 00:02:26.680
how to work with new libraries,
53
00:02:26.680 --> 00:02:28.770
how you can research documentation,
54
00:02:28.770 --> 00:02:30.270
because that's what you're gonna have to do.
55
00:02:30.270 --> 00:02:33.030
That's what I personally do whenever I'm asked
56
00:02:33.030 --> 00:02:36.190
to build some new feature that I've never built before,
57
00:02:36.190 --> 00:02:38.600
or work with a library I've never used before,
58
00:02:38.600 --> 00:02:40.660
as I go straight to the documentation,
59
00:02:40.660 --> 00:02:44.030
that is your manual for learning how to work
60
00:02:44.030 --> 00:02:46.930
with a new codebase or with a new feature.
61
00:02:46.930 --> 00:02:50.480
So what I want you to do, there's a lot of documentation,
62
00:02:50.480 --> 00:02:51.970
I want you to go through all of it.
63
00:02:51.970 --> 00:02:55.500
Just really go into the Getting Started page here
64
00:02:55.500 --> 00:02:58.300
because this is gonna teach you the fundamentals
65
00:02:58.300 --> 00:03:00.520
of this library and it also has
66
00:03:00.520 --> 00:03:02.870
all of this live updating code here too.
67
00:03:02.870 --> 00:03:05.570
So you have all of these code examples,
68
00:03:05.570 --> 00:03:09.520
you can copy them, you can paste them in your own projects,
69
00:03:09.520 --> 00:03:12.440
all of that is gonna be really helpful.
70
00:03:12.440 --> 00:03:14.660
So here they give an example of how to build
71
00:03:14.660 --> 00:03:17.550
a title component or a wrapper component.
72
00:03:17.550 --> 00:03:19.830
And then you can make changes here
73
00:03:19.830 --> 00:03:23.270
and you can see it updated on the right hand side.
74
00:03:23.270 --> 00:03:26.020
So I want you to go through, I want you to get an idea
75
00:03:26.020 --> 00:03:29.900
for the syntax for kind of the overall structure
76
00:03:29.900 --> 00:03:31.880
for how styled components work.
77
00:03:31.880 --> 00:03:34.040
And then in the next guide, we're gonna see
78
00:03:34.040 --> 00:03:35.930
how we can actually work with them.
79
00:03:35.930 --> 00:03:37.370
The one thing we are gonna do,
80
00:03:37.370 --> 00:03:39.580
the last thing we're gonna do here in this guide
81
00:03:39.580 --> 00:03:42.070
is we're going to install this because I want
82
00:03:42.070 --> 00:03:44.320
to walk through that process.
83
00:03:44.320 --> 00:03:47.040
So if you click on the installation link here,
84
00:03:47.040 --> 00:03:49.380
they give you code that you can just copy and paste
85
00:03:49.380 --> 00:03:51.550
so you can just copy where it says
86
00:03:51.550 --> 00:03:55.670
npminstall__save styled components.
87
00:03:55.670 --> 00:03:58.530
And just to show you there are multiple ways
88
00:03:58.530 --> 00:04:00.400
of performing many tasks.
89
00:04:00.400 --> 00:04:04.250
So if you open up the terminal here, you can run this code.
90
00:04:04.250 --> 00:04:06.500
So you can type this all out.
91
00:04:06.500 --> 00:04:10.310
This is exactly the same thing as doing this,
92
00:04:10.310 --> 00:04:15.310
as typing this, it's just a longer way of typing
93
00:04:16.310 --> 00:04:19.500
exactly what we have right here, you can use either option,
94
00:04:19.500 --> 00:04:21.660
they're both gonna run the exact same way.
95
00:04:21.660 --> 00:04:23.570
So I'm gonna hit return, and that's gonna go out
96
00:04:23.570 --> 00:04:26.780
and that's gonna install the styled components library.
97
00:04:26.780 --> 00:04:29.830
Now also, if you go through right here,
98
00:04:29.830 --> 00:04:32.670
and if you look in it, you can see that we have
99
00:04:32.670 --> 00:04:34.570
some additional instructions.
100
00:04:34.570 --> 00:04:37.730
So you have in package JSON, it says that
101
00:04:37.730 --> 00:04:40.600
you have these resolutions for styled components.
102
00:04:40.600 --> 00:04:42.080
I don't want you to worry about that.
103
00:04:42.080 --> 00:04:45.220
That says if you're using the package manager yarn,
104
00:04:45.220 --> 00:04:48.140
so we're gonna skip this one because we're using NPM.
105
00:04:48.140 --> 00:04:50.610
But down here, there's a special note
106
00:04:50.610 --> 00:04:53.410
and it says it's highly recommended, but not required
107
00:04:53.410 --> 00:04:55.450
to use the Babel plugin.
108
00:04:55.450 --> 00:04:57.030
So I am gonna do that.
109
00:04:57.030 --> 00:04:59.680
So I'm gonna click on where it says Babel plugin
110
00:04:59.680 --> 00:05:02.810
and now we have this other library,
111
00:05:02.810 --> 00:05:04.510
we're gonna copy and paste,
112
00:05:04.510 --> 00:05:06.390
and then some additional instructions.
113
00:05:06.390 --> 00:05:08.813
And this is the reason why I wanted to walk you through this
114
00:05:08.813 --> 00:05:10.690
because if you've never done this before,
115
00:05:10.690 --> 00:05:12.650
it might be a little bit tricky.
116
00:05:12.650 --> 00:05:14.550
So it looks like that installed.
117
00:05:14.550 --> 00:05:19.150
So now let's install these Babel plugins styled components.
118
00:05:19.150 --> 00:05:22.860
And what these are doing, what this second library is,
119
00:05:22.860 --> 00:05:24.780
it's optional, like it mentioned,
120
00:05:24.780 --> 00:05:26.790
but this is gonna give you the ability
121
00:05:26.790 --> 00:05:30.100
to have some kind of syntactic sugar,
122
00:05:30.100 --> 00:05:32.620
is kind of the code name for it,
123
00:05:32.620 --> 00:05:36.120
it gives you the ability to use some special class names
124
00:05:36.120 --> 00:05:39.540
and just to really structure it in a way
125
00:05:39.540 --> 00:05:42.030
that makes it a little bit easier to write the code
126
00:05:42.030 --> 00:05:44.450
and that's what we're doing right here.
127
00:05:44.450 --> 00:05:46.930
And so after you've written all of that,
128
00:05:46.930 --> 00:05:50.120
or you've installed all of that, then we can go
129
00:05:50.120 --> 00:05:54.703
into our plugins directory, and we can copy this code.
130
00:05:55.622 --> 00:05:57.060
And this is what it gives right here.
131
00:05:57.060 --> 00:05:59.530
This is gonna go in our Babel RC file.
132
00:05:59.530 --> 00:06:01.900
Now we haven't opened that in a very long time.
133
00:06:01.900 --> 00:06:05.180
So if you go to the very root of your application,
134
00:06:05.180 --> 00:06:09.840
you will see this .babelrc file.
135
00:06:09.840 --> 00:06:12.700
And you can see that I already have a set of plugins
136
00:06:12.700 --> 00:06:16.560
that I've added here, we're gonna simply add this new one,
137
00:06:16.560 --> 00:06:21.560
this Babel plugin styled components plugin, and hit save.
138
00:06:21.970 --> 00:06:23.410
And that's all we have to do.
139
00:06:23.410 --> 00:06:26.720
And that plugin is now installed,
140
00:06:26.720 --> 00:06:28.770
and everything is working properly.
141
00:06:28.770 --> 00:06:32.340
So you now have the styled components library
142
00:06:32.340 --> 00:06:34.150
installed in the application.
143
00:06:34.150 --> 00:06:37.560
We've added that Babel plugin to just kinda be able
144
00:06:37.560 --> 00:06:40.690
to write a little bit more efficiently with our code
145
00:06:40.690 --> 00:06:43.520
and have it compiled down in a little bit better way.
146
00:06:43.520 --> 00:06:46.240
And now before you go on to the next video,
147
00:06:46.240 --> 00:06:49.230
I want you to take a break and I want you to go through
148
00:06:49.230 --> 00:06:52.010
the Getting Started guide inside
149
00:06:52.010 --> 00:06:55.600
of the styled components documentation.
150
00:06:55.600 --> 00:06:58.520
I want you to go through those examples really see
151
00:06:58.520 --> 00:07:01.930
the way they structure their code in the syntax they use
152
00:07:01.930 --> 00:07:04.640
because once you do that, you're gonna find
153
00:07:04.640 --> 00:07:06.420
that when we go into the next guide,
154
00:07:06.420 --> 00:07:08.680
and we actually implement our own button,
155
00:07:08.680 --> 00:07:10.470
you're gonna see that it's a lot easier
156
00:07:10.470 --> 00:07:13.460
because you've already familiarized yourself
157
00:07:13.460 --> 00:07:16.170
with this code base and with this documentation,
158
00:07:16.170 --> 00:07:19.320
and when we go and we build our own button component,
159
00:07:19.320 --> 00:07:22.730
you're gonna be able to work through that code much easier
160
00:07:22.730 --> 00:07:25.060
because you've already gone through the documentation.
161
00:07:25.060 --> 00:07:27.160
So go through that Getting Started guide,
162
00:07:27.160 --> 00:07:29.503
and I'll see you in our next video.