1 00:00:09,350 --> 00:00:17,780 Welcome back in this lesson and we got to recall the events in Reetta, Jace, this is our projects. 2 00:00:17,780 --> 00:00:21,580 We have reactor projects and we are using the basic project. 3 00:00:21,860 --> 00:00:23,140 This is our project. 4 00:00:23,570 --> 00:00:28,340 And let us tap this command line, KDDI Basic. 5 00:00:30,440 --> 00:00:38,390 I'm not clear, and I'm going to run MPM ducts in order to run my projects on Prasert. 6 00:00:43,980 --> 00:00:44,520 OK. 7 00:00:47,470 --> 00:00:48,130 Very good. 8 00:00:48,580 --> 00:00:50,920 And what's he going to do here? 9 00:00:50,980 --> 00:01:02,440 We are going to create a new tone, a chance here before our table and in order to start with our lesson 10 00:01:02,800 --> 00:01:04,330 about the events. 11 00:01:04,360 --> 00:01:11,000 OK, so I'm going to advise you to commence the clock and there are reports on. 12 00:01:11,020 --> 00:01:13,890 So we're going to leave only this table. 13 00:01:14,680 --> 00:01:16,060 So what's regular do? 14 00:01:16,070 --> 00:01:21,220 Re going to come in our room, my car's dot javascript dot days. 15 00:01:21,880 --> 00:01:29,290 And just in the beginning, before starting with our table take, we are going to create a new box on 16 00:01:29,410 --> 00:01:29,740 your. 17 00:01:31,780 --> 00:01:38,500 We're going to create a new button like this, and here inside we are going to say. 18 00:01:39,820 --> 00:01:41,140 Plus price. 19 00:01:41,300 --> 00:01:43,930 OK, so it is Zais. 20 00:01:45,540 --> 00:01:53,880 Once you click, for example, on this button, the desire is to increase a these different prices that 21 00:01:53,880 --> 00:01:55,830 we have here in our table. 22 00:01:56,670 --> 00:02:05,100 For example, I click on Plus Price and it is easy to see its price to be increased. 23 00:02:05,400 --> 00:02:07,690 Okay, so this is what's really going to do. 24 00:02:07,710 --> 00:02:10,260 So let us begin our second. 25 00:02:11,800 --> 00:02:19,300 The thing we're going to do, we're going to record the events, listen, OK, even listen and hear, 26 00:02:19,300 --> 00:02:25,960 I'm going to say, for example, I'm going to call these attributes the Texas it's boots on Cleek. 27 00:02:25,960 --> 00:02:34,220 Like, do not forget to put the first letter of the last words in Upper Keys. 28 00:02:34,240 --> 00:02:40,030 OK, I'm going to say on Gleek and here I'm going to put my Hybris here. 29 00:02:40,420 --> 00:02:44,590 I'm going to say for his import alerts like. 30 00:02:46,490 --> 00:02:47,480 I'm going to say. 31 00:02:50,800 --> 00:02:51,890 The price. 32 00:02:52,100 --> 00:02:55,960 OK, I'm going to say freezing example, the price is. 33 00:02:57,460 --> 00:03:07,060 Increased like this, and if I try to make here you're going to see this alert, Borse will be launched 34 00:03:07,810 --> 00:03:11,930 when your pitch is reloaded just in the beginning. 35 00:03:11,980 --> 00:03:18,450 OK, as you can see, if you try to reload your page, you are going to court directly the Alaric's 36 00:03:18,460 --> 00:03:19,110 box. 37 00:03:19,170 --> 00:03:21,500 OK, so we don't want this. 38 00:03:22,030 --> 00:03:28,120 The desire is once you click on plus price is to see the ballot both. 39 00:03:28,360 --> 00:03:34,020 And we don't want to see this Arlette's box. 40 00:03:34,540 --> 00:03:37,100 And every time you reload, for example. 41 00:03:37,240 --> 00:03:43,900 OK, so we don't want this is to click on this button and see the ballot box. 42 00:03:44,230 --> 00:03:52,960 What you must to do, you must to integrate your air function in instead of your attributes. 43 00:03:52,970 --> 00:04:00,370 So you're going to call your error function, zhorov function, what you call your gyro function, your 44 00:04:00,620 --> 00:04:01,600 your function. 45 00:04:01,780 --> 00:04:03,040 And it will work. 46 00:04:03,040 --> 00:04:11,350 If I tried back here and once a reload speeds, you're going to see a I don't have any more alerts books. 47 00:04:11,360 --> 00:04:14,800 OK, and if I want to display this hour, it's both. 48 00:04:14,800 --> 00:04:20,140 I need to click on this button once I click, you can see I have the price is increased. 49 00:04:20,350 --> 00:04:24,510 I can click on this, but I have the price is increased. 50 00:04:24,850 --> 00:04:32,380 So make sure to do like this to put your error function in instead of your attributes. 51 00:04:33,860 --> 00:04:40,080 Otherwise, you can create, for example, a function outside your render function. 52 00:04:40,400 --> 00:04:46,400 I can say, for example, here, I'm going to say increase. 53 00:04:49,070 --> 00:04:52,460 I'm going to say freezing increase price. 54 00:04:53,570 --> 00:05:02,840 They can increase the price, I'm going to call, for example, a simple function like in Nonracist 55 00:05:02,840 --> 00:05:05,780 six function is a simple function. 56 00:05:06,660 --> 00:05:09,000 And I'm going to take these alerts. 57 00:05:10,910 --> 00:05:17,960 I'm going to pass this just inside here, I'm going to grab it from these attributes and put it in instead 58 00:05:17,960 --> 00:05:18,890 of dysfunction. 59 00:05:19,820 --> 00:05:27,980 And what I'm going to do, I'm going to come here if I want to display all, I'm going to say this. 60 00:05:28,200 --> 00:05:29,690 But why is this? 61 00:05:30,050 --> 00:05:39,380 Because we are using a component's, having a class type, OK, once using a stateful components in 62 00:05:39,380 --> 00:05:41,430 which you have a class component. 63 00:05:41,630 --> 00:05:48,800 Make sure to put this key with this, OK, in order to call your function and you're going to state 64 00:05:49,280 --> 00:05:50,470 increased price. 65 00:05:50,520 --> 00:05:50,990 OK. 66 00:05:52,370 --> 00:05:59,810 And if I tried to beg here and say, reloads, I don't have reaction about the ballot box, if I want 67 00:05:59,810 --> 00:06:07,430 to see this message on my art box, I have to click on increased price. 68 00:06:07,430 --> 00:06:12,500 And as you can see, I have this message, like I have this message. 69 00:06:12,920 --> 00:06:21,830 And if I try to put my brackets like this, I'm going to get the similar things that I have in the beginning. 70 00:06:22,310 --> 00:06:27,320 You read books will appear every time you're going to reload your page. 71 00:06:27,390 --> 00:06:31,070 OK, and now we don't want this program. 72 00:06:31,070 --> 00:06:35,500 Did you say is once you click to view to display your ballot box. 73 00:06:35,570 --> 00:06:38,090 OK, so you have to avoid this problem. 74 00:06:38,120 --> 00:06:46,670 So what you're going to do once you put your brackets like this, make sure to call the arrow function 75 00:06:46,670 --> 00:06:52,150 just instead of your attributes like this, and then you're going to solve this problem. 76 00:06:52,460 --> 00:07:00,700 Let us make sure let us reload and no reaction about the ballot box and click on increase press perfect's, 77 00:07:01,220 --> 00:07:01,510 OK? 78 00:07:02,880 --> 00:07:12,060 Otherwise, if I can do like this, this does increase price, but the D.A. here, we are going to define 79 00:07:12,060 --> 00:07:13,620 dysfunction is in the room. 80 00:07:13,630 --> 00:07:23,570 And when I say Ekert and I'm going to put like this so you can play with these different precise processes, 81 00:07:23,580 --> 00:07:26,250 OK, you can play with these different processes. 82 00:07:26,700 --> 00:07:28,060 And it is very simple. 83 00:07:28,080 --> 00:07:32,070 OK, you can use directly in error function here and here. 84 00:07:32,340 --> 00:07:35,930 You're are going to say simple, these dots increase process. 85 00:07:36,000 --> 00:07:41,450 So remove this like remove your brackets like this. 86 00:07:41,530 --> 00:07:43,680 Let us make here, let us reload. 87 00:07:43,920 --> 00:07:48,350 And when you reload, you're going to see no reaction about our box. 88 00:07:48,360 --> 00:07:52,620 And once you click on Price, you are going to see Àlex Box. 89 00:07:53,130 --> 00:07:56,380 And it is very interesting to note all this. 90 00:07:58,100 --> 00:08:02,690 These things, these things, and I think that's very helpful. 91 00:08:02,880 --> 00:08:13,310 OK, very simple and what's required to and now you're going to know we have some thing once you use 92 00:08:13,310 --> 00:08:16,790 Friesian part, a simple function is you can see here. 93 00:08:16,800 --> 00:08:17,690 So let us. 94 00:08:18,700 --> 00:08:21,500 Breakfast for the odd function like this. 95 00:08:21,520 --> 00:08:22,860 It was perfect. 96 00:08:24,570 --> 00:08:25,020 Lost. 97 00:08:26,850 --> 00:08:32,330 Or three, glad to hear, yes, you are going to remove. 98 00:08:33,550 --> 00:08:40,710 These rape kits like this, or you can put like this or general function other ways you can do like 99 00:08:40,720 --> 00:08:44,240 this, you can remove these brackets. 100 00:08:44,650 --> 00:08:46,330 It still works perfectly. 101 00:08:46,330 --> 00:08:49,180 Just click here, click on Price. 102 00:08:49,310 --> 00:08:54,970 OK, so what is the inconvenience of using this simple function? 103 00:08:55,270 --> 00:09:04,780 OK, as you can see, we are using a class in a class components that is stateful components. 104 00:09:04,820 --> 00:09:12,160 OK, and if you try to use the simple function, if we try to say. 105 00:09:16,430 --> 00:09:22,220 To display a console like, say, for example, once they click on this button, so you are going to 106 00:09:22,400 --> 00:09:27,060 display every properties, all properties of these. 107 00:09:27,280 --> 00:09:28,850 OK, so let us back here. 108 00:09:29,150 --> 00:09:29,720 Let us. 109 00:09:31,560 --> 00:09:38,010 Rats click, inspect and click on console, click on Price, you're going to see this is going to be 110 00:09:38,040 --> 00:09:38,740 undefined. 111 00:09:38,740 --> 00:09:41,950 It's as you can see, this is undefined. 112 00:09:41,950 --> 00:09:42,690 It's like. 113 00:09:44,590 --> 00:09:46,930 If I tried to do something is. 114 00:09:48,150 --> 00:09:48,930 These. 115 00:09:50,040 --> 00:09:51,090 Properties. 116 00:09:55,980 --> 00:10:00,060 Are like these little trophies for to like this. 117 00:10:01,930 --> 00:10:12,100 Click on for as you can see, these properties are undefined because you are using a seaport function, 118 00:10:12,100 --> 00:10:13,450 which is increase. 119 00:10:13,500 --> 00:10:20,020 OK, but if you try to use a narrow function, like you say, equal to. 120 00:10:22,790 --> 00:10:29,810 Use your air function if you try to make here and click on Enquist Press, you're going to see you have 121 00:10:30,140 --> 00:10:36,140 these properties are you have all these objects, as you can see, all these properties. 122 00:10:36,170 --> 00:10:43,600 OK, so if we try to remove this, you are going to see we are going to have all properties of this. 123 00:10:44,060 --> 00:10:45,490 I can't click on press. 124 00:10:46,070 --> 00:10:55,520 This is different purposes of this about the class that we have in these components and about the parents 125 00:10:55,520 --> 00:10:57,110 class, which is components. 126 00:10:57,320 --> 00:11:02,720 OK, so let us back here and you can see we have all these properties. 127 00:11:03,080 --> 00:11:09,680 As you can see, we have props, everything, every function, all functions, everything about these 128 00:11:09,830 --> 00:11:10,640 components. 129 00:11:10,820 --> 00:11:11,510 Very good. 130 00:11:13,190 --> 00:11:21,200 And agency here makes sure to use the air of function every time you are using it, glass components. 131 00:11:21,230 --> 00:11:28,070 OK, do not use a simple function, Idrees, if you don't want to use the error function like this, 132 00:11:28,070 --> 00:11:30,950 if you have, for example, here is simple function. 133 00:11:31,490 --> 00:11:38,210 So what you are going to do, you are going to call your error functions us inside here. 134 00:11:39,720 --> 00:11:44,790 Just such year, you're going to say just a dot increase. 135 00:11:44,850 --> 00:11:48,660 OK, if you try to make here click on price. 136 00:11:49,440 --> 00:11:50,400 Excuse me. 137 00:11:53,030 --> 00:11:54,860 Here like these. 138 00:11:57,950 --> 00:12:04,640 So, yes, here, do not forget to put brackets like this click on price. 139 00:12:04,690 --> 00:12:11,000 OK, so you're going to see a different properties of your. 140 00:12:14,260 --> 00:12:17,520 All the components we have, my cars, you're going to see a. 141 00:12:18,630 --> 00:12:28,140 Are these OK in your class component, so you have to to keep all this in your minds every time we are 142 00:12:28,140 --> 00:12:34,170 going to be using a class components, make sure to use every time in a row function. 143 00:12:34,200 --> 00:12:37,350 OK, be called a juror function. 144 00:12:37,350 --> 00:12:40,950 Is the modern JavaScript for the Eskimo's script. 145 00:12:42,020 --> 00:12:44,120 OK, for you is the six. 146 00:12:44,130 --> 00:12:48,550 So make sure to always use the JIRA function. 147 00:12:48,570 --> 00:12:50,190 It is very interesting. 148 00:12:50,230 --> 00:12:52,920 OK, so I want to tell you something. 149 00:12:54,390 --> 00:13:02,640 We've done JavaScript where when you are using the event, when you are creating, for example, your 150 00:13:02,640 --> 00:13:09,450 function by using events, because you have here a button on which we click when you click, for example, 151 00:13:09,690 --> 00:13:17,430 it is an event once you're using, for example, events in JavaScript and then your function by beginning, 152 00:13:17,790 --> 00:13:23,340 by beginning, by putting handlock in the beginning of your function. 153 00:13:23,350 --> 00:13:25,350 For example, here we have increased press. 154 00:13:25,890 --> 00:13:29,340 So make sure to begin with this word entry. 155 00:13:29,430 --> 00:13:36,720 This is a convention like it is not an obligation, but it is just a convention, OK, or. 156 00:13:38,210 --> 00:13:44,840 If you want, you can start with the name of your function, but just in the end, OK, make sure to 157 00:13:44,840 --> 00:13:51,740 put handles like this, OK, in the beginning here, you're the first letter of entry, which is eight 158 00:13:51,800 --> 00:13:53,710 must be in uppercase. 159 00:13:54,170 --> 00:13:57,490 OK, so make sure to do like this. 160 00:13:57,830 --> 00:14:02,480 It is not an obligation, but it is just a convention. 161 00:14:02,510 --> 00:14:06,140 OK, so we are going to continue to the next video.