‫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 DJSX 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 caught.
‫So as soon as the component is initialized.
‫So for example, here,
‫we can create any new variable that we want.
‫Let's say hour, and here I will again create a new date,
‫and then let's say getHours
‫and then we can log 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 hour.
‫So, let's check out our console,
‫and so here, yeah, we have the number 9.
‫So that's currently the hour
‫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 hour,
‫so let's say that the pizzeria actually opens
‫at 12:00 PM and closes at 10:00 PM
‫so that's 12 and 22 for the close hour.
‫So closeHour = 22.
‫And so now again, we can use any JavaScript in here.
‫So let's just write a simple ifelse statement saying
‫that if the hour is greater or equal, the open hour,
‫and the hour is less or equal the close hour,
‫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, we're 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 re-render,
‫then it says "We are currently open!"
‫All 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 isOpen.
‫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.
‫Wow, what's happening here?
‫Yeah, that's better.
‫And you see that right now it's open.
‫Let's set that back 12th, and there we go.