1
00:00:01,050 --> 00:00:04,260
‫So let's now split up our App.js file

2
00:00:04,260 --> 00:00:06,393
‫into multiple component files.

3
00:00:07,500 --> 00:00:10,140
‫And this will just be a very simple exercise

4
00:00:10,140 --> 00:00:12,360
‫of taking each of these components

5
00:00:12,360 --> 00:00:15,060
‫and placing them into their own file.

6
00:00:15,060 --> 00:00:17,520
‫So you can even do that on your own if you want.

7
00:00:17,520 --> 00:00:21,030
‫But anyway, let's just grab this code here,

8
00:00:21,030 --> 00:00:22,020
‫cut it,

9
00:00:22,020 --> 00:00:25,800
‫and then create a new file inside source.

10
00:00:25,800 --> 00:00:29,750
‫So inside the source folder, create Logo.js

11
00:00:31,170 --> 00:00:34,173
‫which is the name of this component, right?

12
00:00:35,880 --> 00:00:37,920
‫All right, but now of course,

13
00:00:37,920 --> 00:00:41,820
‫we also have to export this function from here.

14
00:00:41,820 --> 00:00:43,680
‫And remember that in JavaScript,

15
00:00:43,680 --> 00:00:45,930
‫we can export in two ways.

16
00:00:45,930 --> 00:00:47,970
‫So we can have named exports,

17
00:00:47,970 --> 00:00:50,100
‫which would simply be this.

18
00:00:50,100 --> 00:00:53,580
‫So with this, we would create an export called logo

19
00:00:53,580 --> 00:00:55,620
‫which we would then have to import

20
00:00:55,620 --> 00:00:57,270
‫with exactly that name

21
00:00:57,270 --> 00:00:59,190
‫into the other file,

22
00:00:59,190 --> 00:01:00,900
‫so into the file where we need it.

23
00:01:00,900 --> 00:01:02,610
‫But usually, in React apps,

24
00:01:02,610 --> 00:01:05,940
‫what we do is to use a default export.

25
00:01:05,940 --> 00:01:09,930
‫So export default, just like this.

26
00:01:09,930 --> 00:01:13,110
‫And then of course, now if we try to reload this,

27
00:01:13,110 --> 00:01:17,130
‫we will get an error that, well, not this one.

28
00:01:17,130 --> 00:01:18,390
‫Yeah, right here.

29
00:01:18,390 --> 00:01:20,820
‫So we see that the logo is not defined.

30
00:01:20,820 --> 00:01:21,780
‫And so of course,

31
00:01:21,780 --> 00:01:24,723
‫that's because now we have to import it right here.

32
00:01:26,340 --> 00:01:27,840
‫So import.

33
00:01:27,840 --> 00:01:30,570
‫And here, actually we can use any name that we want.

34
00:01:30,570 --> 00:01:33,600
‫So because we used a default export.

35
00:01:33,600 --> 00:01:36,450
‫But of course, we will still call it logo here.

36
00:01:36,450 --> 00:01:38,340
‫So import logo from,

37
00:01:38,340 --> 00:01:42,483
‫and then simply the path to that file.

38
00:01:43,710 --> 00:01:45,150
‫And yes.

39
00:01:45,150 --> 00:01:48,993
‫And again, we could indeed change the name here to X,

40
00:01:49,920 --> 00:01:52,260
‫for example, and then here as well,

41
00:01:52,260 --> 00:01:53,310
‫give it a save

42
00:01:53,310 --> 00:01:55,320
‫and you see that it still works.

43
00:01:55,320 --> 00:01:58,590
‫But again, this is of course not advisable.

44
00:01:58,590 --> 00:02:01,080
‫This is just to show you how named

45
00:02:01,080 --> 00:02:03,243
‫and how default exports work.

46
00:02:04,650 --> 00:02:08,400
‫All right, now let's take the next one.

47
00:02:08,400 --> 00:02:10,140
‫And by the way, the first one here

