1
00:00:01,080 --> 00:00:03,780
‫Let's start building a brand new app

2
00:00:03,780 --> 00:00:07,260
‫that will hopefully show you how extremely helpful

3
00:00:07,260 --> 00:00:09,513
‫the useReducer Hook can be.

4
00:00:10,920 --> 00:00:14,490
‫And so this is the application that we are going to build

5
00:00:14,490 --> 00:00:17,340
‫and it's called "The React Quiz."

6
00:00:17,340 --> 00:00:21,060
‫So as the name says, this is basically a very simple quiz

7
00:00:21,060 --> 00:00:23,970
‫about some React concepts.

8
00:00:23,970 --> 00:00:26,190
‫So this starts by actually loading

9
00:00:26,190 --> 00:00:29,040
‫the questions from a fake API.

10
00:00:29,040 --> 00:00:33,180
‫And so at this point, we have received those 50 questions,

11
00:00:33,180 --> 00:00:36,033
‫and so then we can start the quiz right here.

12
00:00:36,930 --> 00:00:38,610
‫So here then, we have the question

13
00:00:38,610 --> 00:00:40,890
‫with the four different options,

14
00:00:40,890 --> 00:00:43,200
‫and up here, we can see our progress

15
00:00:43,200 --> 00:00:47,220
‫and the number of points that we have won so far.

16
00:00:47,220 --> 00:00:51,780
‫So here then, we can of course click on the correct option.

17
00:00:51,780 --> 00:00:55,410
‫In this case, React is the most popular framework.

18
00:00:55,410 --> 00:00:59,400
‫And so then immediately, it is marked as correct.

19
00:00:59,400 --> 00:01:02,370
‫And also, the next button here appears

20
00:01:02,370 --> 00:01:05,100
‫so that we can move to the next one.

21
00:01:05,100 --> 00:01:08,460
‫And now this time, let's choose a wrong option.

22
00:01:08,460 --> 00:01:10,650
‫And so of course, the correct one

23
00:01:10,650 --> 00:01:13,173
‫is still marked here as correct.

24
00:01:14,130 --> 00:01:17,580
‫Now of course, I will not go through the entire quiz here,

25
00:01:17,580 --> 00:01:20,550
‫but we will see what the end result,

26
00:01:20,550 --> 00:01:24,106
‫so when we reach the end of the quiz, looks like.

27
00:01:24,106 --> 00:01:27,990
‫Now, just notice that here, we also have a timer running,

28
00:01:27,990 --> 00:01:30,330
‫and so when this timer finishes,

29
00:01:30,330 --> 00:01:34,470
‫then we automatically lose or we actually finish

30
00:01:34,470 --> 00:01:36,960
‫the quiz by then automatically

31
00:01:36,960 --> 00:01:39,660
‫and we only get the points that we have gathered

32
00:01:39,660 --> 00:01:40,833
‫up until that point.

33
00:01:42,150 --> 00:01:45,360
‫So all the state that we see here on the screen,

34
00:01:45,360 --> 00:01:49,770
‫so which question was selected, the number of points,

35
00:01:49,770 --> 00:01:53,640
‫which question we are right now, the timer,

36
00:01:53,640 --> 00:01:56,160
‫and really, all the state is just managed

37
00:01:56,160 --> 00:01:58,530
‫by one big reducer,

38
00:01:58,530 --> 00:02:02,763
‫because that's what this section is all about, right?

39
00:02:03,750 --> 00:02:06,030
‫Now, in this lecture, all I want to do

40
00:02:06,030 --> 00:02:09,750
‫is to just set up here the app skeleton.

41
00:02:09,750 --> 00:02:12,030
‫So basically, just setting up the structure

42
00:02:12,030 --> 00:02:15,180
‫with the header and the app itself.

43
00:02:15,180 --> 00:02:16,890
‫And so then in the next lecture,

44
00:02:16,890 --> 00:02:19,470
‫we can start fetching the questions

45
00:02:19,470 --> 00:02:21,273
‫and start building the application.

46
00:02:22,650 --> 00:02:26,310
‫So we no longer need this component here.

47
00:02:26,310 --> 00:02:29,460
‫And instead, let's come back to App.

