1
00:00:01,140 --> 00:00:02,640
‫Now before we go learn

2
00:00:02,640 --> 00:00:05,340
‫about how React works behind the scenes,

3
00:00:05,340 --> 00:00:09,270
‫let's quickly set up and walk through a small demo project

4
00:00:09,270 --> 00:00:13,053
‫that we're gonna need in a few lectures of this section.

5
00:00:14,850 --> 00:00:18,480
‫Now, this time around, we will do things a bit differently.

6
00:00:18,480 --> 00:00:23,370
‫So we will not create a new project using Create-React-App.

7
00:00:23,370 --> 00:00:25,470
‫Instead, in the starter files,

8
00:00:25,470 --> 00:00:28,770
‫I already basically have that entire project

9
00:00:28,770 --> 00:00:30,690
‫for you to copy.

10
00:00:30,690 --> 00:00:33,000
‫So open up the starter files,

11
00:00:33,000 --> 00:00:37,140
‫and then here in this folder called how-react-works,

12
00:00:37,140 --> 00:00:39,783
‫let's copy this entire starter folder.

13
00:00:41,610 --> 00:00:44,700
‫So copy all of this right into the folder

14
00:00:44,700 --> 00:00:47,310
‫where we are building our project

15
00:00:47,310 --> 00:00:51,253
‫and so then simply call it how-react-works.

16
00:00:54,390 --> 00:00:57,840
‫So you see that here we actually have the source folder,

17
00:00:57,840 --> 00:00:59,580
‫we have the public folder,

18
00:00:59,580 --> 00:01:01,680
‫and also these other files

19
00:01:01,680 --> 00:01:06,000
‫that are always automatically created by Create-React-App.

20
00:01:06,000 --> 00:01:08,490
‫But again, this time we are not doing that

21
00:01:08,490 --> 00:01:12,630
‫because, well, everything has been done already for us.

22
00:01:12,630 --> 00:01:17,550
‫And so now all we have to do is to take this folder,

23
00:01:17,550 --> 00:01:21,870
‫open it up in VS Code, like this,

24
00:01:21,870 --> 00:01:24,813
‫and then we need to install all the packages.

25
00:01:26,280 --> 00:01:28,020
‫So the node modules folder,

26
00:01:28,020 --> 00:01:32,280
‫which is the folder where all the NPM packages are installed

27
00:01:32,280 --> 00:01:34,500
‫is, of course, not here.

28
00:01:34,500 --> 00:01:39,120
‫So all the libraries like React, ReactDOM, and so on,

29
00:01:39,120 --> 00:01:40,620
‫they are not here.

30
00:01:40,620 --> 00:01:42,330
‫So we need to install them,

31
00:01:42,330 --> 00:01:44,823
‫but that's fortunately very easy.

32
00:01:46,320 --> 00:01:48,873
‫So let's open up our terminal here.

33
00:01:50,220 --> 00:01:52,410
‫Ah, it's here in View.

34
00:01:52,410 --> 00:01:55,830
‫And, oh, that's really small here.

35
00:01:55,830 --> 00:01:59,550
‫And as always, make sure that you are in the correct folder.

36
00:01:59,550 --> 00:02:03,540
‫And then all we have to do is to say npm install,

37
00:02:03,540 --> 00:02:06,153
‫or npm i for short.

38
00:02:07,020 --> 00:02:10,710
‫So hit Enter, and then this will install all the packages

39
00:02:10,710 --> 00:02:14,670
‫that are necessary for this Create-React-Application.

40
00:02:14,670 --> 00:02:16,380
‫So it will get this information

41
00:02:16,380 --> 00:02:19,503
‫here from this package.json file.

42
00:02:21,300 --> 00:02:24,540
‫Okay, and we see that it's already done,

43
00:02:24,540 --> 00:02:28,350
‫and so we can now start this project.

44
00:02:28,350 --> 00:02:30,573
‫So just write npm start.

45
00:02:31,770 --> 00:02:33,990
‫And then in my case here, it's asking me

46
00:02:33,990 --> 00:02:37,110
‫if I want to run the app on another port.

47
00:02:37,110 --> 00:02:39,540
‫And so that's because I already had something

48
00:02:39,540 --> 00:02:42,150
‫running here on 3000.

49
00:02:42,150 --> 00:02:43,950
‫So that's basically the demo project.

50
00:02:43,950 --> 00:02:46,263
‫But let's close that for now, actually.

51
00:02:49,200 --> 00:02:51,210
‫So just inspecting this,

52
00:02:51,210 --> 00:02:56,210
‫and then let's open up our app.js file as always.

53
00:02:58,080 --> 00:03:00,750
‫So this time around, in this section,

