All language subtitles for 013 Thinking In JSX_en

Hey there, it's Sandra here, wanted to add a quick note, a few things that you may have been confused

about.

You may be asking why we changed this from a function to a class and older versions of React.

I actually started the app with a class instead of a function.

Now, this topic of classes versus functions is something that we're going to cover more and more in

depth as we get through the course, and especially towards the end when we talk about react hooks know

to go through this code, we need to understand a few things.

The very first thing is that this syntax of sex, which we're going to talk a little bit more about,

but for now, it looks like everything is just an HTML attack.

However, because this is JavaScript, there's a few changes.

One is that this class name over here, that's not ASML, is it?

And if I hover over this, you see that it's a J attribute.

You see, because if I used the word class in here, class means something else in JavaScript, it means,

well, we're creating a class, right?

So Jeff Sachs uses the syntax of class name to distinguish between what we actually mean, which is

the actually giving it an HTML class versus a class in JavaScript.

The other thing are these brackets over here, you see how every time we write these curly brackets.

Inside of our jail sex.

Well, they mean inside of here, any time you see these curly brackets, whatever's inside is a JavaScript

expression.

So what does that mean?

Well, logo is a variable, which is the logo that we import, this dot state, dot string.

Well, that's also a variable which is referring to the state.

It's a JavaScript expression.

It's something that produces a value.

For example, I could have done four plus five here if I wanted to, because it's a JavaScript expression.

Another place that we see this is right here with the click again, anything around these brackets is

a JavaScript expression.

So what's in here?

There's a function write an anonymous function using this arrow syntax that simply calls this dot set

state.

Now, notice here how we don't actually modify this set state like this, this dot.

St..

Dot string to equal something else like we would normally.

And this goes back to the idea that I mentioned previously, which is this need directional data flow

of react.

You see, you're not allowed to modify state in react without calling this method set state.

Now, why is that?

Because any time we change the state, let's say a user clicks that button to change the state to a

new string.

When that click happens, what happens is react actually intercepts because remember, react is the

one that's talking to the dog.

It's going to intercept that click and it's going to report back and say, hey, I just got to click

on the DOM.

What do I do?

Well, in this case, what we're going to say is unclick when the click happens.

I want you to update the state, but we're not going to modify the state automatically.

I'm going to say, hey, a click happened.

State gets updated using state state and then that change is going to re render the component so that

we can go through this flow again.

Again, if we look over here as soon as this state gets called, which is when a click happens, well,

what's going to happen?

This render method gets called again.

Why does it get called?

Well, because state just got updated.

State now is a different thing.

And remember, the declarative approach with REACT is that as soon as state changes, we re render the

component with the new state, which is right here, and we display that.

Now, this unclick is that HMO?

Well, if I hover over here, it says, nope, that's a sex attribute.

Again, remember, this isn't HMO.

This is JavaScript.

We're just mimicking ACMA.

So if I wanted to say use unclick in HTML, you see that unclick is Rinn like this with no capital C

because in JavaScript we use Camil case, it's a capital C, so just like cost name was a little bit

different than HTML.

Unclick is also different, so in react, we can use whatever attributes that we want, like source,

like class, like unclick, but sometimes there's these differences like class name or unclick.

Now we're going to explore these different attributes throughout the course.

But the key thing to remember is that, Jason, Sex is trying to mimic what ASML does so that we can

create that virtual dorm and break down each part of the app into these components that keep getting

re rendered as we update the state using said state.

Let's keep going.