1
00:00:01,140 --> 00:00:03,960
‫So with our project now installed,

2
00:00:03,960 --> 00:00:06,538
‫let's start by building the static layout

3
00:00:06,538 --> 00:00:08,103
‫of the application.

4
00:00:09,270 --> 00:00:11,490
‫And as always, let's start by getting

5
00:00:11,490 --> 00:00:12,780
‫these starter files

6
00:00:12,780 --> 00:00:16,800
‫which in this case is just this CSS file.

7
00:00:16,800 --> 00:00:19,440
‫So of course that we don't have to write any styles

8
00:00:19,440 --> 00:00:21,210
‫ourselves.

9
00:00:21,210 --> 00:00:23,670
‫Then place that here into source.

10
00:00:23,670 --> 00:00:25,574
‫Now there will already be one

11
00:00:25,574 --> 00:00:27,430
‫so just replace that

12
00:00:28,500 --> 00:00:29,730
‫and since we're already here

13
00:00:29,730 --> 00:00:31,110
‫we can get rid of all

14
00:00:31,110 --> 00:00:33,303
‫the junk that we don't need.

15
00:00:35,640 --> 00:00:36,780
‫So all of these,

16
00:00:36,780 --> 00:00:37,613
‫so in the end

17
00:00:37,613 --> 00:00:42,543
‫we just have app.js, index.CSS, and index.js.

18
00:00:43,770 --> 00:00:45,674
‫Okay. Then just renaming

19
00:00:45,674 --> 00:00:47,956
‫this here once again.

20
00:00:47,956 --> 00:00:50,577
‫And then let's drag and drop it

21
00:00:50,577 --> 00:00:53,043
‫onto the VS code icon.

22
00:00:57,709 --> 00:01:01,110
‫Okay, so here we already have our files.

23
00:01:01,110 --> 00:01:03,420
‫As always, we need to clean this one here

24
00:01:03,420 --> 00:01:06,340
‫because we are importing some files that

25
00:01:06,340 --> 00:01:09,431
‫we no longer have basically.

26
00:01:09,431 --> 00:01:11,460
‫But that's it.

27
00:01:11,460 --> 00:01:13,710
‫And once again, if you feel like it

28
00:01:13,710 --> 00:01:16,290
‫you can actually delete all of this

29
00:01:16,290 --> 00:01:17,970
‫and write the code yourself

30
00:01:17,970 --> 00:01:19,860
‫just to practice how we can set

31
00:01:19,860 --> 00:01:21,720
‫up this React app

32
00:01:21,720 --> 00:01:23,220
‫from complete scratch.

33
00:01:23,220 --> 00:01:24,826
‫But I will just leave this here

34
00:01:24,826 --> 00:01:27,180
‫because in the end

35
00:01:27,180 --> 00:01:28,770
‫when you build your own applications

36
00:01:28,770 --> 00:01:31,380
‫you will always just leave

37
00:01:31,380 --> 00:01:32,460
‫this here as well.

38
00:01:32,460 --> 00:01:35,490
‫You're not always gonna write everything from scratch

39
00:01:35,490 --> 00:01:37,710
‫but here actually you want to delete everything

40
00:01:37,710 --> 00:01:40,170
‫and start from scratch.

41
00:01:40,170 --> 00:01:41,730
‫So export

42
00:01:41,730 --> 00:01:42,563
‫default

43
00:01:43,470 --> 00:01:46,770
‫function app.

44
00:01:46,770 --> 00:01:48,540
‫So this is usually always

45
00:01:48,540 --> 00:01:50,040
‫the same as well here.

46
00:01:50,040 --> 00:01:52,890
‫So you always have your app parent component

47
00:01:52,890 --> 00:01:55,680
‫which will include all the other components.

48
00:01:55,680 --> 00:01:58,890
‫And let's actually start with these other components.

49
00:01:58,890 --> 00:02:00,150
‫So just the components

50
00:02:00,150 --> 00:02:01,440
‫that we talked about

51
00:02:01,440 --> 00:02:02,733
‫in the previous lecture.

52
00:02:04,800 --> 00:02:07,083
‫So that's function,

53
00:02:08,190 --> 00:02:09,023
‫Logo.

