Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,100 --> 00:00:03,090
Now I wanna start
2
00:00:03,090 --> 00:00:05,250
refreshing your JavaScript knowledge
3
00:00:05,250 --> 00:00:08,640
by first exploring this import export syntax
4
00:00:08,640 --> 00:00:10,260
I mentioned before
5
00:00:10,260 --> 00:00:13,350
because in this course we're going to import
6
00:00:13,350 --> 00:00:16,470
and export a lot of things.
7
00:00:16,470 --> 00:00:17,970
Because in React apps,
8
00:00:17,970 --> 00:00:21,600
like in most more advanced JavaScript projects,
9
00:00:21,600 --> 00:00:25,200
it is considered a best practice to split your code
10
00:00:25,200 --> 00:00:27,000
across multiple files
11
00:00:27,000 --> 00:00:29,910
to keep it maintainable and manageable.
12
00:00:29,910 --> 00:00:31,230
And that's exactly what you do
13
00:00:31,230 --> 00:00:34,200
with help of the import and export keywords.
14
00:00:34,200 --> 00:00:37,380
Now for that, let's say that in the util JS file
15
00:00:37,380 --> 00:00:40,800
we have a certain value that should be usable
16
00:00:40,800 --> 00:00:42,270
in other files as well.
17
00:00:42,270 --> 00:00:44,310
For example, in the app JS file.
18
00:00:44,310 --> 00:00:47,550
Here we could have an API key variable.
19
00:00:47,550 --> 00:00:49,740
and variables in JavaScript
20
00:00:49,740 --> 00:00:53,130
are created with the special let keyword.
21
00:00:53,130 --> 00:00:56,100
But I'll get back to variables and constants
22
00:00:56,100 --> 00:00:57,900
and some key things you should know
23
00:00:57,900 --> 00:01:01,440
about them a little bit later in this section.
24
00:01:01,440 --> 00:01:04,140
And in there we could store a string created
25
00:01:04,140 --> 00:01:07,980
with single or double quotes, doesn't matter.
26
00:01:07,980 --> 00:01:11,670
And that string could then contain some cryptic API key
27
00:01:11,670 --> 00:01:13,500
that maybe is required
28
00:01:13,500 --> 00:01:17,670
in order to send HTDP requests to a backend.
29
00:01:17,670 --> 00:01:19,920
This is just a dummy example here
30
00:01:19,920 --> 00:01:22,470
but this overall section will just show you
31
00:01:22,470 --> 00:01:25,230
some dummy examples because in the end it is just
32
00:01:25,230 --> 00:01:27,873
about refreshing your JavaScript knowledge.
33
00:01:28,710 --> 00:01:31,380
So if that API key, that value here,
34
00:01:31,380 --> 00:01:32,670
this string here,
35
00:01:32,670 --> 00:01:35,280
should also be available in other files,
36
00:01:35,280 --> 00:01:37,080
we need to export it
37
00:01:37,080 --> 00:01:40,023
by adding the export keyword in front of it.
38
00:01:41,070 --> 00:01:45,180
This makes this thing, this variable here,
39
00:01:45,180 --> 00:01:46,080
in this case,
40
00:01:46,080 --> 00:01:49,350
available outside of this file as well.
41
00:01:49,350 --> 00:01:52,890
We can then import it in the file where it should be used.
42
00:01:52,890 --> 00:01:55,350
So in this app JS file, for example
43
00:01:55,350 --> 00:01:57,183
by using the import keyword.
44
00:01:58,050 --> 00:02:01,530
And then here we need opening and closing curly braces.
45
00:02:01,530 --> 00:02:05,610
And between those braces, we then refer to the name
46
00:02:05,610 --> 00:02:07,200
of the thing that's exported.
47
00:02:07,200 --> 00:02:10,259
So in this case, the name of the variable.
48
00:02:10,259 --> 00:02:12,360
If we would be exporting a function,
49
00:02:12,360 --> 00:02:14,490
it would be the name of the function instead.
50
00:02:14,490 --> 00:02:16,680
But here it's the name of the variable.
51
00:02:16,680 --> 00:02:19,320
So API key written like this.
52
00:02:19,320 --> 00:02:21,330
And of course the casing matters
53
00:02:21,330 --> 00:02:25,143
because JavaScript is a case sensitive language.
54
00:02:26,340 --> 00:02:27,173
And then thereafter,
55
00:02:27,173 --> 00:02:30,240
we need the from keyword to let JavaScript know
56
00:02:30,240 --> 00:02:32,370
from which file we're importing
57
00:02:32,370 --> 00:02:35,070
this thing named apiKey.
58
00:02:35,070 --> 00:02:39,180
This path to the file then goes between quotes,
59
00:02:39,180 --> 00:02:40,620
single or double quotes.
60
00:02:40,620 --> 00:02:42,570
Again, doesn't matter.
61
00:02:42,570 --> 00:02:45,990
And here we then typically have a relative path starting
62
00:02:45,990 --> 00:02:48,810
with dot slash if it's in the same folder,
63
00:02:48,810 --> 00:02:50,970
starting with dot dot slash
64
00:02:50,970 --> 00:02:53,820
if you want to go up one folder,
65
00:02:53,820 --> 00:02:55,590
but here it is in the same folder.
66
00:02:55,590 --> 00:02:57,420
So I will use dot slash,
67
00:02:57,420 --> 00:03:01,920
and then the name of the file with the extension added
68
00:03:01,920 --> 00:03:05,580
at least if you're using just JavaScript.
69
00:03:05,580 --> 00:03:08,280
Now when working in React projects,
70
00:03:08,280 --> 00:03:11,640
you will actually see that the extension,
71
00:03:11,640 --> 00:03:13,110
the dot JS typically,
72
00:03:13,110 --> 00:03:14,553
is omitted there.
73
00:03:15,390 --> 00:03:17,010
That's the case again,
74
00:03:17,010 --> 00:03:18,810
because of that build process
75
00:03:18,810 --> 00:03:20,400
that's running behind the scenes,
76
00:03:20,400 --> 00:03:23,550
which will add the extension behind the scenes.
77
00:03:23,550 --> 00:03:26,040
If you are writing just JavaScript code
78
00:03:26,040 --> 00:03:27,720
without such a build process,
79
00:03:27,720 --> 00:03:29,970
you do need to add it on your own.
80
00:03:29,970 --> 00:03:32,460
But throughout this course where we do
81
00:03:32,460 --> 00:03:34,440
use React projects that come
82
00:03:34,440 --> 00:03:37,770
with such a build process that adds the extension for us,
83
00:03:37,770 --> 00:03:40,710
we will actually not add it on our own.
84
00:03:40,710 --> 00:03:42,870
But here we need to do it.
85
00:03:42,870 --> 00:03:45,600
And with that, this API key variable
86
00:03:45,600 --> 00:03:48,210
and the value it contains will be available
87
00:03:48,210 --> 00:03:49,710
in this app JS file,
88
00:03:49,710 --> 00:03:52,290
even though it's defined in another file.
89
00:03:52,290 --> 00:03:54,060
And here we could then, for example
90
00:03:54,060 --> 00:03:58,023
console log apiKey to output it in the console.
91
00:03:59,490 --> 00:04:01,920
Now, very important for these import
92
00:04:01,920 --> 00:04:03,990
and export keywords to work
93
00:04:03,990 --> 00:04:08,280
you must be using this type module import here.
94
00:04:08,280 --> 00:04:09,840
That's really crucial.
95
00:04:09,840 --> 00:04:12,810
Though, you will see that for the React projects,
96
00:04:12,810 --> 00:04:16,341
if you explore the automatically injected script text there
97
00:04:16,341 --> 00:04:20,970
you don't find this type module attribute on them.
98
00:04:20,970 --> 00:04:22,620
The reason for that simply is
99
00:04:22,620 --> 00:04:24,750
that this build process
100
00:04:24,750 --> 00:04:28,590
will actually take all your imports and exports
101
00:04:28,590 --> 00:04:32,550
and basically merge all these separate files that you have
102
00:04:32,550 --> 00:04:35,490
during development into one big file
103
00:04:35,490 --> 00:04:38,400
or a bunch of big files, which are then imported
104
00:04:38,400 --> 00:04:43,230
with the old school syntax in the right order.
105
00:04:43,230 --> 00:04:47,430
This is done to also make this code execute in browsers
106
00:04:47,430 --> 00:04:51,540
that don't natively support this import export syntax,
107
00:04:51,540 --> 00:04:55,500
and also so that the browser doesn't have to download dozens
108
00:04:55,500 --> 00:04:57,450
of small JavaScript files,
109
00:04:57,450 --> 00:05:00,090
but instead just a couple of bigger files,
110
00:05:00,090 --> 00:05:02,910
which typically is more efficient.
111
00:05:02,910 --> 00:05:05,430
And I'm just letting you know about this here
112
00:05:05,430 --> 00:05:06,870
so that you don't wonder
113
00:05:06,870 --> 00:05:08,820
why this type module is missing
114
00:05:08,820 --> 00:05:12,990
on your React projects script tax.
115
00:05:12,990 --> 00:05:15,180
But if you have a vanilla JavaScript app
116
00:05:15,180 --> 00:05:16,890
without such a build process,
117
00:05:16,890 --> 00:05:18,780
you do need to add this type
118
00:05:18,780 --> 00:05:20,313
module attribute here.
119
00:05:21,810 --> 00:05:24,240
And with that here in this project,
120
00:05:24,240 --> 00:05:27,180
if you save that and reload the app,
121
00:05:27,180 --> 00:05:29,220
and you then open this console,
122
00:05:29,220 --> 00:05:33,270
you should see your apiKey being output there.
123
00:05:33,270 --> 00:05:36,930
And that's of course coming from the app JS file
124
00:05:36,930 --> 00:05:41,013
where we are importing it from the util JS file.
125
00:05:42,210 --> 00:05:43,950
Now, that's not the only variation
126
00:05:43,950 --> 00:05:46,920
of this export import syntax, though.
127
00:05:46,920 --> 00:05:50,460
This is one way of exporting and importing things.
128
00:05:50,460 --> 00:05:53,580
But in this course, you'll also see another way.
129
00:05:53,580 --> 00:05:56,940
Besides exporting with help of the export keyword
130
00:05:56,940 --> 00:05:59,340
in front of a variable or function,
131
00:05:59,340 --> 00:06:03,750
you can also create a so-called default export
132
00:06:03,750 --> 00:06:06,150
by adding the default keyword.
133
00:06:06,150 --> 00:06:09,990
Now in that case, you must not create a variable thereafter
134
00:06:09,990 --> 00:06:13,440
like this, and you also don't assign a name.
135
00:06:13,440 --> 00:06:16,953
Instead you just export the value like this.
136
00:06:18,120 --> 00:06:21,840
So now I'm just exporting a value without a name.
137
00:06:21,840 --> 00:06:24,180
And when adding the default keyword here
138
00:06:24,180 --> 00:06:27,360
I'm saying that this here, this value here,
139
00:06:27,360 --> 00:06:31,410
should be the default thing that's exported by this file.
140
00:06:31,410 --> 00:06:33,240
And what's very important is
141
00:06:33,240 --> 00:06:37,290
that you must only have one default export per file.
142
00:06:37,290 --> 00:06:40,473
If I try to add a second one, I'm getting an error.
143
00:06:42,060 --> 00:06:44,820
On the other hand, with the syntax we had before,
144
00:06:44,820 --> 00:06:49,590
without default, you can export as many things as you want.
145
00:06:49,590 --> 00:06:52,110
Exporting another variable like this wouldn't
146
00:06:52,110 --> 00:06:54,300
have been any problem.
147
00:06:54,300 --> 00:06:56,160
With the default keyword,
148
00:06:56,160 --> 00:06:58,170
you directly export a value
149
00:06:58,170 --> 00:07:01,413
and you must only have one default export profile.
150
00:07:02,340 --> 00:07:05,040
So I'll also add the old code here simply
151
00:07:05,040 --> 00:07:10,040
so that you see the difference like this.
152
00:07:10,560 --> 00:07:14,040
And then app JS, the import syntax now also changes
153
00:07:14,040 --> 00:07:16,290
if you have a default export.
154
00:07:16,290 --> 00:07:18,240
Instead of importing like this,
155
00:07:18,240 --> 00:07:22,050
you now import without curly braces.
156
00:07:22,050 --> 00:07:24,330
Instead, you just assign any name
157
00:07:24,330 --> 00:07:25,740
of your choice.
158
00:07:25,740 --> 00:07:27,570
Since the thing that's exported
159
00:07:27,570 --> 00:07:29,820
as a default doesn't have a name here,
160
00:07:29,820 --> 00:07:32,190
you can use any name you want in the file
161
00:07:32,190 --> 00:07:33,780
where you want to import it,
162
00:07:33,780 --> 00:07:36,390
but you do need to assign a name.
163
00:07:36,390 --> 00:07:38,370
And then you still define the path
164
00:07:38,370 --> 00:07:41,253
to the file from which you want to import like this.
165
00:07:42,900 --> 00:07:47,900
With that, if you save this, and again you reload this file,
166
00:07:49,050 --> 00:07:52,800
you will see that this again gets locked to the console.
167
00:07:52,800 --> 00:07:56,340
Now with help of such a default export
168
00:07:56,340 --> 00:07:59,430
and the respective import syntax.
169
00:07:59,430 --> 00:08:00,930
And this is also a common way
170
00:08:00,930 --> 00:08:03,690
of exporting something and importing something,
171
00:08:03,690 --> 00:08:07,740
which is especially useful if you only have one thing,
172
00:08:07,740 --> 00:08:11,250
one function, or one value in the file
173
00:08:11,250 --> 00:08:13,890
where you want to export it.
174
00:08:13,890 --> 00:08:16,200
This is something you will see later in the course
175
00:08:16,200 --> 00:08:19,500
once we explore the concept of React components.
176
00:08:19,500 --> 00:08:21,630
Because there it's quite common that we only
177
00:08:21,630 --> 00:08:25,440
have one component, one JavaScript function
178
00:08:25,440 --> 00:08:27,330
as you will learn per file.
179
00:08:27,330 --> 00:08:30,690
And therefore it's quite common to export this one component
180
00:08:30,690 --> 00:08:34,409
function as a default since there are no other things
181
00:08:34,409 --> 00:08:36,840
that would be exported in that file,
182
00:08:36,840 --> 00:08:38,159
but it is totally up to you
183
00:08:38,159 --> 00:08:39,630
which approach you prefer.
184
00:08:39,630 --> 00:08:41,549
It's just important to keep in mind
185
00:08:41,549 --> 00:08:43,080
that the import syntax
186
00:08:43,080 --> 00:08:47,100
also changes if you use the default export syntax here.
187
00:08:47,100 --> 00:08:48,660
Now, one last thing you should know
188
00:08:48,660 --> 00:08:51,270
about the export and import syntax
189
00:08:51,270 --> 00:08:54,060
is that if you have named exports
190
00:08:54,060 --> 00:08:57,090
as this syntax here is called, like this,
191
00:08:57,090 --> 00:09:00,300
and let's say you have multiple named exports,
192
00:09:00,300 --> 00:09:04,950
for example you also have another
193
00:09:04,950 --> 00:09:07,680
special import syntax you can use.
194
00:09:07,680 --> 00:09:11,070
Of course you can import those named things
195
00:09:11,070 --> 00:09:14,340
like this, import apiKey, for example.
196
00:09:14,340 --> 00:09:16,620
I'm just going to comment out this import
197
00:09:16,620 --> 00:09:18,423
so that we don't have a name clash.
198
00:09:19,290 --> 00:09:21,720
And you could then import all the named things
199
00:09:21,720 --> 00:09:24,000
by separating them with a comma here.
200
00:09:24,000 --> 00:09:26,370
That's how you would import multiple things
201
00:09:26,370 --> 00:09:27,690
from the same file
202
00:09:27,690 --> 00:09:30,960
if those things are exported as named exports.
203
00:09:30,960 --> 00:09:33,360
So without the default keyword.
204
00:09:33,360 --> 00:09:34,380
And as you see here
205
00:09:34,380 --> 00:09:38,340
you can also mix the default keyword with named exports.
206
00:09:38,340 --> 00:09:41,880
You just must not have more than one default export.
207
00:09:41,880 --> 00:09:43,410
But having a default export
208
00:09:43,410 --> 00:09:47,070
in addition to some named exports is absolutely fine.
209
00:09:47,070 --> 00:09:49,890
But what you could now do here is that instead
210
00:09:49,890 --> 00:09:52,710
of listing all the things you want to import like this
211
00:09:52,710 --> 00:09:55,980
as a comma separated list between the curly braces,
212
00:09:55,980 --> 00:09:57,600
you can also import them
213
00:09:57,600 --> 00:10:01,710
by grouping them together into a JavaScript object.
214
00:10:01,710 --> 00:10:04,710
And that would be done by then using a star,
215
00:10:04,710 --> 00:10:06,510
then the ask keyword,
216
00:10:06,510 --> 00:10:08,040
and then any name of your choice
217
00:10:08,040 --> 00:10:10,290
for example, utils or util.
218
00:10:10,290 --> 00:10:11,373
Whatever you want.
219
00:10:12,390 --> 00:10:15,000
And then again, the path to the file
220
00:10:15,000 --> 00:10:17,973
from which you want to import, like this.
221
00:10:19,410 --> 00:10:22,800
With that, all the things provided by util JS
222
00:10:22,800 --> 00:10:25,020
would be grouped into this object,
223
00:10:25,020 --> 00:10:26,520
and therefore, you could use it
224
00:10:26,520 --> 00:10:29,340
with the default JavaScript object notation
225
00:10:29,340 --> 00:10:30,480
using its name
226
00:10:30,480 --> 00:10:32,130
and then the dot notation
227
00:10:32,130 --> 00:10:34,800
to access the thing that was named abc
228
00:10:34,800 --> 00:10:38,820
or the thing that was named apiKey or the default export,
229
00:10:38,820 --> 00:10:41,643
which is available under a key named default.
230
00:10:43,230 --> 00:10:46,710
So that's how you could then output the apiKey.
231
00:10:46,710 --> 00:10:48,960
And therefore here, if I reload,
232
00:10:48,960 --> 00:10:52,530
I again see that apiKey here in the console.
233
00:10:52,530 --> 00:10:56,160
Now by grouping multiple exported things to gather
234
00:10:56,160 --> 00:10:57,513
into one object.
235
00:10:58,920 --> 00:11:00,630
As a last side note, this
236
00:11:00,630 --> 00:11:05,580
as keyword can also be used to assign aliases.
237
00:11:05,580 --> 00:11:06,600
So for example, here
238
00:11:06,600 --> 00:11:10,740
if I go back to this named export import thing,
239
00:11:10,740 --> 00:11:14,550
and I'm not happy with the name abc here,
240
00:11:14,550 --> 00:11:17,490
I could assign an alias by using the as keyword word
241
00:11:17,490 --> 00:11:21,247
after the thing that I want to rename in this file here
242
00:11:21,247 --> 00:11:26,190
and I could rename it to content or whatever I want.
243
00:11:26,190 --> 00:11:29,280
And now if it would console lock content here
244
00:11:29,280 --> 00:11:31,710
I would be logging the value
245
00:11:31,710 --> 00:11:34,920
that is stored in that abc variable
246
00:11:34,920 --> 00:11:37,230
in the util JS file.
247
00:11:37,230 --> 00:11:39,360
But I'm renaming it here in the file
248
00:11:39,360 --> 00:11:40,590
where I'm importing it
249
00:11:40,590 --> 00:11:42,990
with help of that special as keyword
250
00:11:42,990 --> 00:11:45,210
which allows us to assign an alias
251
00:11:45,210 --> 00:11:46,960
to the thing that's being imported.
252
00:11:47,970 --> 00:11:49,620
So as you can see, there are a couple
253
00:11:49,620 --> 00:11:53,400
of things you can do with this import export concept.
254
00:11:53,400 --> 00:11:56,070
In the end, it is pretty straightforward
255
00:11:56,070 --> 00:11:58,170
but you should know about these keywords
256
00:11:58,170 --> 00:11:59,250
and how to use them
257
00:11:59,250 --> 00:12:01,290
because we are going to use them a lot
258
00:12:01,290 --> 00:12:02,440
throughout this course.
20017
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.