- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.340 --> 00:00:02.500
Nice job in going through that style guide.
2
00:00:02.500 --> 00:00:06.460
I know that can be a little bit challenging to learn,
3
00:00:06.460 --> 00:00:09.010
especially the first time that you see it,
4
00:00:09.010 --> 00:00:11.830
but don't worry, we're gonna walk through each
5
00:00:11.830 --> 00:00:15.030
of those elements throughout this entire course.
6
00:00:15.030 --> 00:00:17.390
So now what we're gonna do in this guide
7
00:00:17.390 --> 00:00:19.140
is we're gonna take a step back
8
00:00:19.140 --> 00:00:23.930
and we are going to look at the component itself.
9
00:00:23.930 --> 00:00:26.840
So right now, we've been spending our time
10
00:00:26.840 --> 00:00:28.160
over the last few guides looking
11
00:00:28.160 --> 00:00:30.360
at our App component.
12
00:00:30.360 --> 00:00:33.560
So when we're talking about React,
13
00:00:33.560 --> 00:00:38.190
React uses what is called a component-based architecture.
14
00:00:38.190 --> 00:00:40.520
So what does that mean exactly?
15
00:00:40.520 --> 00:00:45.200
Well, what it means is that we build React applications
16
00:00:45.200 --> 00:00:48.700
by putting components together,
17
00:00:48.700 --> 00:00:50.790
and don't worry if that's still a little fuzzy.
18
00:00:50.790 --> 00:00:53.020
We're gonna go through some examples here,
19
00:00:53.020 --> 00:00:56.910
and we're also gonna analyze a few different syntax options
20
00:00:56.910 --> 00:00:59.930
that you have when you're building out components.
21
00:00:59.930 --> 00:01:02.620
So this very first one, this App one
22
00:01:02.620 --> 00:01:04.180
that we started out with,
23
00:01:04.180 --> 00:01:07.040
this is called a class-based component.
24
00:01:07.040 --> 00:01:11.270
And if you start at the very top of the file,
25
00:01:11.270 --> 00:01:13.950
you can see that in order to get this to work,
26
00:01:13.950 --> 00:01:16.700
we first have to import React
27
00:01:16.700 --> 00:01:20.270
and then this Component module
28
00:01:20.270 --> 00:01:22.190
from the react library.
29
00:01:22.190 --> 00:01:24.600
So where're getting this from?
30
00:01:24.600 --> 00:01:26.820
Well, this react library
31
00:01:26.820 --> 00:01:30.000
is actually getting pulled from node_modules,
32
00:01:30.000 --> 00:01:31.600
and if you hover over it,
33
00:01:31.600 --> 00:01:32.680
you'll see right here
34
00:01:32.680 --> 00:01:35.020
where it says that we're getting this
35
00:01:35.020 --> 00:01:38.600
from Users/admin, and then it's going all the way through
36
00:01:38.600 --> 00:01:40.850
until where it says node_modules.
37
00:01:40.850 --> 00:01:42.760
And then react.
38
00:01:42.760 --> 00:01:45.940
So this is, at the end of the day,
39
00:01:45.940 --> 00:01:49.020
React is just JavaScript code.
40
00:01:49.020 --> 00:01:51.400
I don't want you to think
41
00:01:51.400 --> 00:01:54.500
that React is made up of this magic fairy dust
42
00:01:54.500 --> 00:01:57.450
that allows your applications to do cool things.
43
00:01:57.450 --> 00:01:59.540
React is JavaScript.
44
00:01:59.540 --> 00:02:00.610
That's all it is.
45
00:02:00.610 --> 00:02:03.820
It is a set of JavaScript functions,
46
00:02:03.820 --> 00:02:06.640
classes, modules, and those things
47
00:02:06.640 --> 00:02:08.370
that developers have put together,
48
00:02:08.370 --> 00:02:10.730
and then we're able to use those
49
00:02:10.730 --> 00:02:13.070
in order to build our applications.
50
00:02:13.070 --> 00:02:16.610
So this first line is our import statement.
51
00:02:16.610 --> 00:02:20.260
So this is where we're saying we wanna use React.
52
00:02:20.260 --> 00:02:22.830
You're gonna have this line,
53
00:02:22.830 --> 00:02:26.380
or a variation of it, in every file
54
00:02:26.380 --> 00:02:28.160
that you're going to create
55
00:02:28.160 --> 00:02:31.000
that implements some type of component.
56
00:02:31.000 --> 00:02:34.200
So definitely get used to writing this out.
57
00:02:34.200 --> 00:02:37.610
This is giving us the ability to use React,
58
00:02:37.610 --> 00:02:39.000
and we're gonna talk a little bit more
59
00:02:39.000 --> 00:02:44.000
about imports when we move down to our package.json file.
60
00:02:44.200 --> 00:02:46.830
Now, starting on line three here,
61
00:02:46.830 --> 00:02:49.390
we are defining a class,
62
00:02:49.390 --> 00:02:51.470
and we're also exporting it.
63
00:02:51.470 --> 00:02:54.230
Don't worry about understanding the export
64
00:02:54.230 --> 00:02:56.670
and export default keywords right now.
65
00:02:56.670 --> 00:02:59.240
We're gonna work on that in a little bit.
66
00:02:59.240 --> 00:03:03.280
So that starts to get a little bit more challenging,
67
00:03:03.280 --> 00:03:05.680
and so I don't want you to even worry about it.
68
00:03:05.680 --> 00:03:08.520
For right now, just realize we're creating
69
00:03:08.520 --> 00:03:11.120
a class-based component called App,
70
00:03:11.120 --> 00:03:13.770
and that's all you have to think about right now.
71
00:03:13.770 --> 00:03:17.820
Now, whenever you're using a class-based component in React,
72
00:03:17.820 --> 00:03:19.660
there is a requirement
73
00:03:19.660 --> 00:03:22.760
that you need to call this render function.
74
00:03:22.760 --> 00:03:24.710
So this render function
75
00:03:24.710 --> 00:03:27.770
is a built-in function to React.
76
00:03:27.770 --> 00:03:30.870
So whenever we imported React,
77
00:03:30.870 --> 00:03:34.220
and we said that we wanted this class component
78
00:03:34.220 --> 00:03:37.360
to extend the Component module,
79
00:03:37.360 --> 00:03:40.170
then React automatically knows
80
00:03:40.170 --> 00:03:43.680
that we're going to need the render function.
81
00:03:43.680 --> 00:03:45.540
So the render function is something
82
00:03:45.540 --> 00:03:48.020
that is called and inside of it,
83
00:03:48.020 --> 00:03:50.680
we return the JSX code.
84
00:03:50.680 --> 00:03:53.260
So that is all that's happening
85
00:03:53.260 --> 00:03:55.580
is this function is being called
86
00:03:55.580 --> 00:03:57.510
and then inside of it,
87
00:03:57.510 --> 00:03:59.120
we're returning some JSX,
88
00:03:59.120 --> 00:04:01.730
and that's what gets rendered on the screen.
89
00:04:01.730 --> 00:04:03.690
Now, this is a class-based component.
90
00:04:03.690 --> 00:04:07.800
Let's see how we can create another component.
91
00:04:07.800 --> 00:04:10.040
So we're gonna do this one from scratch.
92
00:04:10.040 --> 00:04:13.060
Let's say that we want a navigation bar here
93
00:04:13.060 --> 00:04:15.555
at the top, and we are going to do this.
94
00:04:15.555 --> 00:04:19.750
So at the very top, right below where it says import React,
95
00:04:19.750 --> 00:04:20.700
we're gonna create
96
00:04:20.700 --> 00:04:23.280
what is called a function-based component,
97
00:04:23.280 --> 00:04:24.860
or a functional component.
98
00:04:24.860 --> 00:04:28.500
And I'm doing this so you can see the difference in syntax
99
00:04:28.500 --> 00:04:30.600
between class components
100
00:04:30.600 --> 00:04:32.810
and function-based components.
101
00:04:32.810 --> 00:04:34.450
So I'm gonna say const,
102
00:04:34.450 --> 00:04:38.200
and let's call this our NavBar.
103
00:04:38.200 --> 00:04:40.790
So this is const NavBar,
104
00:04:40.790 --> 00:04:42.145
and I'm just gonna set this equal
105
00:04:42.145 --> 00:04:45.010
to a fat arrow function here
106
00:04:45.010 --> 00:04:47.390
with no arguments for right now.
107
00:04:47.390 --> 00:04:49.280
And inside of here,
108
00:04:49.280 --> 00:04:51.630
I can just have a return statement.
109
00:04:51.630 --> 00:04:53.270
So I'm gonna say return,
110
00:04:53.270 --> 00:04:54.930
and inside of this,
111
00:04:54.930 --> 00:04:56.620
I'm gonna have a div,
112
00:04:56.620 --> 00:04:59.950
and then let's add a few more divs inside of here.
113
00:04:59.950 --> 00:05:04.360
So we can maybe say the first one's gonna be your name.
114
00:05:04.360 --> 00:05:06.910
Type in just whatever your name is
115
00:05:06.910 --> 00:05:08.730
'cause this gonna be your portfolio
116
00:05:08.730 --> 00:05:11.500
so you're name will be on the top left-hand side.
117
00:05:11.500 --> 00:05:15.820
And then after it, let's just add some other type of div.
118
00:05:15.820 --> 00:05:17.770
Here we can say Home.
119
00:05:17.770 --> 00:05:19.310
We're not gonna make this clickable,
120
00:05:19.310 --> 00:05:21.200
we're not gonna worry about anything like that
121
00:05:21.200 --> 00:05:22.400
for right now.
122
00:05:22.400 --> 00:05:24.620
And then for the next one,
123
00:05:24.620 --> 00:05:25.830
we'll say Portfolio.
124
00:05:25.830 --> 00:05:27.810
And I don't even really want you
125
00:05:27.810 --> 00:05:30.760
to worry or care about the nesting of these divs,
126
00:05:30.760 --> 00:05:32.690
and I'm gonna hit Save,
127
00:05:32.690 --> 00:05:35.080
and the formatting will get updated.
128
00:05:35.080 --> 00:05:37.360
So I'm more wanting
129
00:05:37.360 --> 00:05:40.270
to show you the way function-based components work.
130
00:05:40.270 --> 00:05:42.030
Don't worry about the divs inside.
131
00:05:42.030 --> 00:05:43.840
You can set them up however you want.
132
00:05:43.840 --> 00:05:46.960
When we get into styling our navigation system,
133
00:05:46.960 --> 00:05:49.400
then we'll spend more time on that.
134
00:05:49.400 --> 00:05:52.710
But for right now, just know that you have a single div,
135
00:05:52.710 --> 00:05:55.570
and then you have three divs nested inside of it.
136
00:05:55.570 --> 00:05:58.010
Now, notice nothing that I typed
137
00:05:58.010 --> 00:06:00.010
is being shown on the screen,
138
00:06:00.010 --> 00:06:02.320
and that's because we haven't actually called
139
00:06:02.320 --> 00:06:03.720
this component yet.
140
00:06:03.720 --> 00:06:05.520
So how can we do that?
141
00:06:05.520 --> 00:06:07.340
Well, if we come down here,
142
00:06:07.340 --> 00:06:12.340
and I'm gonna place this inside of our App class here.
143
00:06:12.720 --> 00:06:17.470
Now I can call the NavBar component we just created.
144
00:06:17.470 --> 00:06:21.150
I'm gonna type it out, starting with the less than sign,
145
00:06:21.150 --> 00:06:23.910
and then I'm gonna close it out.
146
00:06:23.910 --> 00:06:27.830
And now, if I hit Save, and come over here,
147
00:06:27.830 --> 00:06:29.380
you'll see at the very top,
148
00:06:29.380 --> 00:06:31.970
and I'll zoom in so you can see it a little easier,
149
00:06:31.970 --> 00:06:33.130
at the very top,
150
00:06:33.130 --> 00:06:35.690
there is the start of our NavBar.
151
00:06:35.690 --> 00:06:38.330
So this is a component.
152
00:06:38.330 --> 00:06:40.590
Now, what's really cool about this
153
00:06:40.590 --> 00:06:45.590
is that because of the way React applications are created,
154
00:06:46.300 --> 00:06:50.640
and because they use this component-based architecture,
155
00:06:50.640 --> 00:06:55.640
you are able to reuse these components anywhere else
156
00:06:55.860 --> 00:06:57.270
in the application
157
00:06:57.270 --> 00:07:00.780
and call them in any way that you really want.
158
00:07:00.780 --> 00:07:04.310
So let's say that in certain circumstances,
159
00:07:04.310 --> 00:07:06.020
we want the NavBar on the top
160
00:07:06.020 --> 00:07:08.610
but then let's say, on other pages,
161
00:07:08.610 --> 00:07:10.410
maybe we wanna put on the bottom.
162
00:07:10.410 --> 00:07:13.080
Well, I can just copy that NavBar component,
163
00:07:13.080 --> 00:07:15.880
hit Save, and now you'll see
164
00:07:15.880 --> 00:07:19.810
that this is also being called here on the bottom.
165
00:07:19.810 --> 00:07:21.200
So this is pretty cool.
166
00:07:21.200 --> 00:07:24.800
This is hopefully giving you a little bit
167
00:07:24.800 --> 00:07:29.040
of a feel for how component-based architecture works.
168
00:07:29.040 --> 00:07:32.100
Now, also notice, at the very top,
169
00:07:32.100 --> 00:07:33.930
in our NavBar component,
170
00:07:33.930 --> 00:07:38.620
notice how much less code we're able to write.
171
00:07:38.620 --> 00:07:41.920
So we didn't need a render function,
172
00:07:41.920 --> 00:07:44.850
and we didn't need some of the other things
173
00:07:44.850 --> 00:07:49.070
that usually you would need with a class-based component.
174
00:07:49.070 --> 00:07:52.200
And so that's the main goal I want you to take away
175
00:07:52.200 --> 00:07:55.270
from this guide is an understanding
176
00:07:55.270 --> 00:07:58.840
of the difference between functional components
177
00:07:58.840 --> 00:08:01.150
and class-based components.
178
00:08:01.150 --> 00:08:04.850
So that is what I want you to walk away with,
179
00:08:04.850 --> 00:08:09.470
and then I also want to think of when you would call one
180
00:08:09.470 --> 00:08:10.700
versus the other.
181
00:08:10.700 --> 00:08:12.700
And I'll give you a little bit of a hint,
182
00:08:12.700 --> 00:08:13.860
and a rule of thumb.
183
00:08:13.860 --> 00:08:18.860
You're gonna be using function-based components 99.9%
184
00:08:19.730 --> 00:08:20.920
of the time.
185
00:08:20.920 --> 00:08:24.700
So that is something that I want you to remember.
186
00:08:24.700 --> 00:08:28.300
This syntax here is what you're gonna be using the majority
187
00:08:28.300 --> 00:08:30.990
of the time, and the class-based component
188
00:08:30.990 --> 00:08:35.170
is only gonna be used in some very special cases.
189
00:08:35.170 --> 00:08:37.070
And so, over the next few guides,
190
00:08:37.070 --> 00:08:38.550
we're gonna walk through
191
00:08:38.550 --> 00:08:42.207
when you would wanna create a class-based component,
192
00:08:42.207 --> 00:08:44.580
and a function component,
193
00:08:44.580 --> 00:08:47.490
and how you can call them, how you can import them
194
00:08:47.490 --> 00:08:50.950
from other files, and how you can do some things like that.
195
00:08:50.950 --> 00:08:53.070
In the next guide, what we're gonna do
196
00:08:53.070 --> 00:08:55.330
is we're going to split this file,
197
00:08:55.330 --> 00:08:58.370
this App file, into separate files,
198
00:08:58.370 --> 00:09:01.480
so you're gonna see how the export system,
199
00:09:01.480 --> 00:09:03.410
and how the default system works
200
00:09:03.410 --> 00:09:05.870
with exporting and importing,
201
00:09:05.870 --> 00:09:10.870
and then we're also going to refactor this function here,
202
00:09:11.220 --> 00:09:13.020
refactor this component
203
00:09:13.020 --> 00:09:15.430
so that it is a functional component.
204
00:09:15.430 --> 00:09:16.920
And the reason why I'm doing this,
205
00:09:16.920 --> 00:09:19.640
and the reason why I have the template starting off
206
00:09:19.640 --> 00:09:21.320
with a class-based component
207
00:09:21.320 --> 00:09:23.180
is so that you can become familiar
208
00:09:23.180 --> 00:09:25.870
with both options because you are gonna notice,
209
00:09:25.870 --> 00:09:29.350
when you go through documentation for Node modules,
210
00:09:29.350 --> 00:09:31.460
or when you go through other tutorials
211
00:09:31.460 --> 00:09:33.560
for certain features you're gonna build,
212
00:09:33.560 --> 00:09:36.840
you're gonna see that both syntax options
213
00:09:36.840 --> 00:09:38.340
are used quite a bit,
214
00:09:38.340 --> 00:09:41.650
and so I want you to become very familiar
215
00:09:41.650 --> 00:09:43.260
with both options
216
00:09:43.260 --> 00:09:47.433
so that you can work with either one in the right scenario.