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.