1
00:00:01,080 --> 00:00:05,040
‫So to finish up this part, I want to once again

2
00:00:05,040 --> 00:00:08,940
‫do a quick comparison of the React code that we just wrote

3
00:00:08,940 --> 00:00:12,360
‫with an equivalent Vanilla JavaScript implementation

4
00:00:12,360 --> 00:00:14,013
‫of the same app.

5
00:00:15,420 --> 00:00:19,080
‫And this Vanilla JavaScript implementation I actually

6
00:00:19,080 --> 00:00:22,770
‫gave you at the beginning of this section.

7
00:00:22,770 --> 00:00:25,830
‫So we placed it right in the public folder.

8
00:00:25,830 --> 00:00:29,883
‫So let's now open that up and open it here on the site.

9
00:00:31,650 --> 00:00:36,000
‫Okay, so again, the Vanilla JavaScript implementation is

10
00:00:36,000 --> 00:00:40,890
‫inside an HTML file, where here we have first the HTML

11
00:00:40,890 --> 00:00:43,113
‫and then separated the JavaScript.

12
00:00:44,220 --> 00:00:46,860
‫So this HTML might look familiar

13
00:00:46,860 --> 00:00:50,580
‫as it is quite similar of course to this JSX.

14
00:00:50,580 --> 00:00:53,460
‫The only thing we don't have here is the button

15
00:00:53,460 --> 00:00:55,200
‫to open and close the component.

16
00:00:55,200 --> 00:00:57,660
‫So I didn't include that part.

17
00:00:57,660 --> 00:01:01,380
‫But anyway here then starts our script

18
00:01:01,380 --> 00:01:02,970
‫so we have the same messages

19
00:01:02,970 --> 00:01:05,340
‫and then here we have to manually select all

20
00:01:05,340 --> 00:01:07,200
‫of these DOM elements based

21
00:01:07,200 --> 00:01:09,453
‫on the classes that we gave them.

22
00:01:11,610 --> 00:01:14,850
‫Then next we have this let variable here with a step

23
00:01:14,850 --> 00:01:17,220
‫which we will then update

24
00:01:17,220 --> 00:01:20,370
‫down here in these event handler functions.

25
00:01:20,370 --> 00:01:23,280
‫So here we took the elements that we selected manually

26
00:01:23,280 --> 00:01:25,620
‫and used add event listener on them.

27
00:01:25,620 --> 00:01:28,110
‫We have a similar logic inside of these event

28
00:01:28,110 --> 00:01:31,860
‫handlers to basically update the step variable.

29
00:01:31,860 --> 00:01:35,490
‫So when we go back, the step goes minus one

30
00:01:35,490 --> 00:01:38,970
‫and when we go forward, the step goes plus one.

31
00:01:38,970 --> 00:01:42,330
‫So this is a bit similar to what we have here.

32
00:01:42,330 --> 00:01:45,810
‫So these event handlers, but the big difference is

33
00:01:45,810 --> 00:01:49,320
‫that here all we have to do is to just update the state.

34
00:01:49,320 --> 00:01:52,860
‫And so then React will keep the UI in sync.

35
00:01:52,860 --> 00:01:56,130
‫Where here we first update the state variable

36
00:01:56,130 --> 00:01:58,110
‫and then we have to call this function

37
00:01:58,110 --> 00:02:01,050
‫which does the DOM manipulation.

38
00:02:01,050 --> 00:02:04,260
‫So here inside of the update UI values function

39
00:02:04,260 --> 00:02:06,750
‫we need to now manually update the DOM

40
00:02:06,750 --> 00:02:10,860
‫and keep it in sync with this step state

41
00:02:10,860 --> 00:02:14,310
‫because of course as soon as we click these buttons here

42
00:02:14,310 --> 00:02:17,010
‫if all we did was to update this value

43
00:02:17,010 --> 00:02:19,410
‫then nothing would happen in the UI.

44
00:02:19,410 --> 00:02:21,120
‫So after doing that, we need to then

45
00:02:21,120 --> 00:02:23,070
‫call this function here.

46
00:02:23,070 --> 00:02:26,040
‫Or of course we could also just have all

47
00:02:26,040 --> 00:02:30,540
‫of this code here, but since we need the same code here

48
00:02:30,540 --> 00:02:32,373
‫I just place it into this function.

49
00:02:33,810 --> 00:02:34,710
‫So then here

50
00:02:34,710 --> 00:02:38,160
‫we manually update the text content of the message.

51
00:02:38,160 --> 00:02:41,130
‫While here in the JSX, it is simply declared

52
00:02:41,130 --> 00:02:42,990
‫right in the markup.

53
00:02:42,990 --> 00:02:46,380
‫So here we have imperative code that tells JavaScript

54
00:02:46,380 --> 00:02:48,630
‫step by step what it needs to do.

55
00:02:48,630 --> 00:02:51,150
‫So update the text content,

56
00:02:51,150 --> 00:02:52,890
‫then set the class list,

57
00:02:52,890 --> 00:02:56,190
‫set this class list, and set this class list.

58
00:02:56,190 --> 00:02:58,080
‫So set the class to active

59
00:02:58,080 --> 00:03:01,470
‫in case that the step is currently active.

60
00:03:01,470 --> 00:03:05,550
‫While here, that's all just declared in the JSX.

61
00:03:05,550 --> 00:03:08,310
‫We don't tell React to do anything,

62
00:03:08,310 --> 00:03:11,370
‫we just write that here the step

63
00:03:11,370 --> 00:03:13,560
‫should be equal to the current step

64
00:03:13,560 --> 00:03:15,420
‫and that here the active class

65
00:03:15,420 --> 00:03:17,460
‫should be inside the class name

