All language subtitles for 042 Introducing Lifecycle Methods_en

Before we dive deeply into building our big final react project, we have to take some time to better

understand class components.

More specifically, we have to understand the life cycle methods that are present on them that we can

leverage when writing our class components.

Now, inside of our monster's Rolodex project, we only used component did mount, but there's actually

a couple others that we need to explore because they all serve different purposes and they all trigger

at different times in a components life cycle.

And I will show you what that is throughout the next couple lessons.

But before we do that, I'm just going to show you what this quick little react at project that I've

got is about.

Now, this is just a quick Sciarra project that I spun up the same way that we did with our monsters

Rolodex, except I only want to use it for demonstration purposes of learning these concepts.

Now, if you want, I have included the GitHub link to this project.

But honestly, it's not much that you need to code along with.

It's more for you to see and watch and listen while I explain these upcoming concepts.

But all this project really comprises of is it's slightly modified of what the base project that ReachOut

gives us.

And in it, I've just modified our app component to have these two buttons that decide on what to show

for our life cycles component.

Now, I know this lifecycle component just looks like a bit of text right now, but I just put it here

so that you can see whether or not it's there or not.

And what I mean by that is whenever you click this toggle life cycles button, you'll see that that

component disappears.

Right?

I'm pulling it off the DOM based on whether or not you've clicked or toggled the life cycles button.

And then the update text button, whenever you click, we'll just put this underscore hello.

And the more you click it, the more underscore hello's get appended to that text.

Now, let me show you what the code looks like.

Now, as you can see from the folder structure, it's pretty much just the base create reactor project.

The only difference is that we have this life cycle component that will look at a little later that

I import into our app component and then I append it right here.

Now we'll explore this code.

But the first thing that we need to notice is that our app, of course, is a Class-Based component

that has a state where the initial values are this show child property that is a boolean with the default

value being true.

And then this text value, which is a string with the default value being an empty string.

If you ignore the stiv in this header, this image, because these are pretty much just presentational

HTML elements, the main thing is to look at is these two buttons and then, of course, this code right

here.

In this button, we have this on Click that will fire off our function that calls Set State where we

set the show child property of our state equal to the opposite value of what it was currently.

We do that by using this bang operator and what this bang operator does is it evaluates any bullion

or any value to the opposite value that it is.

So, for example, if a child is true, then I want to set the state value of show child to the opposite

value, meaning that it will be bank true, which is equal to false.

Bang just says give me the opposite boolean value of whatever that value is.

So if state show child is false, then being false is equal to true.

So that's all we do, it's a really handy way for us to toggle between a true and false state by simply

calling this bang operator.

So whenever you click it, it will set the value to the opposite value as the next state value.

In this second button, we have this unclick that fires this anonymous function that will cost that

state, that sets the state text to whatever it currently is, except adding on this extra underscore.

Hello.

So all we do is whenever we click it, our state text just gets more and more underscore.

Hello, string's appended to the end of it, as we saw whenever we click the button earlier.

Finally, we have this code here that determines whether or not to hide or show our life cycles component.

So this, you might see, is kind of odd looking, this is actually what's called a ternary operator.

And it sounds like a weird thing, but it's actually just in shorthand that allows us to write easier

if else statements.

All it is, is it takes the form of this questionmark and this Colen with different things between it,

so you can see it as three parts.

The first part is what we want to evaluate as true or false.

So what do I mean by that?

Well, if you can imagine that we had some if statement, right?

Like this.

This first initial if statement, right, where we evaluate something about whether or not it's true

or false is pretty much what this is saying, and that's why we use this boolean value that we have

in our state as true or false.

So I'm saying if this state does show it is true, then I want to either render this or this.

So this first thing that we see after the questionmark is what gets evaluated if show child right.

So whatever is on this side is true.

So if your child is true, render the life cycles component.

If this starts to show child is false, then render not.

So you can see this last section here pretty much being what goes into the full statement.

So you can see this as what goes here, this as what goes here and this as what goes here.

So it's pretty much just a really handy and quality of life coding syntax that allows us to write if

all statements in a much easier and readable way.