48
00:02:29,460 --> 00:02:32,913
‫And here, we then remove that date counter.

49
00:02:34,620 --> 00:02:35,453
‫Okay.

50
00:02:36,780 --> 00:02:41,677
‫So our parent div here will have the class name of app,

51
00:02:43,704 --> 00:02:47,790
‫and then inside that app, we will have a header.

52
00:02:47,790 --> 00:02:50,790
‫So basically, this part here with the logo

53
00:02:50,790 --> 00:02:53,193
‫and the name of the application.

54
00:02:54,180 --> 00:02:57,330
‫Now, as I said in one of the previous sections,

55
00:02:57,330 --> 00:03:02,010
‫we will now start to actually create one file per component,

56
00:03:02,010 --> 00:03:05,763
‫so making this project development a bit more real world.

57
00:03:07,260 --> 00:03:08,880
‫Now, in case of the header,

58
00:03:08,880 --> 00:03:12,600
‫I actually already created that component for us.

59
00:03:12,600 --> 00:03:15,510
‫So it's just this very simple component

60
00:03:15,510 --> 00:03:18,939
‫that doesn't even have any logic or any state

61
00:03:18,939 --> 00:03:22,110
‫and it doesn't even accept props.

62
00:03:22,110 --> 00:03:25,140
‫So it's just a very simple presentational component

63
00:03:25,140 --> 00:03:26,970
‫that has the image,

64
00:03:26,970 --> 00:03:30,270
‫so the logo and the title.

65
00:03:30,270 --> 00:03:32,793
‫And so let's include that here,

66
00:03:35,220 --> 00:03:36,243
‫just like this.

67
00:03:37,140 --> 00:03:40,930
‫And of course, we then need to import that component

68
00:03:42,780 --> 00:03:44,133
‫from that file.

69
00:03:46,200 --> 00:03:49,710
‫So in the current folder, and then header.

70
00:03:49,710 --> 00:03:50,913
‫And there we go.

71
00:03:52,110 --> 00:03:55,260
‫So there we have our header and then, here below that,

72
00:03:55,260 --> 00:03:57,840
‫we will have basically the main content.

73
00:03:57,840 --> 00:03:59,790
‫And so for that main content,

74
00:03:59,790 --> 00:04:02,463
‫let's create a main component.

75
00:04:03,930 --> 00:04:07,590
‫And before we do that, I will just write the markup here.

76
00:04:07,590 --> 00:04:11,040
‫So let's say that we want a main element

77
00:04:11,040 --> 00:04:14,523
‫with the class actually of main as well.

78
00:04:16,080 --> 00:04:20,430
‫And then for example, let's say we want a paragraph

79
00:04:20,430 --> 00:04:23,733
‫with the progress, let's say 1 or 15.

80
00:04:24,720 --> 00:04:27,030
‫So this is just some dummy content here.

81
00:04:27,030 --> 00:04:29,583
‫And then, the question itself.

82
00:04:30,810 --> 00:04:34,380
‫All right, so let's say that we just have this,

83
00:04:34,380 --> 00:04:39,380
‫but we want it to be not inside the main HTML element here,

84
00:04:39,660 --> 00:04:43,650
‫but instead, we want it to be inside its own component,

85
00:04:43,650 --> 00:04:47,880
‫so that then here, our app component stays nice and clean.

86
00:04:47,880 --> 00:04:50,640
‫So just having like different components,

87
00:04:50,640 --> 00:04:53,643
‫but not these elements with their class names.

88
00:04:54,570 --> 00:04:59,570
‫So let's then create a new file with a new component.

89
00:04:59,880 --> 00:05:03,870
‫So this one will be called Main.js,

90
00:05:03,870 --> 00:05:07,560
‫because Main will be the name of the component.

91
00:05:07,560 --> 00:05:10,110
‫And now let's actually, for the first time,

92
00:05:10,110 --> 00:05:12,660
‫use that snippet that I gave you

93
00:05:12,660 --> 00:05:15,840
‫at the very beginning of the course.

94
00:05:15,840 --> 00:05:17,640
‫So remember that.

95
00:05:17,640 --> 00:05:19,780
‫Let's come here to the user snippets

96
00:05:20,640 --> 00:05:22,923
‫and then it should be one of these.