54
00:02:10,440 --> 00:02:12,492
‫And now I will just quickly duplicate

55
00:02:12,492 --> 00:02:13,930
‫this code here

56
00:02:16,664 --> 00:02:19,503
‫just to make this a little bit faster.

57
00:02:21,008 --> 00:02:24,753
‫So packing list.

58
00:02:26,460 --> 00:02:29,040
‫And we also have our stats.

59
00:02:29,040 --> 00:02:30,960
‫So these are the four big components

60
00:02:30,960 --> 00:02:32,788
‫that we identified

61
00:02:32,788 --> 00:02:33,621
‫in the last lecture,

62
00:02:33,621 --> 00:02:34,454
‫remember that?

63
00:02:34,454 --> 00:02:36,090
‫And so let's now write a little bit

64
00:02:36,090 --> 00:02:38,730
‫of JSX for each of them

65
00:02:38,730 --> 00:02:40,680
‫starting with the Logo.

66
00:02:40,680 --> 00:02:42,810
‫So the logo is many times an image,

67
00:02:42,810 --> 00:02:43,740
‫but in this case

68
00:02:43,740 --> 00:02:45,580
‫we will just have a primary heading

69
00:02:47,250 --> 00:02:49,560
‫and we will say far away.

70
00:02:49,560 --> 00:02:52,290
‫And then let's add some emoji here.

71
00:02:52,290 --> 00:02:54,420
‫Now the way we write emojis

72
00:02:54,420 --> 00:02:55,860
‫on the Mac is by hitting

73
00:02:55,860 --> 00:02:58,770
‫control command space bar.

74
00:02:58,770 --> 00:03:01,620
‫And on windows, the shortcut is Windows

75
00:03:01,620 --> 00:03:03,660
‫plus period.

76
00:03:03,660 --> 00:03:05,100
‫So like this,

77
00:03:05,100 --> 00:03:08,445
‫so the windows key and then plus this dot.

78
00:03:08,445 --> 00:03:12,730
‫Alright, then here, let's use a palm tree.

79
00:03:12,730 --> 00:03:14,590
‫So this one here

80
00:03:16,170 --> 00:03:17,553
‫and then a bag.

81
00:03:22,140 --> 00:03:23,730
‫Just like this.

82
00:03:23,730 --> 00:03:25,380
‫And in case you can't get

83
00:03:25,380 --> 00:03:26,700
‫these emojis to work

84
00:03:26,700 --> 00:03:28,230
‫you can always just copy them

85
00:03:28,230 --> 00:03:30,651
‫from the final files of this project.

86
00:03:30,651 --> 00:03:34,170
‫Or you can of course just ignore them as well.

87
00:03:34,170 --> 00:03:36,060
‫So these are just to make the design

88
00:03:36,060 --> 00:03:37,143
‫a little bit nicer.

89
00:03:38,520 --> 00:03:40,544
‫Okay, that's enough for the logo.

90
00:03:40,544 --> 00:03:43,739
‫So we will just write some very simple

91
00:03:43,739 --> 00:03:45,271
‫starter JSX here

92
00:03:45,271 --> 00:03:46,787
‫for each component

93
00:03:46,787 --> 00:03:50,223
‫as we are scaffolding basically this layout.

94
00:03:51,960 --> 00:03:53,190
‫So here, let's just return

95
00:03:53,190 --> 00:03:56,973
‫a div with the class of add-form.

96
00:03:58,257 --> 00:04:00,613
‫And again, you can of course

97
00:04:00,613 --> 00:04:03,330
‫explore the CSS file

98
00:04:03,330 --> 00:04:05,234
‫and see all the CSS that I wrote

99
00:04:05,234 --> 00:04:07,440
‫for these class names

100
00:04:07,440 --> 00:04:10,023
‫that we are going to import here.

101
00:04:10,023 --> 00:04:12,914
‫So in here later we will have

102
00:04:12,914 --> 00:04:14,473
‫these form elements

103
00:04:14,473 --> 00:04:16,320
‫like the select box,

104
00:04:16,320 --> 00:04:19,260
‫the input box, and that button.

105
00:04:19,260 --> 00:04:21,960
‫But for now we will just write the text.