48
00:02:10,140 --> 00:02:12,270
‫will of course, stay in this file

49
00:02:12,270 --> 00:02:14,130
‫because it is called app.

50
00:02:14,130 --> 00:02:17,403
‫And this file is also already called App.js.

51
00:02:18,570 --> 00:02:20,523
‫So let's grab the next one here.

52
00:02:22,470 --> 00:02:24,033
‫Okay, cut it,

53
00:02:25,200 --> 00:02:28,950
‫new file, Form.js,

54
00:02:28,950 --> 00:02:29,783
‫paste it here,

55
00:02:29,783 --> 00:02:33,453
‫and then again, export default.

56
00:02:35,850 --> 00:02:37,200
‫Coming back here,

57
00:02:37,200 --> 00:02:42,200
‫then we need to import form from

58
00:02:46,110 --> 00:02:47,760
‫just like this.

59
00:02:47,760 --> 00:02:49,650
‫Now here we will still get an error

60
00:02:49,650 --> 00:02:52,560
‫because we haven't imported useState

61
00:02:52,560 --> 00:02:54,243
‫in that other component.

62
00:02:55,110 --> 00:02:57,840
‫So let's quickly grab this line of code here,

63
00:02:57,840 --> 00:02:59,100
‫move into the form

64
00:02:59,100 --> 00:03:01,230
‫which is where we are using useState,

65
00:03:01,230 --> 00:03:04,530
‫and then we also need to import that hook.

66
00:03:04,530 --> 00:03:07,650
‫So this useState function here into this file.

67
00:03:07,650 --> 00:03:12,060
‫Of course because this file here does use that function.

68
00:03:12,060 --> 00:03:12,900
‫So it's not enough

69
00:03:12,900 --> 00:03:15,900
‫to just include it one time anywhere in the code.

70
00:03:15,900 --> 00:03:18,630
‫You really have to include the parts of React

71
00:03:18,630 --> 00:03:21,573
‫that you need in each single component file.

72
00:03:23,040 --> 00:03:25,530
‫So let's close this one and this one.

73
00:03:25,530 --> 00:03:29,340
‫And now that we have done it two times manually,

74
00:03:29,340 --> 00:03:32,043
‫it's actually time to do it automatically.

75
00:03:32,940 --> 00:03:35,430
‫So let's again select all of this.

76
00:03:35,430 --> 00:03:37,770
‫We can even click this triangle here

77
00:03:37,770 --> 00:03:39,420
‫to collapse the function.

78
00:03:39,420 --> 00:03:41,370
‫And so then we can select all of it

79
00:03:41,370 --> 00:03:43,623
‫and then right click here,

80
00:03:44,580 --> 00:03:47,010
‫and then click on refactor.

81
00:03:47,010 --> 00:03:49,200
‫And so now here, this gives us the option

82
00:03:49,200 --> 00:03:51,633
‫to move this function into a new file.

83
00:03:52,560 --> 00:03:54,930
‫So let's click that.

84
00:03:54,930 --> 00:03:57,990
‫And you see that a brand new file

85
00:03:57,990 --> 00:04:00,633
‫with the name of packing list was created.

86
00:04:02,130 --> 00:04:05,640
‫So VS Code automatically took this function here

87
00:04:05,640 --> 00:04:07,260
‫and then created a new file

88
00:04:07,260 --> 00:04:09,450
‫with this exact same name.

89
00:04:09,450 --> 00:04:11,520
‫And it also automatically imported

90
00:04:11,520 --> 00:04:14,850
‫all the parts that we need inside this function.

91
00:04:14,850 --> 00:04:18,750
‫So we have useState and we also have item.

92
00:04:18,750 --> 00:04:21,030
‫Well, this actually doesn't make a lot of sense

93
00:04:21,030 --> 00:04:22,290
‫at this point

94
00:04:22,290 --> 00:04:26,160
‫because the item is still here.

95
00:04:26,160 --> 00:04:28,560
‫So that's actually not ideal,

