1 00:00:01,110 --> 00:00:03,360 ‫Let's now take a quick first look 2 00:00:03,360 --> 00:00:07,053 ‫at writing logic inside of React components. 3 00:00:08,310 --> 00:00:11,940 ‫Now we have already written some JavaScript logic before 4 00:00:11,940 --> 00:00:16,940 ‫but we always did it just inside DJSX that is returned. 5 00:00:17,220 --> 00:00:19,830 ‫So just like here, right? 6 00:00:19,830 --> 00:00:23,340 ‫But since components are just JavaScript functions, 7 00:00:23,340 --> 00:00:27,570 ‫we can of course do any JavaScript in them that we want. 8 00:00:27,570 --> 00:00:30,180 ‫And that code is then simply executed 9 00:00:30,180 --> 00:00:32,520 ‫as soon as the function is caught. 10 00:00:32,520 --> 00:00:36,240 ‫So as soon as the component is initialized. 11 00:00:36,240 --> 00:00:38,070 ‫So for example, here, 12 00:00:38,070 --> 00:00:40,773 ‫we can create any new variable that we want. 13 00:00:41,850 --> 00:00:46,850 ‫Let's say hour, and here I will again create a new date, 14 00:00:49,680 --> 00:00:51,430 ‫and then let's say getHours 15 00:00:53,310 --> 00:00:55,500 ‫and then we can log that to the console. 16 00:00:55,500 --> 00:00:57,810 ‫And now we're going to use that snippet 17 00:00:57,810 --> 00:01:00,930 ‫for the first time that we set up earlier. 18 00:01:00,930 --> 00:01:05,430 ‫So here we can just write cl, hit Enter, and then hour. 19 00:01:08,760 --> 00:01:10,740 ‫So, let's check out our console, 20 00:01:10,740 --> 00:01:14,070 ‫and so here, yeah, we have the number 9. 21 00:01:14,070 --> 00:01:16,320 ‫So that's currently the hour 22 00:01:16,320 --> 00:01:17,730 ‫and now what I want to do here 23 00:01:17,730 --> 00:01:21,060 ‫is to basically display an alert in the app 24 00:01:21,060 --> 00:01:24,303 ‫whether the restaurant is currently open or not. 25 00:01:26,250 --> 00:01:29,043 ‫So, let's define a few more variables for that. 26 00:01:32,610 --> 00:01:33,780 ‫So open hour, 27 00:01:33,780 --> 00:01:36,210 ‫so let's say that the pizzeria actually opens 28 00:01:36,210 --> 00:01:40,140 ‫at 12:00 PM and closes at 10:00 PM 29 00:01:40,140 --> 00:01:44,703 ‫so that's 12 and 22 for the close hour. 30 00:01:45,600 --> 00:01:50,160 ‫So closeHour = 22. 31 00:01:50,160 --> 00:01:54,450 ‫And so now again, we can use any JavaScript in here. 32 00:01:54,450 --> 00:01:58,450 ‫So let's just write a simple ifelse statement saying 33 00:01:59,700 --> 00:02:04,700 ‫that if the hour is greater or equal, the open hour, 34 00:02:04,710 --> 00:02:09,710 ‫and the hour is less or equal the close hour, 35 00:02:13,470 --> 00:02:18,470 ‫then just alert "We're currently open!" 36 00:02:21,210 --> 00:02:25,620 ‫So alert is just a built-in JavaScript function 37 00:02:25,620 --> 00:02:27,423 ‫so that you should be familiar with. 38 00:02:28,380 --> 00:02:31,200 ‫Maybe we'll just use this here as a demonstration 39 00:02:31,200 --> 00:02:34,983 ‫that we can write some simple JavaScript in here. 40 00:02:36,660 --> 00:02:41,110 ‫So alert, "Sorry, we're closed". 41 00:02:42,690 --> 00:02:47,403 ‫And here we need some double quotes like this. 42 00:02:48,330 --> 00:02:50,190 ‫And here we have some bug. 43 00:02:50,190 --> 00:02:52,380 ‫So probably JavaScript wants us 44 00:02:52,380 --> 00:02:55,290 ‫to include the semicolon here. 45 00:02:55,290 --> 00:02:56,940 ‫And there it is. 46 00:02:56,940 --> 00:02:59,010 ‫So "sorry, we are closed", 47 00:02:59,010 --> 00:03:02,290 ‫and that's because right now it is nine in the morning 48 00:03:04,920 --> 00:03:06,900 ‫and you saw that it happened here twice. 49 00:03:06,900 --> 00:03:08,910 ‫And that's because of the strict mode 50 00:03:08,910 --> 00:03:10,740 ‫that I was telling you before. 51 00:03:10,740 --> 00:03:14,370 ‫So in strict mode, our components are usually rendered twice 52 00:03:14,370 --> 00:03:18,360 ‫and so that's why we got that alert twice as well. 53 00:03:18,360 --> 00:03:20,160 ‫Now, if we change the open hour here, 54 00:03:20,160 --> 00:03:23,700 ‫let's say to eight and re-render, 55 00:03:23,700 --> 00:03:25,827 ‫then it says "We are currently open!" 56 00:03:27,090 --> 00:03:29,760 ‫All right, now, this alert function 57 00:03:29,760 --> 00:03:32,010 ‫is actually blocking JavaScript. 58 00:03:32,010 --> 00:03:33,930 ‫And so that's why it runs in the beginning 59 00:03:33,930 --> 00:03:35,373 ‫but nothing else happens. 60 00:03:36,330 --> 00:03:38,910 ‫And so of course this is really not ideal, 61 00:03:38,910 --> 00:03:41,070 ‫and we wouldn't use this in a real app, 62 00:03:41,070 --> 00:03:44,550 ‫but this was just a short demo here anyway. 63 00:03:44,550 --> 00:03:48,060 ‫So let's just comment all of this out 64 00:03:48,060 --> 00:03:51,300 ‫and just to use this code here 65 00:03:51,300 --> 00:03:54,030 ‫because it will actually become useful later. 66 00:03:54,030 --> 00:03:56,853 ‫Let's create a variable here called isOpen. 67 00:03:59,040 --> 00:04:02,310 ‫So that will then simply become a true or false value 68 00:04:02,310 --> 00:04:05,613 ‫depending on whether this condition is true or false. 69 00:04:06,810 --> 00:04:11,810 ‫Let's lock that then to the console, like this. 70 00:04:12,120 --> 00:04:13,473 ‫Wow, what's happening here? 71 00:04:15,690 --> 00:04:16,950 ‫Yeah, that's better. 72 00:04:16,950 --> 00:04:19,140 ‫And you see that right now it's open. 73 00:04:19,140 --> 00:04:24,140 ‫Let's set that back 12th, and there we go.