106
00:04:21,960 --> 00:04:24,719
‫So what do you need

107
00:04:24,719 --> 00:04:27,300
‫for your trip?

108
00:04:27,300 --> 00:04:29,160
‫And here we also had some emoji,

109
00:04:29,160 --> 00:04:30,756
‫let's add that as well.

110
00:04:30,756 --> 00:04:32,883
‫And it's actually already down here.

111
00:04:35,640 --> 00:04:37,050
‫Okay.

112
00:04:37,050 --> 00:04:39,840
‫And notice how eslint is complaining

113
00:04:39,840 --> 00:04:42,300
‫that we are not using these variables here.

114
00:04:42,300 --> 00:04:44,010
‫But of course we will do that soon

115
00:04:44,010 --> 00:04:45,900
‫by including all of them here

116
00:04:45,900 --> 00:04:47,940
‫in the global parent component.

117
00:04:47,940 --> 00:04:49,263
‫So here in this app.

118
00:04:51,090 --> 00:04:53,580
‫But again, let's leave that for later.

119
00:04:53,580 --> 00:04:55,290
‫So we do that in the end.

120
00:04:55,290 --> 00:04:57,090
‫For now, we just write the static part

121
00:04:57,090 --> 00:04:58,473
‫of all the components.

122
00:05:01,962 --> 00:05:04,593
‫And this one is the list.

123
00:05:09,938 --> 00:05:13,380
‫So again, just like a placeholder there.

124
00:05:13,380 --> 00:05:14,520
‫And let's make this one here

125
00:05:14,520 --> 00:05:16,200
‫a footer element.

126
00:05:16,200 --> 00:05:18,720
‫So remember how the stats is really

127
00:05:18,720 --> 00:05:20,136
‫at the bottom of the page,

128
00:05:20,136 --> 00:05:22,953
‫and so a footer seems like a good fit here.

129
00:05:25,140 --> 00:05:27,630
‫So let's write You have

130
00:05:27,630 --> 00:05:30,210
‫and then here in the end we will have a number.

131
00:05:30,210 --> 00:05:31,840
‫So let's just use an X for now

132
00:05:34,416 --> 00:05:36,000
‫items on your list

133
00:05:36,000 --> 00:05:38,964
‫and you already packed

134
00:05:38,964 --> 00:05:40,950
‫and then again, an X,

135
00:05:40,950 --> 00:05:44,130
‫which is X percent of the total.

136
00:05:44,130 --> 00:05:45,120
‫Then here we also had

137
00:05:45,120 --> 00:05:46,600
‫some emoji

138
00:05:48,019 --> 00:05:50,793
‫Like this other bag here.

139
00:05:52,770 --> 00:05:53,823
‫And yeah,

140
00:05:54,840 --> 00:05:56,883
‫I think this one was also formatted.

141
00:05:58,120 --> 00:06:00,660
‫So let's use emphasize here.

142
00:06:00,660 --> 00:06:01,623
‫So em.

143
00:06:06,210 --> 00:06:07,563
‫And now with that,

144
00:06:09,301 --> 00:06:10,290
‫let's come here to our app component

145
00:06:11,234 --> 00:06:12,630
‫and use all of them here in our layout.

146
00:06:12,630 --> 00:06:13,463
‫And if you want,

147
00:06:13,463 --> 00:06:14,910
‫you can actually pass the video here

148
00:06:14,910 --> 00:06:16,950
‫and do that as a challenge.

149
00:06:16,950 --> 00:06:18,960
‫So just create one div element

150
00:06:18,960 --> 00:06:20,488
‫with the class of app

151
00:06:20,488 --> 00:06:22,890
‫and then include the four components

152
00:06:22,890 --> 00:06:24,213
‫in there if you'd like.

153
00:06:26,130 --> 00:06:27,201
‫So this

154
00:06:27,201 --> 00:06:29,253
‫is how you do that.

155
00:06:31,560 --> 00:06:33,970
‫So with the class of app

156
00:06:35,400 --> 00:06:37,260
‫and then one by one,

157
00:06:37,260 --> 00:06:38,730
‫one after the other

158
00:06:38,730 --> 00:06:40,650
‫we just include them here.

159
00:06:40,650 --> 00:06:42,232
‫So first a logo,

