All language subtitles for 8. JavaScript Logic in Components

Let's now take a quick first look at writing logic inside of React components.

Now we have already written some JavaScript logic before, but we always did it just inside the JS that

is returned.

So just like here, right?

But since components are just JavaScript functions, we can of course do any JavaScript in them that

we want and that code is then simply executed as soon as the function is called.

So as soon as the component is initialized.

So for example, here we can create any new variable that we want.

Let's say our.

And here I will again create a new date.

And then let's say get ours and then we can lock that to the console.

And now we're going to use that snippet for the first time that we set up earlier.

So here we can just write cl hit enter and then our.

So let's check out our console.

And so here, yeah, we have the number nine.

So that's currently the our.

And now what I want to do here is to basically display an alert in the app whether the restaurant is

currently open or not.

So let's define a few more variables for that.

So open our.

So let's say that the pizzeria actually opens at 12 p.m. and closes at 10 p.m. So that's a 12 and 22

for the close hour.

So close.

Hour equals 22.

And so now again, we can use any JavaScript in here.

So let's just write a simple if else statement saying.

That if the hour is greater or equal, the open hour and.

The hour is less or equal.

To close our.

Then just alert.

We're currently.

Open.

So alert is just a built in JavaScript function.

So that you should be familiar with.

Maybe we'll just use this here as a demonstration that we can write some simple JavaScript in here.

So alert.

Sorry.

Were closed.

And here we need some double quotes like this.

And here we have some bug.

So probably JavaScript wants us to include the semicolon here.

And there it is.

So sorry, we are closed.

And that's because right now it is nine in the morning.

And you saw that it happened here twice.

And that's because of the strict mode that I was telling you before.

So in strict mode, our components are usually rendered twice.

And so that's why we got that alert twice as well.

Now, if we change the open hour here, let's say to eight and rerender.

Then it says we are currently open.

Now, right now, this alert function is actually blocking JavaScript and so that's why it runs in the

beginning, but nothing else happens.

And so, of course, this is really not ideal and we wouldn't use this in a real app, but this was

just a short demo here anyway.

So let's just comment all of this out and just to use this code here because it will actually become

useful later.

Let's create a variable here called is open.

And so that will then simply become a true or false value, depending on whether this condition is true

or false.

Let's lock that then to the console.

Like this.

Well, what's happening here?

Yeah, that's better.

And you see that right now it's open.

Let's set that back to 12.

And there we go.