54
00:03:00,750 --> 00:03:03,480
‫I gave you this already started project

55
00:03:03,480 --> 00:03:05,790
‫so that you can now get the experience

56
00:03:05,790 --> 00:03:07,440
‫of looking at a project

57
00:03:07,440 --> 00:03:11,520
‫where someone already started writing some code.

58
00:03:11,520 --> 00:03:13,533
‫So that's exactly what we have here.

59
00:03:14,580 --> 00:03:17,460
‫So some code here has already been written

60
00:03:17,460 --> 00:03:19,020
‫and so you can now pretend

61
00:03:19,020 --> 00:03:22,920
‫that basically some other developer on your team wrote this.

62
00:03:22,920 --> 00:03:24,870
‫So it's extremely important

63
00:03:24,870 --> 00:03:28,500
‫that you'll be able to understand other developer's code,

64
00:03:28,500 --> 00:03:30,870
‫especially when you work on a team

65
00:03:30,870 --> 00:03:34,080
‫as a professional React developer someday.

66
00:03:34,080 --> 00:03:37,110
‫And so, before we now start the section,

67
00:03:37,110 --> 00:03:40,470
‫I just want us to quickly walk through this code here

68
00:03:40,470 --> 00:03:43,650
‫so I can explain you how it works on a high level.

69
00:03:43,650 --> 00:03:45,390
‫And then by doing so,

70
00:03:45,390 --> 00:03:48,360
‫you can see how we can effectively read code

71
00:03:48,360 --> 00:03:50,283
‫that we didn't write ourselves.

72
00:03:51,540 --> 00:03:54,330
‫So let's start in the app component here,

73
00:03:54,330 --> 00:03:58,500
‫and all that one does is to include the tabbed component.

74
00:03:58,500 --> 00:04:01,170
‫And it passes the content in there

75
00:04:01,170 --> 00:04:04,380
‫which is simply this array of objects here.

76
00:04:04,380 --> 00:04:05,553
‫So, pretty standard.

77
00:04:07,080 --> 00:04:10,590
‫Then the tabbed component has some state variable here

78
00:04:10,590 --> 00:04:12,840
‫which indicates the current tab.

79
00:04:12,840 --> 00:04:16,020
‫So it seems like this is a number.

80
00:04:16,020 --> 00:04:20,850
‫And then down here, we can see that the active tab state

81
00:04:20,850 --> 00:04:24,270
‫is used to render this tab content component

82
00:04:24,270 --> 00:04:27,780
‫using as the content, the content array,

83
00:04:27,780 --> 00:04:31,530
‫at the position of the currently active tab.

84
00:04:31,530 --> 00:04:35,280
‫So this at here is basically modern JavaScript

85
00:04:35,280 --> 00:04:38,520
‫which is the same as this here,

86
00:04:38,520 --> 00:04:41,550
‫so basically reading something out of an array,

87
00:04:41,550 --> 00:04:45,990
‫and that array, again, is this content array up here.

88
00:04:45,990 --> 00:04:49,380
‫So for example, if the state here was two,

89
00:04:49,380 --> 00:04:54,380
‫then the content here in the tab would be zero, one, two,

90
00:04:54,720 --> 00:04:56,823
‫so it would be this object right here.

91
00:04:58,560 --> 00:05:00,840
‫All right, let's just put this back here

92
00:05:00,840 --> 00:05:02,703
‫to this more modern form.

93
00:05:03,750 --> 00:05:04,920
‫And then let's check out

94
00:05:04,920 --> 00:05:07,293
‫what this tab content here actually is.

95
00:05:08,460 --> 00:05:11,100
‫And it's also always a good idea

96
00:05:11,100 --> 00:05:13,173
‫to take a look at the component tree.

97
00:05:14,730 --> 00:05:17,550
‫And so, let's make this here bigger.

98
00:05:17,550 --> 00:05:20,490
‫And so, indeed, we have the app, we have tabbed,

99
00:05:20,490 --> 00:05:23,370
‫and then we have the tab content in there.

100
00:05:23,370 --> 00:05:25,560
‫And of course, we also have these four tabs,

101
00:05:25,560 --> 00:05:28,113
‫but we will leave them for a bit later.

102
00:05:29,430 --> 00:05:33,150
‫So in here, in the tab content, let's see what we have.

103
00:05:33,150 --> 00:05:34,530
‫So we get the tabbed item,

104
00:05:34,530 --> 00:05:37,713
‫which is basically the content that we're going to use here.

105
00:05:39,030 --> 00:05:40,197
‫So we can double-click on that

106
00:05:40,197 --> 00:05:42,990
‫and then we see where it has been used.