160
00:06:42,232 --> 00:06:44,285
‫then the form.

161
00:06:44,285 --> 00:06:45,720
‫So actually exactly

162
00:06:45,720 --> 00:06:47,870
‫in the way that we define them in our code.

163
00:06:49,950 --> 00:06:52,440
‫And by the way, in more real apps,

164
00:06:52,440 --> 00:06:54,360
‫and also a bit later in the course,

165
00:06:54,360 --> 00:06:55,560
‫we will start placing

166
00:06:55,560 --> 00:06:56,861
‫each of these components here

167
00:06:56,861 --> 00:06:58,820
‫into one individual file.

168
00:06:58,820 --> 00:07:02,233
‫So we will then have one file called app js

169
00:07:02,233 --> 00:07:06,570
‫for this component, one called logo js for this one

170
00:07:06,570 --> 00:07:08,220
‫and so on and so forth.

171
00:07:08,220 --> 00:07:10,230
‫But here, since we are still learning

172
00:07:10,230 --> 00:07:12,810
‫I think it's easier to build all of them here

173
00:07:12,810 --> 00:07:14,010
‫in the same file

174
00:07:14,010 --> 00:07:15,780
‫because otherwise we are jumping

175
00:07:15,780 --> 00:07:16,965
‫around all the times

176
00:07:16,965 --> 00:07:18,690
‫through these files.

177
00:07:18,690 --> 00:07:20,160
‫And so that then makes everything

178
00:07:20,160 --> 00:07:21,510
‫a lot more confusing

179
00:07:21,510 --> 00:07:22,560
‫especially when we get

180
00:07:22,560 --> 00:07:26,073
‫into topics such as child to parent communication.

181
00:07:27,390 --> 00:07:30,633
‫But yeah, more about that very soon.

182
00:07:32,670 --> 00:07:34,330
‫So to finish the stats

183
00:07:35,190 --> 00:07:36,331
‫and that's it.

184
00:07:36,331 --> 00:07:37,795
‫So no component

185
00:07:37,795 --> 00:07:40,200
‫is yellow here anymore

186
00:07:40,200 --> 00:07:42,956
‫and so that means that we didn't forget any.

187
00:07:42,956 --> 00:07:45,777
‫And yeah, with this we are done.

188
00:07:45,777 --> 00:07:49,870
‫So let's open up our integrated terminal

189
00:07:50,940 --> 00:07:52,140
‫like this.

190
00:07:52,140 --> 00:07:54,190
‫And we are already in the correct folder.

191
00:07:55,658 --> 00:07:57,070
‫So npm start

192
00:08:00,039 --> 00:08:02,853
‫and let's wait for it.

193
00:08:04,770 --> 00:08:05,763
‫Beautiful.

194
00:08:06,900 --> 00:08:08,110
‫Well here it seems

195
00:08:09,775 --> 00:08:10,983
‫we missed some class.

196
00:08:12,210 --> 00:08:14,433
‫Let's make this smaller again.

197
00:08:17,640 --> 00:08:19,260
‫All right.

198
00:08:19,260 --> 00:08:21,910
‫And so this footer here needs the

199
00:08:23,220 --> 00:08:25,529
‫class of stats.

200
00:08:25,529 --> 00:08:27,360
‫Yeah, wonderful.

201
00:08:27,360 --> 00:08:29,490
‫So this is what it's supposed to look like

202
00:08:29,490 --> 00:08:32,100
‫and it looks exactly like our demo.

203
00:08:32,100 --> 00:08:35,010
‫Well, except of course for these details right here

204
00:08:35,010 --> 00:08:36,456
‫which we will take care of

205
00:08:36,456 --> 00:08:39,000
‫starting in the next lecture.

206
00:08:39,000 --> 00:08:41,850
‫So next up, we will start rendering

207
00:08:41,850 --> 00:08:43,500
‫some static items here.

208
00:08:43,500 --> 00:08:45,540
‫So we will not yet dynamically

209
00:08:45,540 --> 00:08:47,106
‫add new items to the list

210
00:08:47,106 --> 00:08:49,590
‫but we will render some static items

211
00:08:49,590 --> 00:08:51,513
‫from an array here in the UI.