1
00:00:01,110 --> 00:00:04,200
‫Okay, so let's begin by rendering the

2
00:00:04,200 --> 00:00:05,613
‫list of friends.

3
00:00:07,080 --> 00:00:12,080
‫And to start, let's again come here to our starter files

4
00:00:12,600 --> 00:00:15,960
‫and then inside the eat-and-spit folder

5
00:00:15,960 --> 00:00:18,840
‫let's get app dot JS and index

6
00:00:18,840 --> 00:00:20,610
‫dot CSS.

7
00:00:20,610 --> 00:00:22,630
‫So both of them, copy them

8
00:00:23,760 --> 00:00:28,072
‫and I will just as always change the name here.

9
00:00:28,072 --> 00:00:31,590
‫And then inside the source, let's paste them.

10
00:00:31,590 --> 00:00:33,810
‫And so here we need to replace both

11
00:00:33,810 --> 00:00:36,450
‫of them, because they already existed.

12
00:00:36,450 --> 00:00:39,603
‫And then let's delete all the junk files.

13
00:00:40,800 --> 00:00:42,090
‫So all of these,

14
00:00:42,090 --> 00:00:46,530
‫so that we end up only with app dot JS, index dot CSS

15
00:00:46,530 --> 00:00:47,363
‫and

16
00:00:47,363 --> 00:00:49,050
‫index dot JS.

17
00:00:49,050 --> 00:00:51,510
‫And so now let's get started

18
00:00:51,510 --> 00:00:54,813
‫by opening up this folder in VS code.

19
00:00:59,190 --> 00:01:03,570
‫So index dot JS, here we need to as always clean up

20
00:01:03,570 --> 00:01:04,403
‫a little bit,

21
00:01:06,540 --> 00:01:08,160
‫and then

22
00:01:08,160 --> 00:01:11,313
‫also remove these files that no longer exist.

23
00:01:12,720 --> 00:01:13,773
‫Yeah, and that's it.

24
00:01:14,670 --> 00:01:18,270
‫So we have our index dot CSS file, which as always

25
00:01:18,270 --> 00:01:20,910
‫please feel free to explore it.

26
00:01:20,910 --> 00:01:24,933
‫But our main work is going to happen in app dot JS.

27
00:01:28,230 --> 00:01:31,590
‫And in fact, let's start by creating

28
00:01:31,590 --> 00:01:33,270
‫the app component

29
00:01:33,270 --> 00:01:37,140
‫which is as always our main parent component.

30
00:01:37,140 --> 00:01:39,370
‫And here this one we need to export

31
00:01:40,860 --> 00:01:41,730
‫default

32
00:01:41,730 --> 00:01:46,443
‫because this is the component that index dot JS imports.

33
00:01:48,180 --> 00:01:52,410
‫Okay, so let's just return some div here,

34
00:01:52,410 --> 00:01:53,243
‫hello,

35
00:01:54,180 --> 00:01:55,530
‫give it a safe.

36
00:01:55,530 --> 00:01:59,160
‫And then let's open up the integrated terminal

37
00:01:59,160 --> 00:02:02,430
‫so that we can start up this app.

38
00:02:02,430 --> 00:02:05,130
‫Just make sure that you are in the correct folder here.

39
00:02:05,130 --> 00:02:08,130
‫And then just type npm

40
00:02:08,130 --> 00:02:09,390
‫start

41
00:02:09,390 --> 00:02:13,530
‫which should then open a new tab over here.

42
00:02:13,530 --> 00:02:15,390
‫So let's wait for that.

43
00:02:15,390 --> 00:02:16,860
‫And indeed,

44
00:02:16,860 --> 00:02:17,733
‫here it is.

45
00:02:19,800 --> 00:02:21,990
‫And yeah, we got our hello

46
00:02:21,990 --> 00:02:25,080
‫which is nicely centered and that is because

47
00:02:25,080 --> 00:02:29,160
‫of the CSS that I provided and which is

48
00:02:29,160 --> 00:02:30,060
‫as always

49
00:02:30,060 --> 00:02:33,810
‫automatically included right here already.

50
00:02:33,810 --> 00:02:37,830
‫So index dot JS is importing our index dot CSS.