97
00:05:23,940 --> 00:05:27,870
‫Yeah, so the snippet that I mean is the RFC snippet.

98
00:05:27,870 --> 00:05:30,210
‫And if, for some reason, you didn't add this

99
00:05:30,210 --> 00:05:33,300
‫to your own snippets at the beginning of the course,

100
00:05:33,300 --> 00:05:36,270
‫then you can just maybe copy the code from here

101
00:05:36,270 --> 00:05:39,390
‫or you can go back to that setup lecture

102
00:05:39,390 --> 00:05:41,340
‫at the beginning of the course,

103
00:05:41,340 --> 00:05:44,940
‫because again, we will now use that snippet

104
00:05:44,940 --> 00:05:47,310
‫and it will be extremely handy.

105
00:05:47,310 --> 00:05:52,310
‫So all we have to write is RFC, hit Enter, and bam,

106
00:05:53,130 --> 00:05:56,220
‫it creates a brand new component for us,

107
00:05:56,220 --> 00:05:59,130
‫even with the name of the file.

108
00:05:59,130 --> 00:06:01,800
‫So it got the name here from the file

109
00:06:01,800 --> 00:06:04,770
‫and then it accordingly named the component.

110
00:06:04,770 --> 00:06:06,510
‫And so now all we have to do

111
00:06:06,510 --> 00:06:10,590
‫is to change, right here, our markup.

112
00:06:10,590 --> 00:06:14,070
‫Now here, we want to change from a div to a main element.

113
00:06:14,070 --> 00:06:17,730
‫And so remember how many times it was quite annoying

114
00:06:17,730 --> 00:06:22,200
‫that we had to change this opening tag and the closing tag.

115
00:06:22,200 --> 00:06:27,200
‫And so to fix that, let's install this extension right here.

116
00:06:27,210 --> 00:06:29,520
‫So Auto Rename Tag.

117
00:06:29,520 --> 00:06:31,350
‫So I already have it installed,

118
00:06:31,350 --> 00:06:33,330
‫but just go ahead and do that.

119
00:06:33,330 --> 00:06:37,980
‫And so then when I change this div to Main,

120
00:06:37,980 --> 00:06:41,073
‫then you see that both of them change at the same time.

121
00:06:42,480 --> 00:06:45,976
‫So here, the class name again of Main.

122
00:06:45,976 --> 00:06:50,460
‫And now here, what will we place as the content?

123
00:06:50,460 --> 00:06:54,690
‫Well, basically here, we want this content to stay

124
00:06:54,690 --> 00:06:55,920
‫in this component,

125
00:06:55,920 --> 00:06:58,890
‫so we want to just pass it into the main.

126
00:06:58,890 --> 00:07:01,623
‫And so for that, we use the children prop.

127
00:07:03,150 --> 00:07:04,170
‫Remember?

128
00:07:04,170 --> 00:07:07,233
‫So basically doing component composition here.

129
00:07:08,494 --> 00:07:11,850
‫And we have done this multiple times already at this point,

130
00:07:11,850 --> 00:07:13,473
‫so this should be nothing new.

131
00:07:14,340 --> 00:07:17,458
‫And so with this, all we have to do is to replace

132
00:07:17,458 --> 00:07:20,973
‫this right here with Main.

133
00:07:22,080 --> 00:07:25,320
‫And again, it then automatically replaced the tier.

134
00:07:25,320 --> 00:07:29,607
‫And then all we have to do is import Main from Main.

135
00:07:34,080 --> 00:07:36,210
‫Now, alright, now it looks the same here,

136
00:07:36,210 --> 00:07:38,880
‫but now we have a bit of a better structure

137
00:07:38,880 --> 00:07:41,640
‫and also, I think the component tree

138
00:07:41,640 --> 00:07:44,253
‫is a lot more complete like this.

139
00:07:45,810 --> 00:07:48,480
‫Well, actually this hasn't updated yet.

140
00:07:48,480 --> 00:07:50,430
‫Yeah, so then also in the tree,

141
00:07:50,430 --> 00:07:52,140
‫we can see that we have the app,

142
00:07:52,140 --> 00:07:54,303
‫a header and a main part.