Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,090 --> 00:00:05,770
Attached you find this very simple application,
2
00:00:05,770 --> 00:00:07,030
which in the end currently,
3
00:00:07,030 --> 00:00:11,150
just has this app component with a div and the h1 tag.
4
00:00:11,150 --> 00:00:14,360
So essentially what you just saw on the slide here
5
00:00:14,360 --> 00:00:16,420
and now let's replicate that behavior,
6
00:00:16,420 --> 00:00:17,700
I showed you on the slide.
7
00:00:17,700 --> 00:00:19,140
Let's say for some reason
8
00:00:19,140 --> 00:00:22,420
eventually a paragraph should be added here.
9
00:00:22,420 --> 00:00:24,770
Now, how can we eventually add this
10
00:00:24,770 --> 00:00:26,980
and not add it right from the start?
11
00:00:26,980 --> 00:00:29,700
Well, with a state change, for example
12
00:00:29,700 --> 00:00:33,610
we could have some state which changes such state.
13
00:00:33,610 --> 00:00:36,360
Initially, no paragraph is rendered.
14
00:00:36,360 --> 00:00:37,720
But then at some point
15
00:00:37,720 --> 00:00:40,540
because a button was clicked or a timer expired
16
00:00:40,540 --> 00:00:41,930
or anything else happened,
17
00:00:41,930 --> 00:00:44,540
the paragraph is displayed.
18
00:00:44,540 --> 00:00:46,520
Now I will work with a button here
19
00:00:46,520 --> 00:00:47,810
and therefore first of all,
20
00:00:47,810 --> 00:00:50,430
I will import useState of course
21
00:00:50,430 --> 00:00:52,220
because we need some state.
22
00:00:52,220 --> 00:00:53,760
Because as I mentioned,
23
00:00:53,760 --> 00:00:55,750
React will only rerun this function
24
00:00:55,750 --> 00:00:57,640
and re-evaluate what's on the screen
25
00:00:57,640 --> 00:01:01,070
if state, props or context changes.
26
00:01:01,070 --> 00:01:02,930
Now, since this is our root component
27
00:01:02,930 --> 00:01:04,760
props and context is a bit harder.
28
00:01:04,760 --> 00:01:06,780
And in the end, it's all the worth noting that,
29
00:01:06,780 --> 00:01:10,800
of course it all comes down to state changes, ultimately.
30
00:01:10,800 --> 00:01:13,740
Even context internally will use some state,
31
00:01:13,740 --> 00:01:15,160
that might change the value
32
00:01:15,160 --> 00:01:17,440
which is then distributed through context.
33
00:01:17,440 --> 00:01:19,020
And if we think about props,
34
00:01:19,020 --> 00:01:21,480
being passed from a parent to a child
35
00:01:21,480 --> 00:01:24,890
how could the value passed through props change?
36
00:01:24,890 --> 00:01:29,110
Well, ultimately only, if state in a parent changed
37
00:01:29,110 --> 00:01:31,633
it all comes down to state changes in the end,
38
00:01:31,633 --> 00:01:33,480
if you think about it.
39
00:01:33,480 --> 00:01:34,313
So therefore here,
40
00:01:34,313 --> 00:01:36,070
we're going to work with some state
41
00:01:36,070 --> 00:01:38,756
and I'll name my state here, showParagraph
42
00:01:38,756 --> 00:01:41,450
and setShowParagraph.
43
00:01:41,450 --> 00:01:43,110
And initially that is false.
44
00:01:43,110 --> 00:01:45,340
My initial state here is false.
45
00:01:45,340 --> 00:01:48,572
And then here we use showParagraph,
46
00:01:48,572 --> 00:01:52,030
as you learned it in the conditional module.
47
00:01:52,030 --> 00:01:53,800
In the conditionals module,
48
00:01:53,800 --> 00:01:57,000
this is how we can show an element conditionally.
49
00:01:57,000 --> 00:01:58,410
Now, if I saved this,
50
00:01:58,410 --> 00:02:00,230
of course we will not see the paragraph
51
00:02:00,230 --> 00:02:02,350
because our state is false.
52
00:02:02,350 --> 00:02:05,460
And currently we have no way of changing that state.
53
00:02:05,460 --> 00:02:06,760
Now in the starting project,
54
00:02:06,760 --> 00:02:08,360
you find a button component,
55
00:02:08,360 --> 00:02:10,710
just so that we have a nicely styled button.
56
00:02:10,710 --> 00:02:15,230
So we'll add this button component here, import button
57
00:02:16,120 --> 00:02:20,463
from ./components/UI/Button/Button,
58
00:02:22,440 --> 00:02:25,940
showParagraph is the label we could have on it.
59
00:02:25,940 --> 00:02:28,270
And then here we can add the onClick prop
60
00:02:28,270 --> 00:02:29,520
on the button,
61
00:02:29,520 --> 00:02:31,153
and add a function here,
62
00:02:32,485 --> 00:02:35,880
toggleParagraphHandler, for example
63
00:02:37,820 --> 00:02:40,830
and this function should trigger when the button is clicked
64
00:02:40,830 --> 00:02:42,770
and it should actually toggle the paragraph.
65
00:02:42,770 --> 00:02:47,170
Let's say, so, rename my caption here to Toggle Paragraph.
66
00:02:47,170 --> 00:02:49,880
And in there I will then set showParagraph
67
00:02:49,880 --> 00:02:51,090
and I will set the state,
68
00:02:51,090 --> 00:02:53,550
to what showParagraph currently is not,
69
00:02:53,550 --> 00:02:56,120
so that we basically inverse it.
70
00:02:56,120 --> 00:02:58,930
The short form would be this syntax,
71
00:02:58,930 --> 00:03:01,690
where we set the value for showParagraph,
72
00:03:01,690 --> 00:03:04,850
to the opposite of the old value.
73
00:03:04,850 --> 00:03:08,170
But since we depend on the previous state snapshot
74
00:03:08,170 --> 00:03:10,643
I mentioned that we want to use the function
75
00:03:10,643 --> 00:03:12,470
forward state update here.
76
00:03:12,470 --> 00:03:14,190
I will come back to why we do that,
77
00:03:14,190 --> 00:03:16,350
later in this module again by the way.
78
00:03:16,350 --> 00:03:18,190
And therefore let's use the function
79
00:03:18,190 --> 00:03:20,003
for prevShowParagraph,
80
00:03:23,040 --> 00:03:26,960
and we'd return the opposite of prevShowParagraph therefore.
81
00:03:26,960 --> 00:03:29,340
And this is the cleaner way of changing our state.
82
00:03:29,340 --> 00:03:33,013
And now we bind the toggle paragraph handler to the button.
83
00:03:34,510 --> 00:03:35,343
So with that,
84
00:03:35,343 --> 00:03:38,243
we have the logic to conditionally show a paragraph.
85
00:03:39,830 --> 00:03:43,960
Now to center this, I'll quickly go into my styles here
86
00:03:43,960 --> 00:03:48,550
and add text align center here in the app selector.
87
00:03:48,550 --> 00:03:50,850
Side note, I'm not using CSS modules here.
88
00:03:50,850 --> 00:03:53,900
I'm just using regular CSS imports.
89
00:03:53,900 --> 00:03:57,150
Okay. With that let's click toggle paragraph
90
00:03:57,150 --> 00:03:59,130
and you see the paragraph is here
91
00:03:59,130 --> 00:04:01,320
and it's gone and it's here and so on.
92
00:04:01,320 --> 00:04:03,200
Now, that's interesting to know.
93
00:04:03,200 --> 00:04:06,100
But let's now analyze what's happening.
94
00:04:06,100 --> 00:04:10,090
First of all, I always mentioned that state changes,
95
00:04:10,090 --> 00:04:12,540
prop changes and context changes,
96
00:04:12,540 --> 00:04:14,850
would result in this component function,
97
00:04:14,850 --> 00:04:16,570
being executed again.
98
00:04:16,570 --> 00:04:17,510
If that's the case,
99
00:04:17,510 --> 00:04:20,060
we should be able to add a console log here
100
00:04:20,060 --> 00:04:21,800
and say app running
101
00:04:23,090 --> 00:04:26,810
and see this whenever we clicked a button and yet.
102
00:04:26,810 --> 00:04:28,210
Well, let's see whether that's the case.
103
00:04:28,210 --> 00:04:29,760
I'll save that.
104
00:04:29,760 --> 00:04:30,820
Here's my console.
105
00:04:30,820 --> 00:04:33,670
And you see initially, app running.
106
00:04:33,670 --> 00:04:36,180
That is because the page reloaded
107
00:04:36,180 --> 00:04:38,760
and that brought this app component to the screen,
108
00:04:38,760 --> 00:04:40,140
for the first time.
109
00:04:40,140 --> 00:04:43,000
So of course this was executed by React.
110
00:04:43,000 --> 00:04:45,250
And for that first renders cycle,
111
00:04:45,250 --> 00:04:49,300
React then found out that it wants a div,
112
00:04:49,300 --> 00:04:51,720
a H1 element and a button.
113
00:04:51,720 --> 00:04:55,030
No paragraph, because initially that's not shown.
114
00:04:55,030 --> 00:04:58,620
And it checks that to the last output it's saved.
115
00:04:58,620 --> 00:05:01,010
And since this rendered the component for the first time
116
00:05:01,010 --> 00:05:03,690
there essentially is no previous output.
117
00:05:03,690 --> 00:05:05,630
There is no previous snapshot.
118
00:05:05,630 --> 00:05:08,090
And therefore, this difference comparison,
119
00:05:08,090 --> 00:05:10,730
in the end resulted in a div, a h1 tag
120
00:05:10,730 --> 00:05:12,960
and a button to be rendered.
121
00:05:12,960 --> 00:05:14,850
And that information was handed off,
122
00:05:14,850 --> 00:05:16,770
to the React DOM package,
123
00:05:16,770 --> 00:05:19,470
which therefore rendered that to the screen.
124
00:05:19,470 --> 00:05:23,020
Now, if I click toggle paragraph, we see app running again.
125
00:05:23,020 --> 00:05:27,440
So that proves my point that for every stage change
126
00:05:27,440 --> 00:05:30,440
the entire component in which the stage changed,
127
00:05:30,440 --> 00:05:33,283
is re-executed, is re-evaluated.
128
00:05:35,040 --> 00:05:37,780
Now, how is the real DOM affected though?
129
00:05:37,780 --> 00:05:39,800
For that, let's go to the elements tab,
130
00:05:39,800 --> 00:05:41,460
in the dev tools.
131
00:05:41,460 --> 00:05:43,070
And let's expand our div here.
132
00:05:43,070 --> 00:05:44,370
The app div.
133
00:05:44,370 --> 00:05:48,457
Now, if I reload, we see we just have the h1
134
00:05:48,457 --> 00:05:51,080
and the button element here initially.
135
00:05:51,080 --> 00:05:52,480
And now,
136
00:05:52,480 --> 00:05:54,860
the good thing about this elements tab is
137
00:05:54,860 --> 00:05:58,180
that things that are changed in the DOM,
138
00:05:58,180 --> 00:05:59,510
will be flashed.
139
00:05:59,510 --> 00:06:00,740
They will be highlighted.
140
00:06:00,740 --> 00:06:04,330
So did we can see where the real DOM was rerendered
141
00:06:04,330 --> 00:06:05,830
or updated.
142
00:06:05,830 --> 00:06:08,660
Now therefore, watch this part on the right here.
143
00:06:08,660 --> 00:06:10,793
As I click a toggle paragraph button.
144
00:06:12,170 --> 00:06:13,310
You see.
145
00:06:13,310 --> 00:06:16,890
The only thing that flashed, was this paragraph.
146
00:06:16,890 --> 00:06:19,650
The h1 buttoned element did not flash,
147
00:06:19,650 --> 00:06:21,130
neither did anything else.
148
00:06:21,130 --> 00:06:22,790
It was just a paragraph.
149
00:06:22,790 --> 00:06:24,990
And if I remove it, it's just a div
150
00:06:24,990 --> 00:06:27,810
because from there the paragraph was removed.
151
00:06:27,810 --> 00:06:29,760
But the h1 of the button elements,
152
00:06:29,760 --> 00:06:33,210
were not flashed because they were not re rendered.
153
00:06:33,210 --> 00:06:34,470
And that's what I meant.
154
00:06:34,470 --> 00:06:38,060
Only the difference between those virtual snapshots,
155
00:06:38,060 --> 00:06:41,790
was considered for the updates made through the real DOM.
156
00:06:41,790 --> 00:06:46,440
And that is really, really crucial to understand.
157
00:06:46,440 --> 00:06:48,250
Now, let's see how that might change,
158
00:06:48,250 --> 00:06:50,023
if we work with more components.
12004
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.