107
00:05:42,990 --> 00:05:47,990
‫So we see that we use item.summary and item.details.

108
00:05:48,180 --> 00:05:51,330
‫Then we also see that we have two state variables here,

109
00:05:51,330 --> 00:05:54,870
‫so that's showDetails and setShowDetails.

110
00:05:54,870 --> 00:05:56,400
‫And again, by double-clicking,

111
00:05:56,400 --> 00:05:58,653
‫VS Code will then highlight all of them.

112
00:05:59,550 --> 00:06:00,870
‫So here, we can see that we're doing

113
00:06:00,870 --> 00:06:04,080
‫some conditional rendering with this showDetails.

114
00:06:04,080 --> 00:06:07,110
‫And so, yeah, by default this is true.

115
00:06:07,110 --> 00:06:08,970
‫And then only in that case,

116
00:06:08,970 --> 00:06:11,670
‫we are displaying the item details.

117
00:06:11,670 --> 00:06:14,940
‫And then we change that state down here

118
00:06:14,940 --> 00:06:19,020
‫where we have setShowDetails in this button.

119
00:06:19,020 --> 00:06:21,660
‫And so, this here is exactly that button.

120
00:06:21,660 --> 00:06:25,350
‫So if we click that, then here, the text disappears.

121
00:06:25,350 --> 00:06:28,143
‫So this paragraph right here disappears.

122
00:06:29,430 --> 00:06:33,000
‫Right, then we also have these two buttons down here

123
00:06:33,000 --> 00:06:36,240
‫but we see that they have no event handler attached.

124
00:06:36,240 --> 00:06:39,033
‫So if we click here, then nothing happens.

125
00:06:40,290 --> 00:06:43,080
‫Then, finally we also have those hearts here,

126
00:06:43,080 --> 00:06:48,060
‫and that's why we have this second state of likes.

127
00:06:48,060 --> 00:06:51,030
‫So you see that likes is indeed used here.

128
00:06:51,030 --> 00:06:54,990
‫And then this button here has the handleInc function,

129
00:06:54,990 --> 00:06:56,190
‫so this first one here,

130
00:06:56,190 --> 00:06:59,250
‫while the second button again has no handler.

131
00:06:59,250 --> 00:07:00,720
‫So here, nothing happens.

132
00:07:00,720 --> 00:07:02,940
‫But here, each time we click,

133
00:07:02,940 --> 00:07:05,940
‫basically one like is added there.

134
00:07:05,940 --> 00:07:09,573
‫And so that's because of the handleInc function.

135
00:07:10,620 --> 00:07:12,270
‫So what this one does

136
00:07:12,270 --> 00:07:15,330
‫is simply take the current likes and adding one,

137
00:07:15,330 --> 00:07:18,513
‫and then setting that as the new likes state.

138
00:07:19,380 --> 00:07:22,620
‫Now notice how here we didn't use a callback function

139
00:07:22,620 --> 00:07:25,830
‫in order to set state based on the current state,

140
00:07:25,830 --> 00:07:27,990
‫but more about that later.

141
00:07:27,990 --> 00:07:31,440
‫So I think this component here is pretty clear.

142
00:07:31,440 --> 00:07:33,450
‫And so, let's now go back here

143
00:07:33,450 --> 00:07:37,053
‫and see what these tabs here actually are.

144
00:07:37,980 --> 00:07:40,950
‫So here we have these four tabs

145
00:07:40,950 --> 00:07:43,230
‫and notice how we are actually writing them

146
00:07:43,230 --> 00:07:44,850
‫one by one manually

147
00:07:44,850 --> 00:07:47,760
‫and not looping over some array.

148
00:07:47,760 --> 00:07:51,510
‫So our array has these three elements here.

149
00:07:51,510 --> 00:07:53,690
‫And so the first three elements...

150
00:07:54,870 --> 00:07:58,530
‫So these three are for those three objects

151
00:07:58,530 --> 00:08:02,220
‫and then we have another one where the number is three.

152
00:08:02,220 --> 00:08:05,190
‫But let's take a look at that a bit later.

153
00:08:05,190 --> 00:08:08,250
‫So here we have the num as a prop,

154
00:08:08,250 --> 00:08:12,150
‫we have the active tab, and we have the onClick prop.

155
00:08:12,150 --> 00:08:14,670
‫And as onClick, we are simply passing

156
00:08:14,670 --> 00:08:18,570
‫the setActiveTab state setter function.

157
00:08:18,570 --> 00:08:22,083
‫Now let's go here into the tab and see what happens there.

158
00:08:23,490 --> 00:08:26,460
‫So basically, a tab is just a button,

159
00:08:26,460 --> 00:08:29,010
‫so it's these buttons right here.

