Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,180 --> 00:00:06,060
All right, once we're successfully done, we'll get the basics, but before we move on to more interesting
2
00:00:06,060 --> 00:00:11,800
and advanced reac topics, I would like to cover import and export statements.
3
00:00:12,240 --> 00:00:17,490
Now, let me tell you right away that imports and exports are not really specific.
4
00:00:17,910 --> 00:00:19,880
In fact, they are six modules.
5
00:00:20,130 --> 00:00:21,480
So think Joska.
6
00:00:21,780 --> 00:00:27,360
And the reason why I would want to cover them now is because we will rely heavily on them throughout
7
00:00:27,360 --> 00:00:34,260
the remainder of the course, as well as the project and essentially its six modules or ability to import
8
00:00:34,260 --> 00:00:38,520
and export our code allows us to split up or up into small chunks.
9
00:00:39,540 --> 00:00:42,720
Which, of course, makes it easier to manage it in general.
10
00:00:42,750 --> 00:00:49,350
There are two flavors named and default exports, and even though there are few more variations for
11
00:00:49,350 --> 00:00:53,250
both of them, for now, we'll just cover the most straightforward setup.
12
00:00:53,460 --> 00:00:58,410
So as we're looking at our map, everything is beautiful.
13
00:00:58,890 --> 00:01:04,350
But don't you think that our intelligence is getting quite big?
14
00:01:04,710 --> 00:01:10,770
And we need to keep in mind that at the moment we literally have only three cards with some books.
15
00:01:11,130 --> 00:01:14,500
Of course, normally you have way more functionality than that.
16
00:01:14,910 --> 00:01:22,370
So it wouldn't make sense to start splitting up our functionality into separate files because that way,
17
00:01:22,380 --> 00:01:25,020
of course, we can manage it way easier.
18
00:01:25,380 --> 00:01:26,850
So here's what I'm talking about.
19
00:01:27,150 --> 00:01:30,120
I'm going to open up the sidebar and let in a source.
20
00:01:30,420 --> 00:01:33,540
I would like to create two new files.
21
00:01:33,720 --> 00:01:35,400
So one is going to be called books.
22
00:01:35,400 --> 00:01:41,660
Ejaz, this is where I would want to store my books and the other one is going to be book jazz.
23
00:01:41,880 --> 00:01:45,810
And this is, of course, where I would want to store my component.
24
00:01:46,050 --> 00:01:51,510
So my book component, let's create this false or new file and then I'm going for books.
25
00:01:51,900 --> 00:01:56,730
Just this is where I'll store my data and then I'll have another one in file.
26
00:01:56,910 --> 00:02:00,420
And then I'm looking for this book and then Ajaz.
27
00:02:00,810 --> 00:02:07,390
Now, what I would want to do right now is head back to in next year and grab my books.
28
00:02:07,410 --> 00:02:07,730
All right.
29
00:02:08,070 --> 00:02:09,360
So let's keep on scrolling.
30
00:02:10,230 --> 00:02:11,690
And just cut it out now.
31
00:02:11,760 --> 00:02:18,240
Of course, we navigate to books, just copy and paste, not everything is beautiful, but of course
32
00:02:18,240 --> 00:02:25,260
in the end, like jazz, where we have the booklist, of course, we are not any more accessing the
33
00:02:25,260 --> 00:02:25,570
books.
34
00:02:26,040 --> 00:02:27,140
So how we can fix that?
35
00:02:27,390 --> 00:02:32,890
Well, in the books jazz, we would need to go for the named export.
36
00:02:33,090 --> 00:02:36,330
Again, there are two flavors and you can use them.
37
00:02:36,330 --> 00:02:40,380
How are you like meaning we could have set this up as default export as well.
38
00:02:40,680 --> 00:02:46,160
But I'm going to show you the named export movie at the box and then with a book.
39
00:02:46,170 --> 00:02:50,810
So with the component, I will show you the default export.
40
00:02:51,030 --> 00:02:53,510
So we go here, we export.
41
00:02:53,550 --> 00:02:54,660
So that is the key word.
42
00:02:54,870 --> 00:02:56,620
And then of course, we go with our.
43
00:02:57,810 --> 00:03:02,880
And then whatever we would want to export, so that's going to be most straightforward set up, like
44
00:03:02,880 --> 00:03:09,240
I said, there are few flavors, so essentially there are few other ways how we can write the same thing
45
00:03:09,450 --> 00:03:09,800
again.
46
00:03:09,850 --> 00:03:10,990
The idea won't change.
47
00:03:11,190 --> 00:03:14,020
We're still exporting this box.
48
00:03:14,090 --> 00:03:14,570
All right.
49
00:03:14,820 --> 00:03:17,800
But there are few more variations how we can do that.
50
00:03:17,820 --> 00:03:23,580
But for now, we'll just stick with the most straightforward one where we go with export and whatever
51
00:03:23,580 --> 00:03:24,750
we would want to export.
52
00:03:25,140 --> 00:03:31,650
So now, of course, in the end is just what I would want is to import and some little like we imported,
53
00:03:31,800 --> 00:03:33,090
the index says.
54
00:03:33,390 --> 00:03:37,080
Now, of course, I'm looking for that particular right now.
55
00:03:37,080 --> 00:03:40,680
It's going to be a little bit different where I'm going for the import statement.
56
00:03:41,720 --> 00:03:50,060
Then, since it is a named import or named export, I would need to go with curly braces and learn the
57
00:03:50,060 --> 00:03:53,780
name or a name like export needs to match.
58
00:03:53,780 --> 00:03:54,400
Exactly.
59
00:03:54,950 --> 00:04:02,450
So if this is Bugs Bunny, make sure that in the next year you're also targeting the same name.
60
00:04:02,690 --> 00:04:06,350
So in my case, I need to go for books, so go for books.
61
00:04:06,560 --> 00:04:10,330
And that is coming from and now we go with the relative path.
62
00:04:10,550 --> 00:04:16,340
So now something interesting we're not importing from the package like we did would react, which of
63
00:04:16,340 --> 00:04:17,830
course was coming for an old model.
64
00:04:18,170 --> 00:04:25,670
And like I mentioned back then, since it is not coming from the node modules now, we need to set up
65
00:04:25,670 --> 00:04:26,210
a path.
66
00:04:26,490 --> 00:04:29,360
So in this case, since it was coming from node modules, we didn't care.
67
00:04:29,570 --> 00:04:32,210
We just said, hey, get me this one from this package.
68
00:04:32,660 --> 00:04:35,420
However, in this case, we need to have a relative path.
69
00:04:35,690 --> 00:04:40,340
But since the box is in the same folder, I just go Dot.
70
00:04:41,230 --> 00:04:47,380
Then fourth, and then I'm looking forward to file and I go here with books now, since it is a just
71
00:04:47,380 --> 00:04:51,100
file, we don't need to have the extension previously.
72
00:04:51,120 --> 00:04:57,230
Remember, when we work with scissors, we needed to have the scissors extension with Joska.
73
00:04:57,430 --> 00:04:58,440
We don't have to do that.
74
00:04:58,450 --> 00:05:00,520
So if it is a job to file, excellent.
75
00:05:00,670 --> 00:05:02,680
We just keep on moving on.
76
00:05:02,980 --> 00:05:03,970
So now we separate.
77
00:05:04,120 --> 00:05:05,170
OK, beautiful.
78
00:05:05,380 --> 00:05:07,480
And notice how our app still works.
79
00:05:07,780 --> 00:05:10,470
So everything works as expected.
80
00:05:10,690 --> 00:05:16,480
Now, of course, like I said, if file, for example, set this up as data and I'll say it now, it
81
00:05:16,480 --> 00:05:18,630
will say, well, books is not defined.
82
00:05:18,940 --> 00:05:25,570
So now of course, since I named this data also where I'm using it, of course I would need to rename
83
00:05:25,570 --> 00:05:26,090
it as that.
84
00:05:26,110 --> 00:05:30,700
However, it says import error data is not export it from books.
85
00:05:31,030 --> 00:05:36,600
So if you're changing something around, like I said, this is a named export.
86
00:05:36,880 --> 00:05:40,700
So, for example, you need to access exactly the same name.
87
00:05:41,020 --> 00:05:44,860
So here I am accessing data, however, react, complain and listen.
88
00:05:45,070 --> 00:05:46,660
You're not exporting data.
89
00:05:47,470 --> 00:05:48,350
So that is the case.
90
00:05:48,370 --> 00:05:49,920
Of course we can just change it.
91
00:05:50,020 --> 00:05:50,930
So that is up to you.
92
00:05:50,950 --> 00:05:55,600
This is just to showcase that, of course, names need to match.
93
00:05:55,600 --> 00:05:56,200
Exactly.
94
00:05:56,530 --> 00:05:59,950
So once we have this particular set up, everything is beautiful.
95
00:06:00,220 --> 00:06:05,020
And now let's focus on the default one now before we set up our component.
96
00:06:05,050 --> 00:06:10,640
Let me just show you the extension, like I mentioned previously, where we have the reaction.
97
00:06:10,810 --> 00:06:19,990
So, for example, if we create this component and if I go with a snippet of R, A, F, C, E, I right
98
00:06:19,990 --> 00:06:27,520
away have my component and this is going to be the case where it will always match the name of that
99
00:06:27,520 --> 00:06:28,270
particular file.
100
00:06:28,600 --> 00:06:31,720
So in this case, notice it is named book jazz.
101
00:06:31,900 --> 00:06:35,280
So that's why right away my component is Bogota's.
102
00:06:35,650 --> 00:06:42,250
And again, there are multiple flavors, but this is the most basic one where we import reac from react.
103
00:06:42,250 --> 00:06:48,370
Of course we need to do that since we're setting up the component and that as far as default export,
104
00:06:48,640 --> 00:06:50,020
we go with export.
105
00:06:50,960 --> 00:06:56,510
But then we have this default and then whatever we would want to export as default, and I'll show you
106
00:06:56,510 --> 00:06:59,420
the differences between the two in a second.
107
00:06:59,780 --> 00:07:04,560
But just keep in mind that, of course, again, these names need to match.
108
00:07:04,790 --> 00:07:10,670
So if you're setting up your function, your component name and book, if you want to export as default,
109
00:07:10,670 --> 00:07:13,130
of course, you would need to use the same name.
110
00:07:13,370 --> 00:07:21,140
And also keep in mind that you can have only one, only one default export per file, meaning you can
111
00:07:21,140 --> 00:07:26,950
set up more named exports from this particular file from book, Jarius.
112
00:07:27,320 --> 00:07:31,220
But as far as default, you can have only one.
113
00:07:31,550 --> 00:07:37,640
Now, what I would want in this book, Jass Component, let's head back to next year.
114
00:07:37,980 --> 00:07:39,890
And then, of course, this is my component.
115
00:07:39,890 --> 00:07:40,270
Correct.
116
00:07:40,610 --> 00:07:41,690
So what I could do.
117
00:07:42,670 --> 00:07:50,260
Yeah, just keep on scrolling, keep on scrolling, cut it out, and we can just remove the empty function
118
00:07:50,260 --> 00:07:55,720
that we currently have in the book component and then copy and paste.
119
00:07:55,960 --> 00:07:58,650
And, of course, everything works awesome.
120
00:07:58,990 --> 00:08:02,230
So everything is displayed exactly like we wanted.
121
00:08:02,560 --> 00:08:06,540
And now in the index, again, we would need to import.
122
00:08:07,090 --> 00:08:14,740
So the difference between named and default exports is the fact that now I can name it whatever I would
123
00:08:14,740 --> 00:08:16,120
want to learn here.
124
00:08:16,120 --> 00:08:22,840
If I go with import and if I call this book and learn from and again, we're looking for relative path,
125
00:08:22,840 --> 00:08:28,170
we're looking for book jass, everything will work as expected.
126
00:08:28,420 --> 00:08:33,400
So now once we serve notice, it is running like nothing happened.
127
00:08:33,640 --> 00:08:40,390
OK, so once all that is running now, once everything is in place, then of course we can just take
128
00:08:40,390 --> 00:08:40,690
a look.
129
00:08:40,690 --> 00:08:44,020
What happens if, for example, I change its name.
130
00:08:44,260 --> 00:08:46,660
So I have import book from the book.
131
00:08:46,790 --> 00:08:50,020
But like I said, this is a default export.
132
00:08:50,350 --> 00:08:53,500
So that means I don't need to look for a specific name.
133
00:08:53,800 --> 00:09:00,550
So if I'll change this around and if I call this specific book, then of course the only thing I need
134
00:09:00,550 --> 00:09:03,520
to do is change where I call it.
135
00:09:03,850 --> 00:09:05,530
So in order here I have my book.
136
00:09:05,800 --> 00:09:10,950
So if I'll just call this specific book, you'll notice that everything will still work.
137
00:09:11,410 --> 00:09:18,490
So even though I renamed it and from the book Jass, I'm exporting the book.
138
00:09:18,950 --> 00:09:26,530
Everything works as expected because it is a default export and then I can rename it however I would
139
00:09:26,530 --> 00:09:27,700
want in here.
140
00:09:27,700 --> 00:09:32,800
I rename it to a specific book that is coming from the book address file.
141
00:09:33,040 --> 00:09:38,630
And then of course, the only thing I need to do is just remember what is the name I gave.
142
00:09:38,770 --> 00:09:42,490
So if this was a specific book, of course I need to access the same name.
143
00:09:42,850 --> 00:09:48,310
And then let me just show you the relative path from a different folder, because once in a while,
144
00:09:48,310 --> 00:09:52,720
of course, we will use that throughout the course where I'm just going to create a new folder.
145
00:09:53,840 --> 00:10:03,260
I'll say this thing here and then within this folder and let's just come up with a file of testing and
146
00:10:03,260 --> 00:10:11,480
then Ajaz and let's export as default and also export export left and we'll call this hell a world.
147
00:10:11,900 --> 00:10:14,000
So greeting, greeting.
148
00:10:14,150 --> 00:10:18,430
And that is going to be her little world share in any of the files.
149
00:10:18,440 --> 00:10:26,840
Now we can export our of course, relative path will change because now we need to go one level up into
150
00:10:26,840 --> 00:10:32,030
testing and then look for this testing jass file again.
151
00:10:32,300 --> 00:10:33,710
It's not going to do anything.
152
00:10:33,710 --> 00:10:39,830
However, I just want to showcase in the next Jass where if I go with import, remember the name was
153
00:10:39,830 --> 00:10:42,860
greeting and we're export it as a name import.
154
00:10:43,160 --> 00:10:46,820
So we go here with a greeting and that is coming from.
155
00:10:46,970 --> 00:10:53,050
So now we're looking into the testing testing folder and then we're looking for the testing file.
156
00:10:53,360 --> 00:10:54,450
So testing drafts.
157
00:10:54,680 --> 00:10:59,180
And now, of course, anywhere where I would want I can just, for example, control.
158
00:10:59,480 --> 00:11:04,760
So I go with a log and then greeting and then, of course, once I open this up.
159
00:11:05,910 --> 00:11:14,090
I will notice that in my counsel I should have the hello world, and of course, I notice the line 12
160
00:11:14,340 --> 00:11:15,780
it is Hello World.
161
00:11:15,990 --> 00:11:18,000
So everything works as expected.
162
00:11:18,270 --> 00:11:20,840
Like I said, it is not a Riak thing.
163
00:11:21,360 --> 00:11:22,980
It is six modules.
164
00:11:22,980 --> 00:11:26,520
And if you have covered er six modules before, you are in good shape.
165
00:11:26,640 --> 00:11:35,910
However, we will heavily rely on this functionality because it will just allow us to set up our applications
166
00:11:36,450 --> 00:11:39,810
in a more manageable way within hours.
167
00:11:40,110 --> 00:11:41,640
Now I have my next guest.
168
00:11:41,910 --> 00:11:48,450
In the next year I only have the booklist, so that is my component and I'm getting the specific pieces
169
00:11:48,450 --> 00:11:55,500
of data, whether that is on the books, whether that is a specific component or whether that is some
170
00:11:55,500 --> 00:11:57,950
other functionality in this case, health world.
171
00:11:58,110 --> 00:12:05,610
And as you can see, it is much more easier to manage app where we split up our data into multiple files.
172
00:12:05,940 --> 00:12:12,990
So those are the basics, how we can use import and export statements and create react up.
16397
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.