1 00:00:00,060 --> 00:00:08,370 Paragraph ends here in our index duty, yes, we are going to integrate all our application, which 2 00:00:08,370 --> 00:00:14,940 is in our approaches, because we are going to create applications, we are going to create several 3 00:00:15,030 --> 00:00:20,390 components which is going which are going to be included in our approaches. 4 00:00:20,610 --> 00:00:27,000 And in years, we are going to take all approaches in which we have all our application and integrate 5 00:00:27,000 --> 00:00:31,800 these components here in order to be rendering to the dome, which is our. 6 00:00:33,120 --> 00:00:40,960 So let us make our approaches and can see if we try now to make here and reload the page we have here. 7 00:00:41,400 --> 00:00:51,690 So what the saying says, let us back here and you can see line six 18 up is not define it as you can 8 00:00:51,690 --> 00:00:54,260 see in which file index today. 9 00:00:54,370 --> 00:00:58,320 So let us make our index today as we have line six. 10 00:00:59,070 --> 00:01:07,650 It's in the sense that app is not defined because we need to import the app today is in our index, 11 00:01:07,650 --> 00:01:12,260 that is in order to use the components, the app component. 12 00:01:12,310 --> 00:01:23,220 So we are going to come here and we're going to say in part we're going to say imports up Latisse. 13 00:01:24,380 --> 00:01:25,070 From. 14 00:01:28,150 --> 00:01:35,140 And the Far East and the same roads, and you're going to choose up to chase here, you can see here 15 00:01:35,470 --> 00:01:43,690 and now you can see attempts in parts and we have, you know, their message er we have up does not 16 00:01:43,690 --> 00:01:48,500 contain a different experts like you can see dots up. 17 00:01:48,550 --> 00:01:53,730 That means this approach is does not contain any effort expert. 18 00:01:54,220 --> 00:02:03,580 What it means was creating your components in the end here you need to export your components, reason 19 00:02:03,580 --> 00:02:06,220 why you hit, reason why we have this ear. 20 00:02:06,460 --> 00:02:14,710 So you need to say exports, defaults like this and you are going to export your function like this. 21 00:02:16,440 --> 00:02:17,630 Where are you going to set up? 22 00:02:18,600 --> 00:02:19,680 As you can see here. 23 00:02:20,850 --> 00:02:31,410 And here you can you can declare your functions and in small case, so it doesn't it is not a problem. 24 00:02:31,410 --> 00:02:37,710 You can say function up like this, you can say function up like this, but where? 25 00:02:38,570 --> 00:02:43,650 Well, importing your your components, you are going to name it like this. 26 00:02:43,680 --> 00:02:49,290 The first letter must be uppercase and here in part your fault. 27 00:02:49,300 --> 00:02:57,930 So I'm going to show you why, because if you try to put in small case like this and if you try to put 28 00:02:57,930 --> 00:03:06,790 it like this, you're going to see it will be like a a e inishmaan. 29 00:03:06,810 --> 00:03:09,940 It's a six a tag like in each one. 30 00:03:09,950 --> 00:03:14,340 Sikich can see if you try, for example, to declare in each one lattice. 31 00:03:15,670 --> 00:03:24,550 You can see it is like this and it will be like a niche type, but not as a component's reason, what 32 00:03:24,550 --> 00:03:30,610 you need to put the first letter in uppercase and here you are going to put like this and it should 33 00:03:30,610 --> 00:03:33,340 be a cholerae like this. 34 00:03:34,270 --> 00:03:39,010 And if we try to back up dodgiest here, we can export like this. 35 00:03:39,010 --> 00:03:44,320 Or you can also put a Knopper case for the first letter Esurance. 36 00:03:44,530 --> 00:03:46,870 But I prefer to do it like this. 37 00:03:47,770 --> 00:03:55,570 And if we try to export like these export defaults up and here we have imports up and import the to 38 00:03:55,580 --> 00:04:01,930 chase and let us big first try to reload the page, you're going to see we are going to get the same 39 00:04:01,930 --> 00:04:02,710 message here. 40 00:04:02,710 --> 00:04:04,410 Lauret, very simple. 41 00:04:04,990 --> 00:04:09,530 OK, and let us try the first row to make way up doses. 42 00:04:09,820 --> 00:04:13,780 As you can see, this is a state list components. 43 00:04:14,470 --> 00:04:17,890 Its deadly components does not contain data. 44 00:04:18,640 --> 00:04:20,160 Is this list components. 45 00:04:20,560 --> 00:04:28,150 It allows us to return to view only a message, for example, as you can see, to view something. 46 00:04:29,290 --> 00:04:40,150 But a stateful components are a plus components is used to contain data in the states and they can also 47 00:04:40,150 --> 00:04:45,250 view information like the statelets components. 48 00:04:47,050 --> 00:04:48,910 And this is a function. 49 00:04:49,300 --> 00:04:58,880 And then if we are using, for example, the SSX, which is the which is the modern JavaScript schema, 50 00:04:58,930 --> 00:05:04,810 script six, instead of using this Kando function, you can use the zero function. 51 00:05:05,140 --> 00:05:09,520 As you can see a for example, here we get a function up. 52 00:05:10,000 --> 00:05:15,190 You can say, for example, you can declare, for example, an error function like this. 53 00:05:15,190 --> 00:05:18,640 You remove all this and hear what you going to say. 54 00:05:18,640 --> 00:05:20,760 You want to put the arrow like this. 55 00:05:22,030 --> 00:05:23,350 This is your function. 56 00:05:23,590 --> 00:05:27,060 And here you can see and accept it in exchange. 57 00:05:27,340 --> 00:05:31,150 Call and yes, expect it in a sec. 58 00:05:31,150 --> 00:05:37,710 In a sentence or function call and instead sought expression up is not defined, is up, is not it? 59 00:05:37,750 --> 00:05:40,810 If you want to define this we can say for example const. 60 00:05:42,910 --> 00:05:45,130 He's going to be escorted to this. 61 00:05:46,780 --> 00:05:55,810 It costs, yes, cost our police costs up is going to be our error function, and during this course 62 00:05:55,810 --> 00:05:56,410 we are going to be. 63 00:05:56,770 --> 00:06:01,140 This is Eskimo's scripts, a function type, as you can see here. 64 00:06:01,330 --> 00:06:05,450 This is the in the modern age of the modern JavaScript. 65 00:06:05,650 --> 00:06:10,750 So let us make sure and if you try to read this page, you're going to see that we're going to get the 66 00:06:10,760 --> 00:06:11,400 same thing. 67 00:06:11,860 --> 00:06:19,840 And this is how to declare, for example, a stateless component or a function components. 68 00:06:20,050 --> 00:06:23,320 You are going to use it a function. 69 00:06:23,860 --> 00:06:26,730 And let us talk about this. 70 00:06:26,860 --> 00:06:33,730 It's four components how to create a state, three components to create a state, three components you 71 00:06:33,730 --> 00:06:34,630 need to. 72 00:06:36,340 --> 00:06:44,830 Youth class and hearing asset class, pulling them out of your class and make sure here we are creating 73 00:06:44,830 --> 00:06:53,110 a class, you can see as far as you know, if you want to create a class, you have to use this notion 74 00:06:53,590 --> 00:06:58,350 in the first letter of the name of your class must be in uppercase. 75 00:06:58,690 --> 00:07:06,160 As you can see here, we are going to create a component's a name ID up by using class because it is 76 00:07:06,160 --> 00:07:07,570 a for components. 77 00:07:07,960 --> 00:07:11,530 And we are going to say class up extends. 78 00:07:13,020 --> 00:07:23,760 They must extends another class, which is components and hearing I say class up extends reciept, not 79 00:07:23,910 --> 00:07:30,990 because we have imported the results dependence and here we are going to call the component class. 80 00:07:32,510 --> 00:07:36,650 Lattice components put your codebase braces like this. 81 00:07:38,200 --> 00:07:46,270 As you can see, and here we are going to export like this, you need to stand here and put in our bridges 82 00:07:47,020 --> 00:07:50,710 and what are we going to do if you want to return, for example, this message? 83 00:07:50,710 --> 00:07:59,910 Because in the future, we're going to see how we can integrate the data in these type of scans of the 84 00:07:59,920 --> 00:08:06,930 components, which is this effort we're going to call the render function in the class components you 85 00:08:06,940 --> 00:08:11,490 are going to call during their function in inside of your render function. 86 00:08:11,800 --> 00:08:15,230 We are going to put these ireton functions. 87 00:08:15,250 --> 00:08:24,720 So, you know, to return, for example, a message that is because we have a component with these three 88 00:08:24,730 --> 00:08:27,430 components, we can return a message. 89 00:08:27,820 --> 00:08:29,990 We can give you message, display message. 90 00:08:30,010 --> 00:08:33,040 We can also contain a star data. 91 00:08:33,670 --> 00:08:36,430 And as you can see here, we written like this. 92 00:08:37,520 --> 00:08:43,890 And if I tried to make here and reload a page, you are going to say we are going to get the same thing. 93 00:08:44,110 --> 00:08:45,700 This is the in order. 94 00:08:46,100 --> 00:08:49,420 You can use if you want to example inputs, create the components. 95 00:08:50,490 --> 00:08:55,100 Let us throw a take this problem here. 96 00:08:55,460 --> 00:08:59,960 Instead of putting those components, you can remove results. 97 00:09:00,260 --> 00:09:08,600 You can come here and put comma up in your college courses and you are going to say components like 98 00:09:08,600 --> 00:09:10,100 these components. 99 00:09:10,580 --> 00:09:17,360 And if you try to make sure you are going to, we are going to have the same thing there, same poll. 100 00:09:17,870 --> 00:09:21,890 And this is a four components here. 101 00:09:22,240 --> 00:09:27,050 We are using glass and notice, for example, we have this written function. 102 00:09:27,470 --> 00:09:33,800 If you are written, for example, only one called a single card's a single line code. 103 00:09:34,250 --> 00:09:35,480 You can do like this. 104 00:09:38,100 --> 00:09:39,450 You can come here. 105 00:09:41,340 --> 00:09:49,860 OK, and if you try to make sure we are going to get the same thing here, you can see the same thing 106 00:09:50,610 --> 00:09:58,650 while using a distastefully components in a glass or a statelets components in your function, the same 107 00:09:58,650 --> 00:09:59,040 thing.