160
00:08:29,010 --> 00:08:31,590
‫And what happens when we click on this button

161
00:08:31,590 --> 00:08:33,930
‫is that the onClick function is called

162
00:08:33,930 --> 00:08:35,643
‫with the current number.

163
00:08:36,480 --> 00:08:38,280
‫So let's then actually go back

164
00:08:38,280 --> 00:08:40,110
‫to where these props are passed

165
00:08:40,110 --> 00:08:42,353
‫so that we can understand what the onClick

166
00:08:42,353 --> 00:08:44,373
‫and the num actually are.

167
00:08:45,450 --> 00:08:49,020
‫So onClick is setActiveTab,

168
00:08:49,020 --> 00:08:51,570
‫and num are these numbers here.

169
00:08:51,570 --> 00:08:54,300
‫And so basically, when we click on this first tab,

170
00:08:54,300 --> 00:08:58,590
‫it means that the active tab will get set to zero.

171
00:08:58,590 --> 00:09:00,090
‫And the same down here.

172
00:09:00,090 --> 00:09:02,220
‫So when we click on this tab right here,

173
00:09:02,220 --> 00:09:05,580
‫then the active tab will get set to one,

174
00:09:05,580 --> 00:09:07,950
‫which is exactly what we have here.

175
00:09:07,950 --> 00:09:11,610
‫Then based on this date, as I explained in the beginning,

176
00:09:11,610 --> 00:09:15,060
‫we see that the TabContent will be rendered,

177
00:09:15,060 --> 00:09:19,770
‫at least if that value is less or equal to.

178
00:09:19,770 --> 00:09:23,880
‫So if it's greater than two, which happens in this case,

179
00:09:23,880 --> 00:09:27,510
‫then the different content will be displayed.

180
00:09:27,510 --> 00:09:29,820
‫So let's check that out.

181
00:09:29,820 --> 00:09:34,050
‫And so this one is simply this one div

182
00:09:34,050 --> 00:09:37,661
‫which has a simple h4.

183
00:09:37,661 --> 00:09:39,780
‫Okay, so again, basically,

184
00:09:39,780 --> 00:09:44,010
‫the goal of this other tab right here is just to display

185
00:09:44,010 --> 00:09:46,623
‫this DifferentContent component right here.

186
00:09:47,640 --> 00:09:49,800
‫So let's see that in action.

187
00:09:49,800 --> 00:09:52,920
‫And so, indeed, when we click on Tab 2,

188
00:09:52,920 --> 00:09:55,170
‫you see that the content here changed.

189
00:09:55,170 --> 00:09:57,600
‫And so the title here and the text

190
00:09:57,600 --> 00:10:01,350
‫are exactly what we have here in this second object.

191
00:10:01,350 --> 00:10:03,030
‫And then the same here,

192
00:10:03,030 --> 00:10:06,630
‫so here we now have the third object,

193
00:10:06,630 --> 00:10:08,460
‫so the title and the text.

194
00:10:08,460 --> 00:10:11,370
‫And finally the last one is for,

195
00:10:11,370 --> 00:10:13,470
‫well, for that different content.

196
00:10:13,470 --> 00:10:14,940
‫And you saw that down here,

197
00:10:14,940 --> 00:10:17,103
‫actually, the component tree changed.

198
00:10:18,780 --> 00:10:20,490
‫Now, right, and here,

199
00:10:20,490 --> 00:10:24,210
‫if we wrote any other number, like zero,

200
00:10:24,210 --> 00:10:28,140
‫then, of course, you see that the number changed here.

201
00:10:28,140 --> 00:10:31,710
‫So that is always the number, plus one,

202
00:10:31,710 --> 00:10:35,040
‫and we get then the very first object.

203
00:10:35,040 --> 00:10:38,730
‫So now it says, "React as a library for building UIs,"

204
00:10:38,730 --> 00:10:40,440
‫so just like here.

205
00:10:40,440 --> 00:10:43,650
‫And also both of them are now marked active,

206
00:10:43,650 --> 00:10:46,563
‫which also happens inside that tab component.

207
00:10:48,060 --> 00:10:51,483
‫But of course, let's put it back to two.

208
00:10:52,320 --> 00:10:54,480
‫And with this, I think it is pretty clear

209
00:10:54,480 --> 00:10:57,840
‫what this very small demo application does.

210
00:10:57,840 --> 00:11:00,240
‫But before you move on to the next lecture,

211
00:11:00,240 --> 00:11:02,520
‫make sure that you take some more time

212
00:11:02,520 --> 00:11:04,530
‫to analyze this code on your own

213
00:11:04,530 --> 00:11:08,133
‫so that you truly understand what exactly is happening here.