51
00:02:37,830 --> 00:02:41,590
‫And so that's why these styles are now automatically applied

52
00:02:46,110 --> 00:02:47,730
‫Now back here in our code

53
00:02:47,730 --> 00:02:50,550
‫we see that we have this initial friends array

54
00:02:50,550 --> 00:02:54,420
‫which as always is simply an array of objects.

55
00:02:54,420 --> 00:02:56,400
‫And in this case of some friends

56
00:02:56,400 --> 00:02:58,950
‫where each of them has an ID, a name,

57
00:02:58,950 --> 00:03:02,070
‫an image, which is coming from this URL here.

58
00:03:02,070 --> 00:03:04,540
‫And then the balance that we saw before

59
00:03:05,580 --> 00:03:08,070
‫and more about what these numbers here mean, uh,

60
00:03:08,070 --> 00:03:09,480
‫in a minute.

61
00:03:09,480 --> 00:03:10,410
‫But for now

62
00:03:10,410 --> 00:03:14,403
‫let's then start building that list of friends component.

63
00:03:16,140 --> 00:03:19,500
‫And here let's again build all the components right

64
00:03:19,500 --> 00:03:21,300
‫into just one file so

65
00:03:21,300 --> 00:03:23,823
‫that we don't have to jump around all the time.

66
00:03:25,140 --> 00:03:25,990
‫So friends

67
00:03:26,910 --> 00:03:27,743
‫list.

68
00:03:30,540 --> 00:03:32,850
‫And then here, let's return a list

69
00:03:32,850 --> 00:03:36,660
‫which for now will only contain list.

70
00:03:36,660 --> 00:03:41,370
‫And so now we will then include this component right here

71
00:03:41,370 --> 00:03:42,203
‫in the app.

72
00:03:44,790 --> 00:03:46,740
‫So friends list and

73
00:03:46,740 --> 00:03:48,120
‫no props.

74
00:03:48,120 --> 00:03:51,240
‫And here we will now place this

75
00:03:51,240 --> 00:03:52,710
‫into

76
00:03:52,710 --> 00:03:53,700
‫this div with

77
00:03:53,700 --> 00:03:54,533
‫a class name

78
00:03:54,533 --> 00:03:55,560
‫of app

79
00:03:55,560 --> 00:03:58,440
‫which has been provided in the CSS file.

80
00:03:58,440 --> 00:04:01,540
‫But then also this should be inside a sidebar

81
00:04:02,550 --> 00:04:04,050
‫so another div

82
00:04:04,050 --> 00:04:05,110
‫class name

83
00:04:06,300 --> 00:04:07,173
‫sidebar.

84
00:04:11,970 --> 00:04:16,020
‫Okay, as always, it's a good idea to have the

85
00:04:16,020 --> 00:04:17,700
‫terminal open.

86
00:04:17,700 --> 00:04:21,480
‫And for now, all I'm doing here is to inspect the layout

87
00:04:21,480 --> 00:04:23,010
‫basically.

88
00:04:23,010 --> 00:04:25,170
‫So here is that div with the app

89
00:04:25,170 --> 00:04:27,270
‫which you can see is a grid container.

90
00:04:27,270 --> 00:04:29,550
‫And then we have the sidebar.

91
00:04:29,550 --> 00:04:32,250
‫And in there we have the UL, which you can also

92
00:04:32,250 --> 00:04:35,043
‫see is automatically a flex container.

93
00:04:37,860 --> 00:04:41,100
‫So all this layout stuff, of course I already did it

94
00:04:41,100 --> 00:04:45,210
‫in advance so that we can focus exclusively on React

95
00:04:45,210 --> 00:04:48,630
‫but when you build your own applications in the future, then

96
00:04:48,630 --> 00:04:51,570
‫of course you'll have to do all of that as well.

97
00:04:51,570 --> 00:04:55,770
‫But since this is not a CSS course, well, I already

98
00:04:55,770 --> 00:04:59,463
‫wrote it beforehand so that this is a lot faster.

99
00:05:00,900 --> 00:05:05,160
‫But anyway, let's now here actually render these friends

100
00:05:05,160 --> 00:05:07,263
‫that are in this array right here.