66
00:03:17,460 --> 00:03:19,590
‫if the step is greater equal one,

67
00:03:19,590 --> 00:03:22,980
‫but we don't need the imperative DOM manipulation

68
00:03:22,980 --> 00:03:24,003
‫that we have here.

69
00:03:25,110 --> 00:03:27,750
‫So we talked about this now many times

70
00:03:27,750 --> 00:03:30,630
‫and so I think that this is enough set at this point,

71
00:03:30,630 --> 00:03:32,580
‫but of course it would be a good idea

72
00:03:32,580 --> 00:03:36,270
‫for you to keep comparing now, these two implementations.

73
00:03:36,270 --> 00:03:39,600
‫There's just one small thing that I want to do here

74
00:03:39,600 --> 00:03:42,540
‫which is going back to the previous lecture

75
00:03:42,540 --> 00:03:45,510
‫where I told you that each component has

76
00:03:45,510 --> 00:03:48,480
‫and manages its own state.

77
00:03:48,480 --> 00:03:52,173
‫So what I want to do now is to prove that to you in code.

78
00:03:53,190 --> 00:03:55,500
‫So let's actually take all of this code

79
00:03:55,500 --> 00:03:57,750
‫and place it into a new component,

80
00:03:57,750 --> 00:03:59,283
‫which we will call step.

81
00:04:00,330 --> 00:04:04,770
‫Or actually let's call this component here Step.

82
00:04:04,770 --> 00:04:07,143
‫Then we don't have to do so much copy pasting.

83
00:04:09,090 --> 00:04:10,740
‫Then let's remove this

84
00:04:10,740 --> 00:04:12,310
‫and actually call it steps

85
00:04:14,100 --> 00:04:14,933
‫now, right.

86
00:04:14,933 --> 00:04:17,370
‫And now here we do our app again.

87
00:04:17,370 --> 00:04:18,660
‫So export

88
00:04:18,660 --> 00:04:19,493
‫default

89
00:04:21,090 --> 00:04:21,923
‫function

90
00:04:22,830 --> 00:04:23,790
‫app

91
00:04:23,790 --> 00:04:25,240
‫and then this app

92
00:04:26,370 --> 00:04:29,343
‫will basically include two steps.

93
00:04:31,350 --> 00:04:33,300
‫So let's say here we have a diff

94
00:04:33,300 --> 00:04:34,500
‫and then we want to have

95
00:04:37,320 --> 00:04:39,180
‫the steps two time.

96
00:04:39,180 --> 00:04:41,790
‫Now just a few more changes we need to do.

97
00:04:41,790 --> 00:04:45,930
‫So now since we have two components on the same page

98
00:04:45,930 --> 00:04:47,400
‫let's actually

99
00:04:47,400 --> 00:04:50,820
‫return a diff ear so that the button

100
00:04:50,820 --> 00:04:54,213
‫and then these steps are all in the same place.

101
00:04:57,000 --> 00:05:01,050
‫And then just one quick change in the CSS please.

102
00:05:01,050 --> 00:05:02,970
‫So down here in the close

103
00:05:02,970 --> 00:05:05,193
‫let's just remove this line of code.

104
00:05:07,657 --> 00:05:10,680
‫All right, let's close that.

105
00:05:10,680 --> 00:05:12,210
‫Put it here on the side.

106
00:05:12,210 --> 00:05:14,160
‫And then as you reload, you will see

107
00:05:14,160 --> 00:05:17,070
‫that now we have two steps on the page.

108
00:05:17,070 --> 00:05:20,853
‫So we successfully reused our steps component.

109
00:05:21,720 --> 00:05:23,400
‫So this is now no longer the app.

110
00:05:23,400 --> 00:05:27,070
‫Again, it is steps, and we can nicely see that here

111
00:05:28,260 --> 00:05:30,990
‫in the React dev tools.

112
00:05:30,990 --> 00:05:33,960
‫So now we have a bit of a bigger component tree.

113
00:05:33,960 --> 00:05:37,473
‫So we have app and then it has two child components.

114
00:05:39,060 --> 00:05:41,100
‫So, but what I wanted to show you is that

115
00:05:41,100 --> 00:05:44,700
‫as we change the state in this one, for example

116
00:05:44,700 --> 00:05:47,490
‫the state here will stay the same.

117
00:05:47,490 --> 00:05:50,730
‫And so even though both of them are steps component

118
00:05:50,730 --> 00:05:55,080
‫the state in each of them is completely isolated.

119
00:05:55,080 --> 00:05:57,510
‫So of course I can also close this one,

120
00:05:57,510 --> 00:05:59,940
‫and this one stays open.

121
00:05:59,940 --> 00:06:02,370
‫And we can obviously also see that down here

122
00:06:02,370 --> 00:06:03,280
‫in the dev tools

123
00:06:04,710 --> 00:06:06,393
‫with a bit more space even.

124
00:06:07,800 --> 00:06:09,630
‫Yeah. So the first steps here

125
00:06:09,630 --> 00:06:12,210
‫the state is three, and it is visible.

126
00:06:12,210 --> 00:06:13,800
‫So that's this true here.

127
00:06:13,800 --> 00:06:15,960
‫While the second one, the state is one

128
00:06:15,960 --> 00:06:17,880
‫and it is not visible.

129
00:06:17,880 --> 00:06:22,350
‫Okay, so that was just a small and quick demonstration.

130
00:06:22,350 --> 00:06:26,610
‫And so now that we have used state a couple of times here

131
00:06:26,610 --> 00:06:28,680
‫it's time for you to practice state

132
00:06:28,680 --> 00:06:31,803
‫on your own in the upcoming coding challenge.