All right guys so far we've learned how to build components using React, extract those components into 1
smaller pieces and pass properties to those components so we can customize and reuse them. 2
But the one thing that we haven't yet looked at is how do we make our apps more interactive? 3
And the reason is because in order to do that we have to understand the concept of state. 4
And this is a really central concept to how React does things. 5
And I think it's best summarized in this kind of equation. 6
So the idea is that the UI or the user interface that somebody's looking at your website sees is a 7
function of the state of your app. 8
Let me explain this a little bit further using an analogy. 9
Let's think about the difference between ice and water. 10
They're basically the same thing right? 11
You could think of them as the same React component but they will change their appearance depending 12
on the state of temperature. 13
So if the temperature goes up, then ice turns into water. 14
If the temperature goes down then water turns back into ice. 15
So in this case you could think of the ice as the user interface. 16
And depending on what the value of that state is, if the temperature was minus 10 degrees both in 17
fahrenheit and Celsius, then you're going to be seeing ice. 18
But if we change the state and we change the temperature to say 60 degrees, then our ice is going to 19
turn into water. 20
So user interface changes are reflecting the changes in state. 21
Now how is this actually done with code? 22
Well we would probably keep track of a variable, let's say temperature, and we would define how our user 23
interface would more often change depending on different values of that variable. 24
Let's say that we created a to-do list app 25
right? 26
And this is a very simple example. We've just got an app component inside, we've got a list item component 27
and the list item just hosts a single paragraph of text. 28
Now let's say that what we wanted to happen is when we click on this list item then we want the text 29
inside to have a line through or a strikeout. 30
So in this case we might have a state variable called isDone. 31
And initially it's set to false. But when the user clicks on the to-do list then we switch the value of 32
that variable from false to true. 33
And what we want our paragraph elements to do is to change its appearance in the UI to reflect this 34
and to have that strikethrough styling. 35
Let's take a look at how we would do this in a code sandbox. 36
Here I've got a simple app component which literally just has a single paragraph element in it and it 37
just shows the words 'Buy milk'. 38
Now we've already learned about conditional rendering. 39
So we know that if we had a variable called isDone and we set it to false, we can then use it to change 40
the appearance of our React component. For example inside this element 41
I can add a style property and I can set it to equal a new Javascript object which is going to have 42
textDecoration as the key. 43
And then as the value, it's going to be line-through. And as soon as that gets rendered you can see this 44
is the styling for how you would create a line through. 45
But of course we don't want a line through our text always to be there. 46
Instead we want this particular style to be rendered when this variable is turned to true. 47
Let me go ahead and extract this Javascript object to make our code a little bit easier to understand. 48
So I'm going to create a const called strikeThrough and I'm going to set it to equal 49
this particular Javascript object which is the styling. 50
Now I'm going to be applying that style when the variable isDone 51
happens to be true. All right. 52
So you've learned about ternary operators. All that we have to do inside these curly braces is check the 53
value of isDone. 54
So with that question mark and then if it's true, we're going to apply the strikethrough styling. But 55
if it's not true, then we're going to apply null. So now when my isDone property, which is the state that 56
we're tracking, is false 57
I get normal text but as soon as that switches to true then the strike through styling gets applied 58
and my user interface updates to reflect the update in the state. 59
Now alternatively you can of course do it like this. 60
It does exactly the same thing. 61
But the important thing here is that we have a user interface that is dependent upon the value of a 62
state variable. And this kind of programming is often known as declarative programming. We're declaring 63
when we're writing our code how our user interface should look under different conditions dependent 64
upon the state. 65
The other style of programming would be called imperative programming. 66
And this is what we've been doing all along 67
using Javascript. When we say document.getElementById and then we tap into its properties and then 68
we set it equal to something, 69
this is us imperative early telling this element to do something different. 70
And you can achieve exactly the same results. 71
So if I was to go and delete all of this code that we had before while keeping my single paragraph element, 72
I can go into my index.js, tap into the document in the DOM and get element by id. 73
I'm just gonna get the entire root div and I'm going to set it's style, namely the text decoration property, 74
to equal to line-through. 75
And when this line of code gets executed, you can see that that is exactly what happened. 76
And very often what we've been doing is effectively creating some sort of listener. 77
So let's say that we had a button here and it says change to strike through and then we would have an 78
onClick listener and then we would pass it maybe a function 79
right? 80
And we can have a function called strike and we can call it in our onClick. 81
And when this happens then what we do is we go ahead and apply the styling, so the same code as we had 82
before 83
document.getElementById and change the text decoration to line-through. 84
So now when I click this button it activates this function and I manually change the appearance to a 85
new value. 86
And if we wanted to change it back then we probably would have a different button called unStrike maybe. 87
And in this case, we would simply change the text decoration back to null. 88
So in this case when I click this it strikes it through, 89
when I click this it changes it back. 90
This is very imperative. 91
This is getting hold of an item and setting its property to a new value 92
each time we want this change to happen. 93
Now if we instead go back to our previous declarative style of code where we were tracking that variable 94
isDone, then instead of having to get the element and update its properties, you can simply change is 95
Done to true or is done to false. 96
But even though you might think this code should theoretically work, it doesn't. 97
And the reason is because these elements are being rendered and they are not changeable. 98
They have to be re-rendered onto the screen in order for the changes in their properties, such as their 99
style property, to be seen. And to do that 100
we have to learn about something called hooks. Hooks is a relatively new React concept but it's a really 101
powerful one. 102
Effectively they are functions that allow us to hook into the state of our app and read or modify it. 103
In the next lesson, 104
that's what we're going to be introducing. 105
And you're going to be seeing one of the most commonly used React hooks which is the use state hook. 106
So for all of that and more, I'll you on the next lesson.