All language subtitles for 003 How Component Functions Are Executed_en

Reacting to events is an important

first step,

how can we now change what shows up on the screen?

Well, we want to change the title

when the "button is clicked,

so this is one thing we could do.

We could create a variable

with let,

which we may rename title,

and initially that holds the value we find in props title .

And then we use this title variable down there

in our JSX code

to output the title.

Now if I do that we see the same results as before,

so why am I doing that.

Well since it's a variable,

we could change it whenever the click handler executes.

So whenever this button has clicked,

we execute this click handler function

and in there if we now change title to updated,

then we should see that change title

on our screen, right?

Because we are outputting title down there,

we're changing it up on a click

we should see that value here in this place

after such a click happened.

Well, let's save everything and give a try.

If we go back, you'll notice that if I click change title ,

nothing happens.

I can hammer this button and nothing happens.

This title here never changes,

so why is this happening?

Is something wrong with our click handler?

Well this function is getting triggered,

I can prove this, if I console lock

the title here

after we changed it,

you will notice that if I now go back and reload,

if I click change title,

we see that updated title text here.

So it looks like it worked,

the click handler clearly executed

and title clearly was changed.

Otherwise we wouldn't see that new value

which we assign here in line 13

once we log it in line 14.

So if the function executes

and the title is changed,

why don't we see that reflected in our DOM,

after all we are outputting the title down there

in line 21.

Well,

simply because react doesn't work like this.

And that's where now I have to dive into

how react actually passes the JSS code

and how it considers that

and how it brings it on to the screen.

Though I will have an even deeper dive later in the course,

but there's one key thing which you have to know right now,

keep in mind that your component is a function.

This is a function right?

Your component is just a regular function,

the only special thing about that function,

is that it returns JSX.

Now since it's a function

someone has to call it,

and you might notice that we never called

our component functions,

instead we just used these functions

like HTML elements in this JSX code.

Well, the thing is,

under the hood this is almost like a function call.

By using our components in JSX code,

we make React aware of our component functions.

For example here,

we make react aware of the expense item function.

And whenever react evaluates this JSX code,

it will call these component functions.

And these component functions stand to return JSX code,

which is all the evaluated,

up until there's no more JSX code to be evaluated.

So react keeps on calling any component functions

it encounters in JSX,

then calls any functions that those

functions might have returned

so any elements those components might have used

in their JSX code until there are no more functions left.

So in the case of expenses.js,

if react encounters this expense item,

it calls this expense item component function,

executes all the code in there,

encounters this JSX code

and calls this card function

and this expense state function

and then it goes through the JSX code of this components

until there's no more component code left to call.

And then it re-evaluates the overall result

and translates that into DOM instructions

which renders something like this on the screen.

That's how react works.

Now it's all started by the index.js file,

where we initially point at this app component.

That's the first component function which is being called

and that happens when the react app

is been loaded on the screen

which happens when the page is been visited.

So that's how react goes through all these components

executes all these components functions

and draws something on to the screen.

The only problem with that is,

that react never repeats that.

React goes through all of that

when the application is initially rendered,

but thereafter it's done.

However in modern applications,

of course you sometimes want to update

what's visible on the screen,

for example because a button was clicked

and that button should change some text

which is being output.

So we need a way of telling react

that something changed and that a certain component

should be re-evaluated

and that's where react introduces

a special concept called state.