101
00:05:08,430 --> 00:05:12,790
‫So let's for now create a variable called friends

102
00:05:15,150 --> 00:05:18,870
‫which we will simply set to the initial friends.

103
00:05:18,870 --> 00:05:21,510
‫And later on we will then change this here.

104
00:05:21,510 --> 00:05:25,620
‫But for now, this is the array that we want to render.

105
00:05:25,620 --> 00:05:27,210
‫So,

106
00:05:27,210 --> 00:05:28,500
‫let's say

107
00:05:28,500 --> 00:05:29,370
‫friends

108
00:05:29,370 --> 00:05:30,270
‫dot

109
00:05:30,270 --> 00:05:31,230
‫map.

110
00:05:31,230 --> 00:05:34,713
‫And by now you should be pretty familiar with this syntax.

111
00:05:36,270 --> 00:05:38,730
‫So each of the objects

112
00:05:38,730 --> 00:05:39,990
‫is a friend.

113
00:05:39,990 --> 00:05:43,320
‫And then for now, let's just render a list element.

114
00:05:43,320 --> 00:05:44,890
‫And then simply here

115
00:05:46,740 --> 00:05:48,060
‫with friend

116
00:05:48,060 --> 00:05:49,383
‫dot name.

117
00:05:50,340 --> 00:05:54,210
‫And indeed, immediately we get Clark, Sarah, and

118
00:05:54,210 --> 00:05:55,590
‫Anthony.

119
00:05:55,590 --> 00:05:56,730
‫So those are our

120
00:05:56,730 --> 00:05:57,813
‫three friends,

121
00:05:59,490 --> 00:06:01,110
‫at least the ones that we want to

122
00:06:01,110 --> 00:06:04,740
‫share a meal with here in this example.

123
00:06:04,740 --> 00:06:05,970
‫Now, we could

124
00:06:05,970 --> 00:06:10,530
‫of course write the JSX right here inside this loop,

125
00:06:10,530 --> 00:06:14,610
‫but since we will have a lot of code for each of the friends

126
00:06:14,610 --> 00:06:18,060
‫we should actually move that into a separate component.

127
00:06:18,060 --> 00:06:20,343
‫And so let's do that,

128
00:06:21,780 --> 00:06:23,613
‫and simply call it friend.

129
00:06:24,930 --> 00:06:26,703
‫Well, not like this.

130
00:06:27,780 --> 00:06:29,730
‫And so this friend should then probably

131
00:06:29,730 --> 00:06:34,110
‫receive the current friend object, right?

132
00:06:34,110 --> 00:06:37,503
‫And so therefore we accept that here as a prop,

133
00:06:39,840 --> 00:06:40,673
‫okay?

134
00:06:40,673 --> 00:06:43,680
‫And now basically we can move that

135
00:06:43,680 --> 00:06:44,513
‫here.

136
00:06:47,040 --> 00:06:50,940
‫And then here what we want to render is that friend and

137
00:06:50,940 --> 00:06:53,640
‫into that friend we pass the

138
00:06:53,640 --> 00:06:55,140
‫friend prop

139
00:06:55,140 --> 00:06:56,100
‫with the value

140
00:06:56,100 --> 00:06:57,423
‫of friend,

141
00:06:59,430 --> 00:07:00,630
‫close it down.

142
00:07:00,630 --> 00:07:04,890
‫And then we should also of course specify the key prop.

143
00:07:04,890 --> 00:07:07,890
‫So this unique value that each of the elements

144
00:07:07,890 --> 00:07:10,080
‫in a list needs to have.

145
00:07:10,080 --> 00:07:12,720
‫And so for that, we actually have

146
00:07:12,720 --> 00:07:13,553
‫friend

147
00:07:14,490 --> 00:07:15,323
‫dot

148
00:07:15,323 --> 00:07:16,710
‫ID.

149
00:07:16,710 --> 00:07:20,400
‫And so as we reload, it looks exactly the same as before

150
00:07:20,400 --> 00:07:24,090
‫but we have each friend, inside its own component.

151
00:07:24,090 --> 00:07:28,470
‫And so then we start seeing here our component tree.

152
00:07:28,470 --> 00:07:32,883
‫Here we still have the error from before, but now it's gone.

