- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.600 --> 00:00:03.240
In this guide, we're gonna take a deep dive
2
00:00:03.240 --> 00:00:05.487
into seeing how the import
3
00:00:05.487 --> 00:00:09.180
and the export process works in JavaScript.
4
00:00:09.180 --> 00:00:13.220
Now I wanna add one caveat to what we're gonna be doing
5
00:00:13.220 --> 00:00:14.670
here in this guide.
6
00:00:14.670 --> 00:00:19.670
What we are learning here is not specific to React.
7
00:00:20.090 --> 00:00:24.750
If you work with tools like angular JS or view,
8
00:00:24.750 --> 00:00:27.160
those are other JavaScript frameworks.
9
00:00:27.160 --> 00:00:32.160
You're gonna see the same type of import export behavior,
10
00:00:32.360 --> 00:00:37.060
because it's related to how JavaScript modules work.
11
00:00:37.060 --> 00:00:38.820
So, what you're gonna learn here
12
00:00:38.820 --> 00:00:41.660
can be applied to all of those other frameworks
13
00:00:41.660 --> 00:00:45.540
and tools and really any other JavaScript applications
14
00:00:45.540 --> 00:00:46.900
that you're gonna build.
15
00:00:46.900 --> 00:00:49.520
So, we've seen a few different options
16
00:00:49.520 --> 00:00:51.790
for importing modules.
17
00:00:51.790 --> 00:00:55.100
We've seen where you can say import React
18
00:00:56.060 --> 00:00:58.020
and we don't wrap this in curly brackets.
19
00:00:58.020 --> 00:00:59.440
We just call it React.
20
00:00:59.440 --> 00:01:02.700
And then we've seen where you say import React
21
00:01:02.700 --> 00:01:07.700
and then a comma and then curly brackets component.
22
00:01:07.930 --> 00:01:10.480
What's happening here is React
23
00:01:10.480 --> 00:01:14.130
has a few different export processes.
24
00:01:14.130 --> 00:01:15.860
React has their library
25
00:01:15.860 --> 00:01:18.920
where they export the entire component,
26
00:01:18.920 --> 00:01:22.860
so the entire module I should say of React,
27
00:01:22.860 --> 00:01:25.500
the whole library can be exported
28
00:01:25.500 --> 00:01:29.900
and accessed through this react module here.
29
00:01:29.900 --> 00:01:34.700
They also have other modules that they're exporting
30
00:01:34.700 --> 00:01:37.770
like the component module right here.
31
00:01:37.770 --> 00:01:41.910
So, that is the high-level explanation.
32
00:01:41.910 --> 00:01:44.470
It's still, if you've never seen that before,
33
00:01:44.470 --> 00:01:47.890
that can still be a little bit tricky to understand.
34
00:01:47.890 --> 00:01:51.560
So what I think is gonna help you understand it the most
35
00:01:51.560 --> 00:01:54.020
is for us to do this ourselves.
36
00:01:54.020 --> 00:01:56.030
So I'm gonna make it possible
37
00:01:56.030 --> 00:01:59.420
for us to instead of just calling NavBar,
38
00:01:59.420 --> 00:02:01.930
I'm gonna show you what it would look like
39
00:02:01.930 --> 00:02:04.530
for us to be able to do something like this.
40
00:02:04.530 --> 00:02:09.320
Say, NavBar and maybe even have a few other ones.
41
00:02:09.320 --> 00:02:13.570
So we could say logout button, some things like that.
42
00:02:13.570 --> 00:02:15.260
We're gonna create some other components.
43
00:02:15.260 --> 00:02:16.480
We're not going to use these.
44
00:02:16.480 --> 00:02:18.560
We're eventually gonna just switch it back
45
00:02:18.560 --> 00:02:21.460
exactly to how we have it right now.
46
00:02:21.460 --> 00:02:24.200
The whole point of this guide
47
00:02:24.200 --> 00:02:26.730
is to show you the differences so that
48
00:02:26.730 --> 00:02:29.430
when you work with other libraries
49
00:02:29.430 --> 00:02:31.410
it's gonna start to make some more sense.
50
00:02:31.410 --> 00:02:33.630
So let's take a look at it here.
51
00:02:33.630 --> 00:02:36.000
I'm gonna go to our NavBar component
52
00:02:36.000 --> 00:02:40.810
and the first step is to get rid of this export default.
53
00:02:40.810 --> 00:02:42.380
And instead what we're gonna do
54
00:02:42.380 --> 00:02:44.390
is we're gonna say you know what,
55
00:02:44.390 --> 00:02:48.950
I just want to export this variable,
56
00:02:48.950 --> 00:02:52.230
this function right here of NavBar
57
00:02:52.230 --> 00:02:54.050
and that's gonna be the first element.
58
00:02:54.050 --> 00:02:57.370
Notice we do not have the default keyword anymore.
59
00:02:57.370 --> 00:03:00.100
Now what was the name of the other element,
60
00:03:00.100 --> 00:03:02.220
this logout button here?
61
00:03:02.220 --> 00:03:05.570
We're gonna create another component in the same file.
62
00:03:05.570 --> 00:03:08.430
That is the key here is what,
63
00:03:08.430 --> 00:03:11.480
and this is also the scenario when you would use
64
00:03:11.480 --> 00:03:13.600
this type of methodology,
65
00:03:13.600 --> 00:03:17.450
is say that you're creating a set of components.
66
00:03:17.450 --> 00:03:20.730
You're not just creating one component in the file,
67
00:03:20.730 --> 00:03:22.810
you might create one file
68
00:03:22.810 --> 00:03:26.520
that has a few small helper components in there
69
00:03:26.520 --> 00:03:28.060
and you didn't wanna put them
70
00:03:28.060 --> 00:03:30.190
into their own dedicated files.
71
00:03:30.190 --> 00:03:31.700
You could do something like this
72
00:03:31.700 --> 00:03:36.470
where you say export const and then logout button
73
00:03:36.470 --> 00:03:39.690
and make this another function here.
74
00:03:39.690 --> 00:03:42.360
So it's just gonna return a div
75
00:03:42.360 --> 00:03:45.550
that's called logout just like that.
76
00:03:45.550 --> 00:03:49.910
So notice we do not have that default keyword anywhere here.
77
00:03:49.910 --> 00:03:54.290
Now if I hit save, and come back to the app component here,
78
00:03:54.290 --> 00:03:56.940
we have some errors but don't worry about those yet.
79
00:03:56.940 --> 00:03:59.010
We'll take care of those in a moment.
80
00:03:59.010 --> 00:04:01.190
I'm gonna say logout button
81
00:04:01.190 --> 00:04:06.190
and then down here let's just call it right in between
82
00:04:06.610 --> 00:04:08.950
our H1 and our H2 tags.
83
00:04:08.950 --> 00:04:12.750
So I'm gonna say logout button, hit save,
84
00:04:12.750 --> 00:04:16.250
and then you can see that this is back and it's working.
85
00:04:16.250 --> 00:04:19.440
And also notice, it says logout right there.
86
00:04:19.440 --> 00:04:22.990
So this logout button is working.
87
00:04:22.990 --> 00:04:25.730
So how is this working because if I were
88
00:04:25.730 --> 00:04:28.680
to remove these curly brackets, everything would break
89
00:04:28.680 --> 00:04:31.590
and we would have a bunch of errors we'd have to fix.
90
00:04:31.590 --> 00:04:34.030
So, what's the difference between
91
00:04:34.030 --> 00:04:38.580
when we import with curly brackets versus when we don't.
92
00:04:38.580 --> 00:04:43.580
And the key comes down to that default keyword.
93
00:04:44.100 --> 00:04:48.280
When we have a file and we say export default,
94
00:04:48.280 --> 00:04:51.450
what that means is that that module
95
00:04:51.450 --> 00:04:55.680
or whatever we're exporting with the default keyword
96
00:04:55.680 --> 00:04:59.960
can be called without the use of curly brackets.
97
00:04:59.960 --> 00:05:03.300
So, let's actually see that in action here.
98
00:05:03.300 --> 00:05:08.300
So if I come here and remove the curly bracket from NavBar,
99
00:05:08.460 --> 00:05:11.300
and I simply add it to the logout button,
100
00:05:11.300 --> 00:05:13.470
the only way this will work
101
00:05:13.470 --> 00:05:16.730
is if I come back to our NavBar component here
102
00:05:16.730 --> 00:05:20.350
and I say export default NavBar.
103
00:05:20.350 --> 00:05:24.090
So I'm gonna get rid of saying export const
104
00:05:24.090 --> 00:05:28.997
and at the very bottom I'm gonna say export default NavBar.
105
00:05:30.860 --> 00:05:34.030
I'll hit save here and then I'll come back here
106
00:05:34.030 --> 00:05:38.140
and hit save and then as you can see here on the screen,
107
00:05:38.140 --> 00:05:39.310
it's back to working.
108
00:05:39.310 --> 00:05:43.880
So we've essentially replicated exactly what you saw
109
00:05:43.880 --> 00:05:45.700
in that first guide where you saw
110
00:05:45.700 --> 00:05:47.610
that we were importing React
111
00:05:47.610 --> 00:05:50.150
and we were importing the component,
112
00:05:50.150 --> 00:05:54.580
that is exactly what React is doing behind the scenes.
113
00:05:54.580 --> 00:05:56.700
Remember, all of those node modules
114
00:05:56.700 --> 00:05:59.500
are just JavaScript files and in this case,
115
00:05:59.500 --> 00:06:02.550
React was exporting multiple items.
116
00:06:02.550 --> 00:06:06.560
They were exporting React as the default module
117
00:06:06.560 --> 00:06:09.970
and then they have a list of other sub-modules
118
00:06:09.970 --> 00:06:13.050
that are included in the library
119
00:06:13.050 --> 00:06:15.800
but you have to wrap those up in curly brackets
120
00:06:15.800 --> 00:06:18.080
if you want to work with them.
121
00:06:18.080 --> 00:06:20.520
Now I'm gonna show you another little trick with that
122
00:06:20.520 --> 00:06:23.470
and this part is one that can be kinda confusing
123
00:06:23.470 --> 00:06:25.250
if you've never seen it before.
124
00:06:25.250 --> 00:06:29.430
Now notice we've always used the name NavBar here.
125
00:06:29.430 --> 00:06:33.720
But technically when you're exporting a module
126
00:06:33.720 --> 00:06:36.260
and you're using that default keyword,
127
00:06:36.260 --> 00:06:39.540
then you can call this anything that you want.
128
00:06:39.540 --> 00:06:42.070
So let's say that we don't wanna call this NavBar
129
00:06:42.070 --> 00:06:44.190
when we're importing it for some reason.
130
00:06:44.190 --> 00:06:47.800
Instead we wanna say okay, I want to import
131
00:06:47.800 --> 00:06:52.800
the navigation wrapper, whatever you wanna call it.
132
00:06:53.550 --> 00:06:58.510
Now if I copy this and then if I come down here
133
00:06:58.510 --> 00:07:02.560
to the bottom I can now call this component
134
00:07:02.560 --> 00:07:04.010
anything that I want.
135
00:07:04.010 --> 00:07:05.110
Ope, not logout button.
136
00:07:05.110 --> 00:07:06.320
I copied the wrong one.
137
00:07:06.320 --> 00:07:07.170
There you go.
138
00:07:07.170 --> 00:07:08.623
Copy in navigation.
139
00:07:09.750 --> 00:07:12.370
Navigation wrapper just like that
140
00:07:12.370 --> 00:07:15.810
and now if you come back to the screen and hit refresh,
141
00:07:15.810 --> 00:07:18.100
you'll see everything is still working.
142
00:07:18.100 --> 00:07:20.360
So with the way this import works,
143
00:07:20.360 --> 00:07:23.510
whenever you say export default,
144
00:07:23.510 --> 00:07:28.440
what you're saying is that you are shipping this module.
145
00:07:28.440 --> 00:07:31.240
You can import it and then you can work with it,
146
00:07:31.240 --> 00:07:34.330
you can even name it however you want
147
00:07:34.330 --> 00:07:37.080
when you're performing that import.
148
00:07:37.080 --> 00:07:40.250
So that is another little trick
149
00:07:40.250 --> 00:07:43.220
that you're gonna see in quite a few applications
150
00:07:43.220 --> 00:07:45.740
and you may or may not need to use that
151
00:07:45.740 --> 00:07:48.070
in an application that you work with.
152
00:07:48.070 --> 00:07:51.060
An example of when I've had to do that in the past
153
00:07:51.060 --> 00:07:54.690
is when I have had a set of components
154
00:07:54.690 --> 00:07:56.440
that had the exact same name.
155
00:07:56.440 --> 00:08:00.100
So maybe there was a library that had a button component
156
00:08:00.100 --> 00:08:03.040
and then I wanted to use my own button component
157
00:08:03.040 --> 00:08:04.600
on the same page.
158
00:08:04.600 --> 00:08:07.720
I was able to import it with a different name,
159
00:08:07.720 --> 00:08:10.420
call it differently and then all of those components
160
00:08:10.420 --> 00:08:13.280
worked perfectly on the same page.
161
00:08:13.280 --> 00:08:16.300
Okay, so we're almost done with this deep dive.
162
00:08:16.300 --> 00:08:18.490
We just have one more thing I wanna show you
163
00:08:18.490 --> 00:08:19.930
and that's a shortcut.
164
00:08:19.930 --> 00:08:24.310
So whenever I'm creating my own functional components
165
00:08:24.310 --> 00:08:29.250
and I'm exporting them, I rarely actually even include
166
00:08:29.250 --> 00:08:32.190
the name that I wanna have for them
167
00:08:32.190 --> 00:08:34.230
because I can use this shortcut.
168
00:08:34.230 --> 00:08:37.370
I can get rid of where it says export default.
169
00:08:37.370 --> 00:08:41.060
I can come up to the module that I wanna work with here.
170
00:08:41.060 --> 00:08:43.550
I'm gonna get rid of all of this code here.
171
00:08:43.550 --> 00:08:46.490
So where it says const NavBar equals,
172
00:08:46.490 --> 00:08:48.490
I'm gonna get rid of all of that
173
00:08:48.490 --> 00:08:53.490
and I can just say export default just like this
174
00:08:53.680 --> 00:08:57.100
and so it's gonna be export default, a space,
175
00:08:57.100 --> 00:08:59.140
and then it's the function.
176
00:08:59.140 --> 00:09:02.100
So then, it's the fat arrow function.
177
00:09:02.100 --> 00:09:04.290
Hit save here, come back,
178
00:09:04.290 --> 00:09:06.290
and you'll see everything still working.
179
00:09:06.290 --> 00:09:09.680
So that's one of the big takeaways I want you to have
180
00:09:09.680 --> 00:09:14.170
for this guide is that when you're creating these modules
181
00:09:14.170 --> 00:09:17.760
and these components, that you can name them
182
00:09:17.760 --> 00:09:20.228
whatever you want and there's nothing tied
183
00:09:20.228 --> 00:09:24.580
with the component name and the file name.
184
00:09:24.580 --> 00:09:28.360
Here we're simply creating some JavaScript code,
185
00:09:28.360 --> 00:09:31.160
we're exporting it, and then other parts
186
00:09:31.160 --> 00:09:34.380
of the application are gonna be able to use that.
187
00:09:34.380 --> 00:09:37.870
So for the most part, for the rest of this application,
188
00:09:37.870 --> 00:09:40.630
this is the syntax that I'm gonna be using
189
00:09:40.630 --> 00:09:43.960
when we're creating components because this
190
00:09:43.960 --> 00:09:47.780
is what I follow when I'm building out my own applications.
191
00:09:47.780 --> 00:09:49.440
So just as a matter of cleanup,
192
00:09:49.440 --> 00:09:52.000
I'm gonna remove this logout button,
193
00:09:52.000 --> 00:09:56.750
I'll hit save, let's remove this logout import here,
194
00:09:56.750 --> 00:10:00.020
and then remove that from the site itself,
195
00:10:00.020 --> 00:10:01.910
and then I am gonna switch back
196
00:10:01.910 --> 00:10:05.610
to calling this the NavBar,
197
00:10:05.610 --> 00:10:07.200
because that's what I wanna call it
198
00:10:07.200 --> 00:10:09.080
throughout the rest of this application.
199
00:10:09.080 --> 00:10:13.040
So I'm going to populate that everywhere here,
200
00:10:13.040 --> 00:10:18.040
hit save, and then everything is back up and running.
201
00:10:18.070 --> 00:10:19.590
So I hope this makes sense.
202
00:10:19.590 --> 00:10:23.280
I haven't really seen in a lot of the JavaScript
203
00:10:23.280 --> 00:10:24.990
and React tutorials out there,
204
00:10:24.990 --> 00:10:26.640
I haven't really seen a lot of people
205
00:10:26.640 --> 00:10:30.610
actually showing the differences on those import statements
206
00:10:30.610 --> 00:10:32.800
on why you use curly brackets sometimes
207
00:10:32.800 --> 00:10:35.420
and why you don't need to at other times
208
00:10:35.420 --> 00:10:39.060
and I've seen a lot of confusion with new students
209
00:10:39.060 --> 00:10:42.300
on not understanding really how that worked
210
00:10:42.300 --> 00:10:46.030
or why you'd wanna use one way in one application
211
00:10:46.030 --> 00:10:48.670
or on one component and you don't need it on another.
212
00:10:48.670 --> 00:10:53.170
So I wanted to have one video where we just dove into that
213
00:10:53.170 --> 00:10:55.130
and so hopefully that's starting to make sense
214
00:10:55.130 --> 00:10:57.590
and now as we go through the rest of the course,
215
00:10:57.590 --> 00:11:01.553
you'll understand how that import and export process works.