1 00:00:10,090 --> 00:00:16,690 Welcome back in this course and in course, we're going to talk about reactivates love seekers like 2 00:00:16,960 --> 00:00:24,400 a real components, love seekers, for example, when you are using, for example, components in reoccurs, 3 00:00:24,790 --> 00:00:30,430 you have to know that we have three phases in a reactivates component. 4 00:00:30,560 --> 00:00:34,060 Like the first phase is the mounting phase. 5 00:00:34,510 --> 00:00:41,050 The second phase is the updating phase, and the third phase is the amounts in phase. 6 00:00:41,170 --> 00:00:48,760 OK, and in this session, in these cars, in this lesson, we are going to treat Colthurst work the 7 00:00:49,210 --> 00:00:57,490 mountain phase, which is the first phase of a component lifecycle, which is OK. 8 00:00:58,000 --> 00:01:05,720 And when you want to months, for example, your components, as you can see here, year on year, OK, 9 00:01:06,220 --> 00:01:08,020 we have our block launches here. 10 00:01:08,020 --> 00:01:14,720 As you can see, we have to view, for example, this our when you want to month, for example, these 11 00:01:14,740 --> 00:01:22,330 components, the first thing he happens is the creation of the components, OK, because we are talking 12 00:01:22,330 --> 00:01:25,270 about the mounting phase. 13 00:01:25,840 --> 00:01:33,310 If you want to mount a component, deforesting halfpence is the creation of your components and the 14 00:01:33,310 --> 00:01:35,080 creation of the components. 15 00:01:39,260 --> 00:01:48,590 Like I said, the aim, the creation of your component happens instead of your construction, because 16 00:01:48,590 --> 00:01:55,700 as you can see, I have told you, you can use directly states like this or you can put your state in 17 00:01:55,980 --> 00:01:57,380 in your construction. 18 00:01:57,530 --> 00:02:08,300 OK, because we have the last the last version of Regius, and it was an obligation to create construction 19 00:02:08,420 --> 00:02:10,670 in your last component. 20 00:02:10,680 --> 00:02:13,760 As you can see, this is the full components. 21 00:02:14,030 --> 00:02:19,330 And while you are using, for example, is for when you are using, for example, for instance, three 22 00:02:19,340 --> 00:02:23,080 components, make sure to create your construction in this. 23 00:02:25,140 --> 00:02:33,090 And in this class, OK, in this class, but the actual nearest things, OK, with the actual religious 24 00:02:33,690 --> 00:02:40,120 version, you don't need to create your own structure in order to put it in inside of it. 25 00:02:40,620 --> 00:02:47,670 You can't you can't directly put it like this, but if you want to display this different process and 26 00:02:47,850 --> 00:02:50,460 make sure to create a construction. 27 00:02:50,490 --> 00:02:53,460 OK, so we are going to create a structure like this. 28 00:02:55,310 --> 00:03:03,980 You know, this view is different from the process, OK, and call your props like this super. 29 00:03:04,880 --> 00:03:12,320 Props like this and let us take our states, we're going to put our stapes, our states in instead of 30 00:03:12,320 --> 00:03:12,460 a. 31 00:03:13,720 --> 00:03:14,470 Construction. 32 00:03:14,590 --> 00:03:14,880 OK. 33 00:03:16,460 --> 00:03:25,570 Because like I said, this is the first thing happens when you are mounting your components. 34 00:03:25,610 --> 00:03:32,590 The first thing happened is the creation of your components and the creation of your components halfpence 35 00:03:32,590 --> 00:03:34,350 instead of your construction. 36 00:03:34,480 --> 00:03:43,000 So reason why I have created this construction site here in order to make a console like, for example, 37 00:03:43,180 --> 00:03:44,510 components creation. 38 00:03:44,570 --> 00:03:48,760 OK, so we are going to put a console log here. 39 00:03:48,770 --> 00:03:49,840 We are going to say. 40 00:03:54,830 --> 00:03:55,670 We're going to see. 41 00:03:57,420 --> 00:03:58,680 The component. 42 00:04:01,060 --> 00:04:01,870 Creation. 43 00:04:01,930 --> 00:04:04,330 I can't let this let us make here. 44 00:04:05,350 --> 00:04:06,720 Leader's speech. 45 00:04:06,920 --> 00:04:10,270 OK, as you can see here, the components creation. 46 00:04:10,350 --> 00:04:19,240 OK, that's means, like I just said, if you want to months a components, the first step is the creation 47 00:04:19,240 --> 00:04:25,360 of your components and the creation of your components happens inside of your construction. 48 00:04:25,490 --> 00:04:27,920 OK, so that's means in the monsoon phase. 49 00:04:27,940 --> 00:04:30,340 The first thing we have is the construction. 50 00:04:30,520 --> 00:04:37,030 OK, so make sure to use a stateful component in order to access new construction. 51 00:04:37,180 --> 00:04:39,830 OK, the first thing is the construction. 52 00:04:39,880 --> 00:04:45,240 And instead of your construction, we have the components creation. 53 00:04:45,580 --> 00:04:55,510 That's means your component is your components and the components is being created. 54 00:04:55,540 --> 00:05:00,400 OK, now that means your we have the components creation inside of your construction. 55 00:05:00,550 --> 00:05:00,920 OK. 56 00:05:01,240 --> 00:05:09,400 And after your component has been created, now we are going to pass to the render function and the 57 00:05:09,400 --> 00:05:11,170 importance of the render function. 58 00:05:11,440 --> 00:05:18,520 The render functions allows us to take these created components and take these created components and 59 00:05:18,520 --> 00:05:23,470 send it to the return function in order to be displayed in our browser. 60 00:05:23,590 --> 00:05:28,120 OK, as you can see after the construction we have the render function. 61 00:05:28,330 --> 00:05:35,470 The render function will take your created components and send it to the return function in order to 62 00:05:35,470 --> 00:05:38,640 be displayed in our brother, which is our DOM. 63 00:05:38,870 --> 00:05:42,540 OK, we take these components. 64 00:05:42,550 --> 00:05:45,970 This creates a component, the render function, the render function. 65 00:05:46,000 --> 00:05:52,510 We take these created components and render them in the DOM by using the written function. 66 00:05:52,570 --> 00:05:56,280 OK, as you can see, it is very simple and very clear. 67 00:05:56,530 --> 00:06:01,190 So I'm going to advise you to add another layer instead of our states. 68 00:06:01,210 --> 00:06:04,520 As you can see, we are going to call this data step. 69 00:06:04,540 --> 00:06:13,210 OK, and the initial in the initial value is going to be equal to one, OK? 70 00:06:13,210 --> 00:06:15,910 The initial will is going to be equal to one. 71 00:06:16,270 --> 00:06:23,590 And here in Insight's, we are going to use the template literal in order to view these different information 72 00:06:23,590 --> 00:06:24,190 like this. 73 00:06:25,810 --> 00:06:30,310 What are you going to say we are going to put away we're going to say 74 00:06:32,920 --> 00:06:40,340 these dot states, we are going to access the state data, which is inside of our state. 75 00:06:40,390 --> 00:06:43,650 We are going to say this state, that state. 76 00:06:44,140 --> 00:06:47,110 OK, that's means we have it here and here. 77 00:06:47,110 --> 00:06:50,830 We're going to say step one, for example, OK, like this. 78 00:06:51,100 --> 00:06:51,580 Yes. 79 00:06:51,850 --> 00:06:57,880 If we put it like this with the current value, which is one, we are going to have step one here. 80 00:06:57,880 --> 00:06:58,870 We're going to have one. 81 00:06:59,200 --> 00:07:03,490 And here we are going to say the components creation, OK? 82 00:07:06,890 --> 00:07:09,930 OK, we have the components creation. 83 00:07:10,100 --> 00:07:14,990 Step one, OK, we are in the phrase yes. 84 00:07:16,000 --> 00:07:23,980 The step one or phase one, OK, the mounting phase, the mounting fees, for example, excuse me, 85 00:07:23,980 --> 00:07:27,470 the mounting fees, which is the first step. 86 00:07:27,970 --> 00:07:32,590 This day, the first phase of our religious lovesickness. 87 00:07:32,680 --> 00:07:41,140 OK, and once your components is created instead of your construction, we are going to recall we are 88 00:07:41,140 --> 00:07:47,920 going to pass now the render function because the render function happens after your components has 89 00:07:47,920 --> 00:07:48,730 been created. 90 00:07:48,760 --> 00:07:52,370 OK, and a render function will take this created components. 91 00:07:52,420 --> 00:07:59,560 OK, take discrete created components and they render these components through the dome via your return 92 00:07:59,560 --> 00:08:00,130 function. 93 00:08:00,160 --> 00:08:09,430 OK, and now if your components is viewed in the browser, OK, we can access the components, the demands 94 00:08:09,430 --> 00:08:13,330 and when we access for example, to the components. 95 00:08:13,390 --> 00:08:17,040 But that means your components is now mount's. 96 00:08:17,050 --> 00:08:17,910 It's OK. 97 00:08:18,430 --> 00:08:19,990 This is the mounting face. 98 00:08:20,110 --> 00:08:26,140 First of all, you have the creation of your components, which happens inside of your structure. 99 00:08:26,470 --> 00:08:33,490 And after your components has been created, you're going to pass the render function and the render 100 00:08:33,490 --> 00:08:34,510 function will take. 101 00:08:34,510 --> 00:08:42,390 This creates the components and they render them to the DOM in order to be displayed to your brother. 102 00:08:42,640 --> 00:08:50,230 And after this, after your components has been displayed, you can now access to the components this 103 00:08:50,230 --> 00:08:50,610 month. 104 00:08:50,800 --> 00:08:53,570 That means your components is mounted. 105 00:08:53,860 --> 00:09:00,670 This is what we call the mounting phase, lack of a components in reality, I love. 106 00:09:01,480 --> 00:09:05,080 OK, I think that it is very simple and very clear. 107 00:09:05,860 --> 00:09:06,670 As I can see. 108 00:09:06,970 --> 00:09:11,740 You can say step or phase, OK, because we are talking in these moments. 109 00:09:13,300 --> 00:09:17,810 We are talking about the mountain phase. 110 00:09:17,830 --> 00:09:18,820 OK, yes. 111 00:09:18,820 --> 00:09:19,840 Let us come here. 112 00:09:20,230 --> 00:09:26,800 And the thing and think happen is let us take all this is the render function, OK? 113 00:09:26,800 --> 00:09:28,940 We are going to display all this process. 114 00:09:28,960 --> 00:09:31,130 OK, step one all the way. 115 00:09:31,570 --> 00:09:32,140 Step one. 116 00:09:32,140 --> 00:09:38,500 Also, we are going to say, for example, they created components like we are going to say they created. 117 00:09:44,080 --> 00:09:46,270 They created components is. 118 00:09:50,360 --> 00:10:01,040 He's in the render function like this, OK, and if we try to make here like you have, you have to 119 00:10:01,040 --> 00:10:06,130 see we have this tape, one that means that the first phase, which is the mountain phase, we have 120 00:10:06,130 --> 00:10:11,720 phase for the creation of the components creation, which is our reconstruction. 121 00:10:12,110 --> 00:10:17,780 And the second thing we have, the render function like they created components is in the arena function, 122 00:10:17,780 --> 00:10:20,510 as you can see, the K lattice. 123 00:10:20,930 --> 00:10:25,870 And then the other thing is when the component is displayed. 124 00:10:25,940 --> 00:10:28,790 OK, let us see orosz. 125 00:10:29,480 --> 00:10:37,100 Our picture here, we have the render function and our component is displayed in these parts here because 126 00:10:37,100 --> 00:10:42,830 the render functions we take the created function like the created components, please, the render 127 00:10:42,830 --> 00:10:46,720 function, we take the created components and render them to the dome. 128 00:10:46,940 --> 00:10:52,980 OK, in order to be displayed in our Bourassa and our components will be displayed here. 129 00:10:53,430 --> 00:10:56,650 OK, this is our dome, as you can see here. 130 00:10:56,690 --> 00:10:57,920 This is our block. 131 00:10:57,920 --> 00:11:06,020 There's a block Bluejays components, this block, there's this clock notice components is displayed 132 00:11:06,020 --> 00:11:06,940 in our brother. 133 00:11:06,950 --> 00:11:11,300 That means we are in these parts like we are in these parts. 134 00:11:11,450 --> 00:11:13,430 React update this dome. 135 00:11:13,580 --> 00:11:15,650 And Rafe's like. 136 00:11:16,620 --> 00:11:25,680 And let us be clear, this is the second and really take all this us all this, and we're going to pass 137 00:11:25,690 --> 00:11:33,690 this inside of or return function like the render functions, take the A function like ains. 138 00:11:34,950 --> 00:11:43,590 It has come here and here we're going to put all the cards behind this because we are inside of it and 139 00:11:43,590 --> 00:11:48,070 we want to Rudd's office for it's called Make Sure to put Auton called RECIST. 140 00:11:48,390 --> 00:11:51,510 And here we are, not in the return function, OK? 141 00:11:52,450 --> 00:11:59,800 The ORENDER takes all these creative components and send it to the brother, send it to the dump in 142 00:11:59,800 --> 00:12:05,500 order to be displayed in the dome via our written function. 143 00:12:05,640 --> 00:12:12,760 OK, as you can see, and now we can see, for example, they created components is displayed because 144 00:12:12,760 --> 00:12:17,100 we are in the written function like these displays like this. 145 00:12:18,100 --> 00:12:21,160 Your component is displayed in the written function. 146 00:12:21,300 --> 00:12:23,890 OK, we are here, OK. 147 00:12:24,250 --> 00:12:29,890 And the render function take only these components and render them to the written function in order 148 00:12:29,890 --> 00:12:33,280 to view which they want to be displayed in the dome. 149 00:12:33,660 --> 00:12:34,770 OK, very simple. 150 00:12:35,140 --> 00:12:43,400 And once your component is displayed, we are going to pass directly in the component did months. 151 00:12:43,750 --> 00:12:53,560 Let us make this work in our browser to see the reaction we have about the display like the components 152 00:12:53,560 --> 00:12:54,170 creation. 153 00:12:54,670 --> 00:13:00,370 This is you can structure the created component is not in the render function and a random function. 154 00:13:00,370 --> 00:13:06,970 Take these created components and send it to the return function in order to be displayed in our brothers. 155 00:13:06,990 --> 00:13:13,930 The reason why you can see we have here the components they created components is displayed OK after 156 00:13:13,940 --> 00:13:17,930 the company they created components has been displayed. 157 00:13:17,980 --> 00:13:22,530 Now we can access to the components these months function. 158 00:13:22,750 --> 00:13:25,390 That means our component is mounted. 159 00:13:25,570 --> 00:13:26,950 OK, let us make. 160 00:13:27,950 --> 00:13:29,150 It is very simple. 161 00:13:29,900 --> 00:13:32,130 Let us be clear and what are you going to say? 162 00:13:32,660 --> 00:13:39,680 We are going to create we are going to call, for example, we are going to call the component did not 163 00:13:39,680 --> 00:13:40,250 function. 164 00:13:40,250 --> 00:13:43,850 And you can read CGM, that is components. 165 00:13:43,910 --> 00:13:44,460 It mounts. 166 00:13:44,480 --> 00:13:50,120 And we are going to put it on like you side here and we're going to say step one. 167 00:13:50,390 --> 00:13:53,660 We are going to say the components is mounted. 168 00:13:57,070 --> 00:13:59,650 The component is mounted like this.