96
00:04:28,560 --> 00:04:30,990
‫but we will fix that in a moment.

97
00:04:30,990 --> 00:04:32,460
‫So what matters here for now

98
00:04:32,460 --> 00:04:35,670
‫is that VS Code automatically created this new file,

99
00:04:35,670 --> 00:04:38,580
‫placed this new component here

100
00:04:38,580 --> 00:04:40,860
‫and also exported it.

101
00:04:40,860 --> 00:04:44,733
‫Now it's actually using a named export.

102
00:04:47,443 --> 00:04:48,276
‫So you can see here

103
00:04:48,276 --> 00:04:50,640
‫that it's importing it in this other way.

104
00:04:50,640 --> 00:04:52,860
‫So this is how you do a named import.

105
00:04:52,860 --> 00:04:55,170
‫But again, we usually in React development,

106
00:04:55,170 --> 00:04:57,300
‫do default exports.

107
00:04:57,300 --> 00:05:00,660
‫But of course, the other way is also perfectly fine.

108
00:05:00,660 --> 00:05:02,013
‫I will just change it here.

109
00:05:03,120 --> 00:05:04,413
‫Export default.

110
00:05:05,310 --> 00:05:08,970
‫And then here, I need to change the way I import it.

111
00:05:08,970 --> 00:05:12,063
‫So getting rid of these curly braces.

112
00:05:12,960 --> 00:05:15,360
‫And now let's also create a new component

113
00:05:15,360 --> 00:05:17,310
‫for this item here.

114
00:05:17,310 --> 00:05:19,113
‫So let's just remove this export.

115
00:05:21,600 --> 00:05:24,963
‫Select everything, refactor,

116
00:05:26,100 --> 00:05:27,723
‫and move to a new file.

117
00:05:28,650 --> 00:05:31,290
‫So again, item was created

118
00:05:31,290 --> 00:05:36,060
‫and here we need to actually write export default,

119
00:05:36,060 --> 00:05:37,170
‫give it a save,

120
00:05:37,170 --> 00:05:38,760
‫and now we need to change that

121
00:05:38,760 --> 00:05:40,620
‫in the packing list

122
00:05:40,620 --> 00:05:43,560
‫because now this component is no longer in app,

123
00:05:43,560 --> 00:05:45,033
‫but inside,

124
00:05:46,050 --> 00:05:47,853
‫well, inside of Item.js.

125
00:05:48,690 --> 00:05:52,230
‫And it's again, a default export.

126
00:05:52,230 --> 00:05:54,180
‫So we need to import it,

127
00:05:54,180 --> 00:05:55,833
‫basically as a default import.

128
00:05:57,840 --> 00:06:01,110
‫All right, so this small thing here happened

129
00:06:01,110 --> 00:06:03,990
‫because we first exported the packing list

130
00:06:03,990 --> 00:06:06,333
‫which depended on the item.

131
00:06:10,020 --> 00:06:11,190
‫But yeah, in any case,

132
00:06:11,190 --> 00:06:13,620
‫usually we do this immediately.

133
00:06:13,620 --> 00:06:15,630
‫So usually when we build some app,

134
00:06:15,630 --> 00:06:17,790
‫we do immediately create a new file

135
00:06:17,790 --> 00:06:19,533
‫for when we need a new component.

136
00:06:20,700 --> 00:06:23,013
‫So let's do that one final time.

137
00:06:25,800 --> 00:06:30,360
‫So stats, let's change it again to export default

138
00:06:30,360 --> 00:06:31,833
‫just to stay consistent,

139
00:06:33,300 --> 00:06:36,750
‫and then fix it here as well.

140
00:06:36,750 --> 00:06:37,590
‫And with this,

141
00:06:37,590 --> 00:06:40,530
‫we now have one component per file

142
00:06:40,530 --> 00:06:42,540
‫which makes our component here

143
00:06:42,540 --> 00:06:44,250
‫a little bit easier to manage.

144
00:06:44,250 --> 00:06:47,130
‫So then there's not so much scrolling up and down,

