- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.610 --> 00:00:02.060
Now that you're more familiar
2
00:00:02.060 --> 00:00:04.250
with the two types of components
3
00:00:04.250 --> 00:00:06.300
that you can work with in React,
4
00:00:06.300 --> 00:00:08.270
we're now going to extend that knowledge
5
00:00:08.270 --> 00:00:11.110
and we're gonna see how we can import
6
00:00:11.110 --> 00:00:14.230
and we can export and organize our files
7
00:00:14.230 --> 00:00:17.380
and our components in a React application.
8
00:00:17.380 --> 00:00:20.430
So right now, we have our NavBar component,
9
00:00:20.430 --> 00:00:22.440
and this is a functional component,
10
00:00:22.440 --> 00:00:26.720
and it's currently in the main app component.
11
00:00:26.720 --> 00:00:28.950
That's not really ideal
12
00:00:28.950 --> 00:00:30.850
because as you can imagine,
13
00:00:30.850 --> 00:00:32.500
and as you're gonna see,
14
00:00:32.500 --> 00:00:34.490
as we build out this course,
15
00:00:34.490 --> 00:00:36.630
we're gonna have quite a few components
16
00:00:36.630 --> 00:00:39.200
and we wouldn't want them to all be
17
00:00:39.200 --> 00:00:40.490
in the same file.
18
00:00:40.490 --> 00:00:42.640
That'd be very difficult to manage.
19
00:00:42.640 --> 00:00:44.000
So instead, what we're gonna do
20
00:00:44.000 --> 00:00:48.360
is we're gonna create a dedicated NavBar file
21
00:00:48.360 --> 00:00:50.820
that this component's going to live in,
22
00:00:50.820 --> 00:00:55.170
and then we're going to be able to import that directly
23
00:00:55.170 --> 00:00:57.460
into this app component.
24
00:00:57.460 --> 00:00:59.180
So let's get started with that.
25
00:00:59.180 --> 00:01:01.670
I'm gonna open up the file system here
26
00:01:01.670 --> 00:01:03.040
on the left-hand side.
27
00:01:03.040 --> 00:01:05.130
And then I'm gonna hover over
28
00:01:05.130 --> 00:01:07.000
where it says components.
29
00:01:07.000 --> 00:01:08.900
I'm gonna select New File.
30
00:01:08.900 --> 00:01:13.043
And then I'm gonna type out shared/NavBar.js.
31
00:01:14.770 --> 00:01:16.690
Now, I could have called this anything.
32
00:01:16.690 --> 00:01:18.460
I could have called the file anything,
33
00:01:18.460 --> 00:01:21.890
I could have called the directory anything that I wanted.
34
00:01:21.890 --> 00:01:23.610
I think these makes sense
35
00:01:23.610 --> 00:01:26.930
but it's perfectly fine for you to structure
36
00:01:26.930 --> 00:01:28.840
and for you to call your files
37
00:01:28.840 --> 00:01:32.060
and your directories, whatever makes the most sense to you.
38
00:01:32.060 --> 00:01:34.260
There's nothing special about this naming.
39
00:01:34.260 --> 00:01:38.040
React is very flexible in giving you the ability
40
00:01:38.040 --> 00:01:40.430
to configure your applications
41
00:01:40.430 --> 00:01:43.740
to work and be organized however you want.
42
00:01:43.740 --> 00:01:45.374
So I'm gonna hit Return here.
43
00:01:45.374 --> 00:01:49.437
And now, let me go back to our NavBar,
44
00:01:49.437 --> 00:01:51.400
or to our app component,
45
00:01:51.400 --> 00:01:53.890
and I'm gonna cut out the NavBar,
46
00:01:53.890 --> 00:01:55.380
that entire function,
47
00:01:55.380 --> 00:01:58.230
and I'm gonna paste it in here.
48
00:01:58.230 --> 00:02:00.030
I'm gonna close out the side bar
49
00:02:00.030 --> 00:02:03.630
and now let's see what steps we need to take
50
00:02:03.630 --> 00:02:06.320
to be able to call this NavBar
51
00:02:06.320 --> 00:02:09.190
from the app component the same way we did
52
00:02:09.190 --> 00:02:11.000
when they were in the same file.
53
00:02:11.000 --> 00:02:14.100
If I go back to this app component now,
54
00:02:14.100 --> 00:02:15.210
this would not work.
55
00:02:15.210 --> 00:02:17.250
So let's actually test it out.
56
00:02:17.250 --> 00:02:19.320
If I hit Save now,
57
00:02:19.320 --> 00:02:22.640
you'll see that the entire page goes missing,
58
00:02:22.640 --> 00:02:23.770
and there's an error.
59
00:02:23.770 --> 00:02:25.210
If you wanna see the error,
60
00:02:25.210 --> 00:02:28.410
right click on the browser, click Inspect,
61
00:02:28.410 --> 00:02:31.170
and then go to the console
62
00:02:31.170 --> 00:02:32.920
and you'll see that we have some errors.
63
00:02:32.920 --> 00:02:34.560
It says ReferenceError.
64
00:02:34.560 --> 00:02:36.920
NavBar is not defined.
65
00:02:36.920 --> 00:02:38.220
So what this is saying
66
00:02:38.220 --> 00:02:42.940
is that React tried to render this app component
67
00:02:42.940 --> 00:02:45.490
but then when it got to line 15 here,
68
00:02:45.490 --> 00:02:47.970
it found this NavBar element
69
00:02:47.970 --> 00:02:50.610
and it couldn't find the code for it anywhere.
70
00:02:50.610 --> 00:02:52.438
So what we need to do
71
00:02:52.438 --> 00:02:55.180
is there are two steps we need to take.
72
00:02:55.180 --> 00:03:00.140
We need to export the NavBar from this file
73
00:03:00.140 --> 00:03:02.090
and then we're gonna have to import it
74
00:03:02.090 --> 00:03:04.180
into this app component.
75
00:03:04.180 --> 00:03:06.230
So let's get started with that.
76
00:03:06.230 --> 00:03:08.340
If you remember from the last video,
77
00:03:08.340 --> 00:03:11.670
I said that any time you're working with any type
78
00:03:11.670 --> 00:03:14.700
of component, whether it's class or function based,
79
00:03:14.700 --> 00:03:17.460
you have to import React at the top of the file.
80
00:03:17.460 --> 00:03:18.960
So we're gonna do that first.
81
00:03:18.960 --> 00:03:23.460
So I'm gonna say import React from react.
82
00:03:23.460 --> 00:03:24.600
Just like this.
83
00:03:24.600 --> 00:03:28.700
And notice also, because this is a function-based component,
84
00:03:28.700 --> 00:03:32.340
I did not have to put in the import
85
00:03:32.340 --> 00:03:35.250
for curly brackets Component.
86
00:03:35.250 --> 00:03:38.840
And if you're curious on the difference
87
00:03:38.840 --> 00:03:42.260
between why we're able to just call React here
88
00:03:42.260 --> 00:03:44.530
and then Component had to be wrapped
89
00:03:44.530 --> 00:03:46.290
inside of curly brackets,
90
00:03:46.290 --> 00:03:47.770
don't let that bother you.
91
00:03:47.770 --> 00:03:50.440
In the next video, that's what we're gonna walk through.
92
00:03:50.440 --> 00:03:52.900
We're gonna see how that works,
93
00:03:52.900 --> 00:03:54.070
why it's different,
94
00:03:54.070 --> 00:03:55.450
and the reason I'm doing
95
00:03:55.450 --> 00:03:58.660
that is so that it'll make a little bit more sense
96
00:03:58.660 --> 00:03:59.760
when you see it here,
97
00:03:59.760 --> 00:04:02.320
and when you see it on other tutorials,
98
00:04:02.320 --> 00:04:04.160
and when you're seeing it
99
00:04:04.160 --> 00:04:06.410
in any application you're building.
100
00:04:06.410 --> 00:04:08.120
So I'm just gonna import React.
101
00:04:08.120 --> 00:04:09.610
That's all that's needed.
102
00:04:09.610 --> 00:04:11.010
And now what I'm gonna do
103
00:04:11.010 --> 00:04:13.460
is I'm going to say const NavBar,
104
00:04:13.460 --> 00:04:16.760
so all the code here stays the same,
105
00:04:16.760 --> 00:04:21.667
and then down below, I'm gonna say export default NavBar.
106
00:04:23.140 --> 00:04:24.930
And so the reason for this is,
107
00:04:24.930 --> 00:04:27.240
lemme me comment this out just for a second,
108
00:04:27.240 --> 00:04:29.230
just so you can see the difference,
109
00:04:29.230 --> 00:04:31.887
notice that nothing is being exported here
110
00:04:31.887 --> 00:04:35.300
and this NavBar component isn't even being used.
111
00:04:35.300 --> 00:04:38.500
So if I come to our app component here
112
00:04:38.500 --> 00:04:40.090
and try to import this,
113
00:04:40.090 --> 00:04:41.970
so I'm gonna come up to app,
114
00:04:41.970 --> 00:04:46.190
I'm gonna say import NavBar from,
115
00:04:46.190 --> 00:04:50.620
and then here, I can't just say NavBar,
116
00:04:50.620 --> 00:04:53.720
what I have to do is I actually have to point
117
00:04:53.720 --> 00:04:55.330
where the NavBar is.
118
00:04:55.330 --> 00:04:57.230
I have to tell our app component
119
00:04:57.230 --> 00:04:59.070
where it can find this file.
120
00:04:59.070 --> 00:05:00.710
So the way you do that
121
00:05:00.710 --> 00:05:04.050
is I'm gonna say ./,
122
00:05:04.050 --> 00:05:05.730
because the app component
123
00:05:05.730 --> 00:05:08.460
is already in the components directory,
124
00:05:08.460 --> 00:05:11.110
and so anytime you wanna reference a file
125
00:05:11.110 --> 00:05:12.860
that's in the current directory
126
00:05:12.860 --> 00:05:16.380
and beyond that, you can use a single dot
127
00:05:16.380 --> 00:05:17.760
and then a slash.
128
00:05:17.760 --> 00:05:20.890
If I wanted to move back a different file
129
00:05:20.890 --> 00:05:22.240
or back a directory,
130
00:05:22.240 --> 00:05:24.890
I'd use two dots and then a slash,
131
00:05:24.890 --> 00:05:27.540
and now you can see that we have access
132
00:05:27.540 --> 00:05:31.100
to some of the files and directories a step back
133
00:05:31.100 --> 00:05:32.350
in the file system.
134
00:05:32.350 --> 00:05:35.080
Don't worry if this part is a little bit fuzzy.
135
00:05:35.080 --> 00:05:36.740
We're gonna be doing these imports
136
00:05:36.740 --> 00:05:38.160
throughout the entire course.
137
00:05:38.160 --> 00:05:39.453
So by the end of it,
138
00:05:39.453 --> 00:05:42.270
you're gonna have a really good feel
139
00:05:42.270 --> 00:05:43.930
for how to find files
140
00:05:43.930 --> 00:05:45.110
and how to reference them
141
00:05:45.110 --> 00:05:47.720
and how to add these paths like this.
142
00:05:47.720 --> 00:05:52.190
So I'm just gonna say ./shared
143
00:05:52.190 --> 00:05:53.303
and then NavBar.
144
00:05:54.280 --> 00:05:56.700
And then if I hit Save here,
145
00:05:56.700 --> 00:05:59.780
we're still gonna get pretty much the same error.
146
00:05:59.780 --> 00:06:02.320
So if I open up the console here,
147
00:06:02.320 --> 00:06:06.660
you'll see that they have some of the same type of errors.
148
00:06:06.660 --> 00:06:07.970
They're a little bit different.
149
00:06:07.970 --> 00:06:11.780
It says warning: this createElement is invalid,
150
00:06:11.780 --> 00:06:14.230
and it's saying that it's invalid
151
00:06:14.230 --> 00:06:16.080
because really at the end of the day,
152
00:06:16.080 --> 00:06:17.830
some of these errors can be a little confusing.
153
00:06:17.830 --> 00:06:19.230
It's essentially saying
154
00:06:19.230 --> 00:06:21.872
that it knows about NavBar
155
00:06:21.872 --> 00:06:25.320
but it doesn't actually know what to do with it.
156
00:06:25.320 --> 00:06:26.160
That's what it's saying
157
00:06:26.160 --> 00:06:28.900
when the React.createElement,
158
00:06:28.900 --> 00:06:30.950
that type is invalid,
159
00:06:30.950 --> 00:06:32.644
it's because what we imported
160
00:06:32.644 --> 00:06:36.680
isn't actually anything that we can use.
161
00:06:36.680 --> 00:06:39.190
We need to tell React
162
00:06:39.190 --> 00:06:42.230
that we want to export that NavBar,
163
00:06:42.230 --> 00:06:43.820
and then we'll see what happens.
164
00:06:43.820 --> 00:06:46.290
So now, switch to the NavBar component,
165
00:06:46.290 --> 00:06:48.330
and uncomment this,
166
00:06:48.330 --> 00:06:52.140
so it's now exporting default NavBar,
167
00:06:52.140 --> 00:06:54.100
and I'm gonna hit Save,
168
00:06:54.100 --> 00:06:58.020
and now you can see everything is back and working.
169
00:06:58.020 --> 00:07:00.090
So what happened right there
170
00:07:00.090 --> 00:07:02.510
is we had our NavBar,
171
00:07:02.510 --> 00:07:05.770
we already had written out all of this code here.
172
00:07:05.770 --> 00:07:07.820
So we first had to import React
173
00:07:07.820 --> 00:07:11.130
so that this file could know how components work.
174
00:07:11.130 --> 00:07:15.360
And then we had to export that NavBar component.
175
00:07:15.360 --> 00:07:18.640
From our app, we then had to import that
176
00:07:18.640 --> 00:07:23.020
in order to use it inside of our app component.
177
00:07:23.020 --> 00:07:24.590
So hopefully that makes sense.
178
00:07:24.590 --> 00:07:27.680
If it didn't, feel free to watch the video again,
179
00:07:27.680 --> 00:07:30.167
go through it, play with code until does.
180
00:07:30.167 --> 00:07:33.000
The last thing we're gonna do in this guide
181
00:07:33.000 --> 00:07:37.120
is we are going to convert this app component
182
00:07:37.120 --> 00:07:39.897
into a function-based component
183
00:07:39.897 --> 00:07:42.650
'cause this is good practice to do this
184
00:07:42.650 --> 00:07:45.590
because it's gonna help you really understand the way
185
00:07:45.590 --> 00:07:48.040
that these class components are structured,
186
00:07:48.040 --> 00:07:49.830
what boilerplate code they have,
187
00:07:49.830 --> 00:07:53.150
and also, it's going to hopefully help you appreciate
188
00:07:53.150 --> 00:07:56.280
the value and how much easier it is
189
00:07:56.280 --> 00:07:58.870
in using function-based components.
190
00:07:58.870 --> 00:08:02.038
So let's get rid of a few things here.
191
00:08:02.038 --> 00:08:07.038
So I'm gonna say get rid of export default class,
192
00:08:07.810 --> 00:08:12.000
and instead, I'm just gonna say const App
193
00:08:12.000 --> 00:08:17.000
and then that equals something with a function
194
00:08:17.630 --> 00:08:18.750
with no arguments,
195
00:08:18.750 --> 00:08:23.090
a fat arrow function, and then the start of curly brackets.
196
00:08:23.090 --> 00:08:26.030
Then we can get rid of the render function,
197
00:08:26.030 --> 00:08:28.030
or the call to render function,
198
00:08:28.030 --> 00:08:31.020
and its first set of curly brackets.
199
00:08:31.020 --> 00:08:33.570
And then if we come all the way down to the end,
200
00:08:33.570 --> 00:08:36.660
we can get rid of the last curly bracket.
201
00:08:36.660 --> 00:08:40.160
And hit Save, and if you see right here,
202
00:08:40.160 --> 00:08:42.450
oh, it looks like I may have made one mistake.
203
00:08:42.450 --> 00:08:43.920
Oh yes, I forget to export it.
204
00:08:43.920 --> 00:08:47.740
So see, even when you do this for quite a bit,
205
00:08:47.740 --> 00:08:50.470
you're still gonna forget little things like that,
206
00:08:50.470 --> 00:08:52.430
and if you can look at the error
207
00:08:52.430 --> 00:08:55.330
to see what type of error we're gonna have.
208
00:08:55.330 --> 00:08:57.310
So it says that same one.
209
00:08:57.310 --> 00:08:58.590
React.createElement.
210
00:08:58.590 --> 00:08:59.900
The type is invalid.
211
00:08:59.900 --> 00:09:01.730
So whenever you see this,
212
00:09:01.730 --> 00:09:03.630
it might be a good indicator for you
213
00:09:03.630 --> 00:09:05.730
that maybe you forget to export it.
214
00:09:05.730 --> 00:09:10.190
So here you can say export default App, just like that.
215
00:09:10.190 --> 00:09:12.490
Hit Save, and there we go.
216
00:09:12.490 --> 00:09:14.170
Now it is working.
217
00:09:14.170 --> 00:09:15.780
So now you can see
218
00:09:15.780 --> 00:09:18.760
that we were able to clean up that code a little bit.
219
00:09:18.760 --> 00:09:21.480
We don't need this render function anymore.
220
00:09:21.480 --> 00:09:24.690
We're also able to delete this call
221
00:09:24.690 --> 00:09:26.890
to Component up here.
222
00:09:26.890 --> 00:09:29.330
So I can delete that, hit Save,
223
00:09:29.330 --> 00:09:32.420
and now, everything here is still working.
224
00:09:32.420 --> 00:09:35.890
You can hit Refresh and see that nothing has changed
225
00:09:35.890 --> 00:09:37.850
in terms of the functionality.
226
00:09:37.850 --> 00:09:40.000
So that's really good practice for you
227
00:09:40.000 --> 00:09:44.130
to be able to switch between taking a class component
228
00:09:44.130 --> 00:09:46.270
and turning it into a function component.
229
00:09:46.270 --> 00:09:48.800
And you can also do the same thing backwards.
230
00:09:48.800 --> 00:09:51.643
You can take this NavBar component here,
231
00:09:51.643 --> 00:09:54.490
and you could convert that into a class component
232
00:09:54.490 --> 00:09:55.940
just to go back and forth
233
00:09:55.940 --> 00:09:58.700
so you can start to get a good mental model
234
00:09:58.700 --> 00:10:00.880
for how the syntax works
235
00:10:00.880 --> 00:10:02.560
and how they're different,
236
00:10:02.560 --> 00:10:05.100
what boilerplate code you need for one
237
00:10:05.100 --> 00:10:07.800
versus the other, and that sort of thing.
238
00:10:07.800 --> 00:10:11.110
So now that we covered all of those parts
239
00:10:11.110 --> 00:10:13.300
of components in React,
240
00:10:13.300 --> 00:10:15.100
in the next guide, what we're gonna do
241
00:10:15.100 --> 00:10:19.190
is we're gonna walk through how the module system works,
242
00:10:19.190 --> 00:10:20.980
and we're spending quite a bit of time
243
00:10:20.980 --> 00:10:22.570
on some of these fundamentals
244
00:10:22.570 --> 00:10:26.730
and the reason is because I've seen through the years some
245
00:10:26.730 --> 00:10:29.600
of these core pieces of knowledge,
246
00:10:29.600 --> 00:10:31.850
if you don't understand them now,
247
00:10:31.850 --> 00:10:34.236
or at least, if you're not introduced to them now,
248
00:10:34.236 --> 00:10:38.050
the further you get along in your development journey
249
00:10:38.050 --> 00:10:39.170
as you're learning
250
00:10:39.170 --> 00:10:42.200
how to build more complex features in React,
251
00:10:42.200 --> 00:10:43.210
it's gonna make
252
00:10:43.210 --> 00:10:46.990
for a much more confusing learning experience.
253
00:10:46.990 --> 00:10:49.860
If you can understand these core concepts here,
254
00:10:49.860 --> 00:10:53.640
then you're not gonna have to relearn them later one
255
00:10:53.640 --> 00:10:55.460
because you're gonna understand
256
00:10:55.460 --> 00:10:57.840
how to import and export files.
257
00:10:57.840 --> 00:10:59.570
You're gonna understand the difference
258
00:10:59.570 --> 00:11:02.600
between being able to do an import
259
00:11:02.600 --> 00:11:04.750
where you simply call the name of a module
260
00:11:04.750 --> 00:11:07.170
versus when you have to wrap it in curly brackets.
261
00:11:07.170 --> 00:11:09.280
And it's also gonna help you when you work
262
00:11:09.280 --> 00:11:11.600
with other libraries as well.
263
00:11:11.600 --> 00:11:13.330
So hopefully it's all making sense,
264
00:11:13.330 --> 00:11:14.820
or at least it's starting to.
265
00:11:14.820 --> 00:11:15.950
So in the next guide,
266
00:11:15.950 --> 00:11:19.570
we're gonna dive deeper into the import,
267
00:11:19.570 --> 00:11:22.810
export and then export default functionalities
268
00:11:22.810 --> 00:11:24.253
inside of JavaScript.