153
00:07:34,080 --> 00:07:36,300
‫So we already have a small component tree

154
00:07:36,300 --> 00:07:39,960
‫with app friends list, and then in there each friend

155
00:07:39,960 --> 00:07:41,133
‫with their unique key.

156
00:07:42,480 --> 00:07:47,040
‫But now let's keep moving here and let's actually build

157
00:07:47,040 --> 00:07:48,810
‫this list item here.

158
00:07:48,810 --> 00:07:50,510
‫So to make it a bit more complete.

159
00:07:51,450 --> 00:07:54,960
‫So first we have the image of the friend,

160
00:07:54,960 --> 00:07:56,400
‫which is

161
00:07:56,400 --> 00:07:57,233
‫at

162
00:07:58,260 --> 00:07:59,940
‫friend dot

163
00:07:59,940 --> 00:08:00,840
‫image.

164
00:08:00,840 --> 00:08:04,890
‫And then we should also not forget the alt tech.

165
00:08:04,890 --> 00:08:08,463
‫So here, let's just use the name of the friend,

166
00:08:12,120 --> 00:08:13,020
‫okay.

167
00:08:13,020 --> 00:08:16,620
‫Then we're using an H three element for the name

168
00:08:16,620 --> 00:08:17,453
‫of the friend.

169
00:08:21,750 --> 00:08:26,460
‫And so that's looking already close to the demo right here.

170
00:08:26,460 --> 00:08:28,860
‫The only thing that's missing is this button.

171
00:08:28,860 --> 00:08:33,540
‫And then this text here, let me actually just reload this so

172
00:08:33,540 --> 00:08:35,820
‫that you can see that we have basically these three

173
00:08:35,820 --> 00:08:37,290
‫colors here.

174
00:08:37,290 --> 00:08:40,890
‫So whenever you owe your friend, then the text will be red.

175
00:08:40,890 --> 00:08:42,990
‫If they owe you, it will be green,

176
00:08:42,990 --> 00:08:46,890
‫and if you are even then there is no styling applied.

177
00:08:46,890 --> 00:08:49,320
‫So, let's implement it here.

178
00:08:49,320 --> 00:08:53,190
‫And so let's see what these numbers here actually mean.

179
00:08:53,190 --> 00:08:55,590
‫So here we have this balanced property.

180
00:08:55,590 --> 00:08:57,480
‫And if that's a negative value

181
00:08:57,480 --> 00:09:00,330
‫that means that you owe your friend.

182
00:09:00,330 --> 00:09:03,180
‫So in this case, you owe Clark seven.

183
00:09:03,180 --> 00:09:06,150
‫But if the balance between the two friends is positive

184
00:09:06,150 --> 00:09:09,663
‫like here, then that means that the friend owes you.

185
00:09:10,650 --> 00:09:13,590
‫And so let's now use that knowledge here to

186
00:09:13,590 --> 00:09:17,370
‫do this conditional styling and also this conditional text

187
00:09:17,370 --> 00:09:19,863
‫because they are in fact different.

188
00:09:20,820 --> 00:09:22,170
‫So let's do

189
00:09:22,170 --> 00:09:23,820
‫friend

190
00:09:23,820 --> 00:09:25,110
‫dot

191
00:09:25,110 --> 00:09:26,400
‫balance.

192
00:09:26,400 --> 00:09:28,743
‫So if that is negative,

193
00:09:31,080 --> 00:09:33,240
‫then let's render a paragraph

194
00:09:33,240 --> 00:09:35,430
‫with the class name of

195
00:09:35,430 --> 00:09:36,263
‫red

196
00:09:37,530 --> 00:09:38,363
‫saying

197
00:09:38,363 --> 00:09:39,196
‫you

198
00:09:40,530 --> 00:09:42,090
‫owe, and then the name

199
00:09:42,090 --> 00:09:42,963
‫of the friend,

200
00:09:44,070 --> 00:09:44,903
‫dot

201
00:09:44,903 --> 00:09:45,736
‫name

202
00:09:46,830 --> 00:09:48,270
‫and then

203
00:09:48,270 --> 00:09:50,190
‫friend dot