145
00:06:47,130 --> 00:06:48,360
‫but instead,

146
00:06:48,360 --> 00:06:50,910
‫well, we can develop basically each component

147
00:06:50,910 --> 00:06:53,343
‫in isolation in its separate file.

148
00:06:54,690 --> 00:06:56,100
‫Now taking it one step further,

149
00:06:56,100 --> 00:06:58,980
‫we can also move each of the components

150
00:06:58,980 --> 00:07:01,263
‫into a new components folder.

151
00:07:02,550 --> 00:07:04,020
‫So components,

152
00:07:04,020 --> 00:07:06,903
‫and then let's select all of them actually.

153
00:07:08,760 --> 00:07:11,730
‫So everything except for index.js

154
00:07:11,730 --> 00:07:13,260
‫which is not a component

155
00:07:13,260 --> 00:07:15,003
‫and our CSS file.

156
00:07:16,680 --> 00:07:18,120
‫Grab them here.

157
00:07:18,120 --> 00:07:20,340
‫And now we only have one problem

158
00:07:20,340 --> 00:07:24,810
‫which is the app file cannot be found here in index.js.

159
00:07:24,810 --> 00:07:27,150
‫So here we need to now fix this path

160
00:07:27,150 --> 00:07:31,533
‫to components/App.

161
00:07:32,400 --> 00:07:34,680
‫And with this, we are finished.

162
00:07:34,680 --> 00:07:37,263
‫So all the other files still work the same,

163
00:07:38,610 --> 00:07:41,070
‫or actually this one here.

164
00:07:41,070 --> 00:07:42,780
‫So here the imports still work

165
00:07:42,780 --> 00:07:44,880
‫because all the components are still

166
00:07:44,880 --> 00:07:47,760
‫in the same folder as App.js.

167
00:07:47,760 --> 00:07:48,600
‫And with this,

168
00:07:48,600 --> 00:07:51,360
‫we actually finished this project.

169
00:07:51,360 --> 00:07:53,790
‫So once again, congratulations

170
00:07:53,790 --> 00:07:58,790
‫for finishing your first, a bit more real React project.

171
00:07:58,800 --> 00:08:01,920
‫So a project that actually does something.

172
00:08:01,920 --> 00:08:05,520
‫So I think this was a really great practice project,

173
00:08:05,520 --> 00:08:06,870
‫quite straightforward,

174
00:08:06,870 --> 00:08:09,810
‫but it had all the most important fundamentals

175
00:08:09,810 --> 00:08:12,630
‫that you needed to know at this stage.

176
00:08:12,630 --> 00:08:13,463
‫Now, of course,

177
00:08:13,463 --> 00:08:15,600
‫this is not a real world application,

178
00:08:15,600 --> 00:08:17,130
‫but in large scale apps,

179
00:08:17,130 --> 00:08:19,650
‫you actually have many smaller parts

180
00:08:19,650 --> 00:08:22,200
‫in which you will need exactly these skills.

181
00:08:22,200 --> 00:08:23,033
‫And so everything

182
00:08:23,033 --> 00:08:26,310
‫that you are learning here is really, really important.

183
00:08:26,310 --> 00:08:28,050
‫It will lay the foundation

184
00:08:28,050 --> 00:08:31,110
‫so that later you can build those large

185
00:08:31,110 --> 00:08:33,330
‫and real world applications.

186
00:08:33,330 --> 00:08:34,770
‫Now next up in this section,

187
00:08:34,770 --> 00:08:36,780
‫we have a nice exercise

188
00:08:36,780 --> 00:08:40,020
‫where together we're going to build an accordion component.

189
00:08:40,020 --> 00:08:41,700
‫And then I just want to show you

190
00:08:41,700 --> 00:08:45,300
‫one other very important part of React.

191
00:08:45,300 --> 00:08:47,520
‫So that's gonna be the children prop.

192
00:08:47,520 --> 00:08:50,403
‫And so yeah, stay tuned for that.