204
00:09:50,190 --> 00:09:51,023
‫balance,

205
00:09:52,230 --> 00:09:53,730
‫and then Euro

206
00:09:53,730 --> 00:09:55,840
‫which I don't really know how to type

207
00:09:56,940 --> 00:09:59,250
‫on the US keyboard that I'm using.

208
00:09:59,250 --> 00:10:01,350
‫And so let's just copy it from here.

209
00:10:01,350 --> 00:10:04,060
‫Or of course you can also use the dollar sign

210
00:10:05,190 --> 00:10:06,450
‫like this

211
00:10:06,450 --> 00:10:08,340
‫so that doesn't really matter.

212
00:10:08,340 --> 00:10:11,913
‫But what matters is that now we have this text here.

213
00:10:12,750 --> 00:10:15,540
‫Here, we just want to remove that negative sign.

214
00:10:15,540 --> 00:10:16,750
‫So let's actually do

215
00:10:19,260 --> 00:10:20,093
‫math

216
00:10:20,093 --> 00:10:21,690
‫dot apps,

217
00:10:21,690 --> 00:10:22,523
‫which stands for

218
00:10:22,523 --> 00:10:23,370
‫absolute

219
00:10:23,370 --> 00:10:24,573
‫and that's a bit nicer.

220
00:10:25,710 --> 00:10:29,223
‫Okay? And now let's copy this three times.

221
00:10:30,420 --> 00:10:33,270
‫And so here I decided to basically use three

222
00:10:33,270 --> 00:10:35,490
‫times the end operator

223
00:10:35,490 --> 00:10:39,360
‫for conditional rendering instead of a nested ternary.

224
00:10:39,360 --> 00:10:42,270
‫So we could also have done this condition right here

225
00:10:42,270 --> 00:10:43,890
‫with a ternary operator.

226
00:10:43,890 --> 00:10:45,570
‫And then in the ELs branch

227
00:10:45,570 --> 00:10:47,760
‫we could have another ternary operator

228
00:10:47,760 --> 00:10:50,040
‫for these two cases here.

229
00:10:50,040 --> 00:10:54,060
‫So friend's balance greater than zero

230
00:10:54,060 --> 00:10:54,960
‫or

231
00:10:54,960 --> 00:10:56,190
‫equal zero.

232
00:10:56,190 --> 00:10:59,970
‫But since these three cases are mutually exclusive

233
00:10:59,970 --> 00:11:03,960
‫it's easier to simply have three times this end.

234
00:11:03,960 --> 00:11:06,543
‫And so then only one of these will apply.

235
00:11:07,650 --> 00:11:09,870
‫But anyway, here,

236
00:11:09,870 --> 00:11:11,310
‫it is green

237
00:11:11,310 --> 00:11:13,560
‫and here we have no class at all.

238
00:11:13,560 --> 00:11:15,843
‫So no special styling.

239
00:11:17,910 --> 00:11:20,290
‫And here, let's say you and

240
00:11:21,360 --> 00:11:22,300
‫your friend

241
00:11:23,730 --> 00:11:24,600
‫are

242
00:11:24,600 --> 00:11:25,433
‫even,

243
00:11:26,730 --> 00:11:27,563
‫okay.

244
00:11:27,563 --> 00:11:30,060
‫And now here we need to also change the text

245
00:11:30,060 --> 00:11:31,863
‫to your friend,

246
00:11:34,680 --> 00:11:36,060
‫owes you

247
00:11:36,060 --> 00:11:37,200
‫twenty Euros.

248
00:11:37,200 --> 00:11:40,293
‫And so that's in fact exactly what we have here.

249
00:11:41,610 --> 00:11:44,070
‫Now all we are missing is the button here

250
00:11:44,070 --> 00:11:47,850
‫on the right side, and that's easy enough.

251
00:11:47,850 --> 00:11:50,700
‫Just button with the class name

252
00:11:50,700 --> 00:11:51,580
‫of button

253
00:11:52,620 --> 00:11:54,210
‫and then

254
00:11:54,210 --> 00:11:55,770
‫select.

255
00:11:55,770 --> 00:11:57,030
‫And there we go.

256
00:11:57,030 --> 00:11:58,983
‫That's our list of friends.