1 00:00:00,150 --> 00:00:08,520 Beautiful job once we're back from the useful extensions detour now, I would want to make a plunge 2 00:00:08,820 --> 00:00:10,700 into our component. 3 00:00:11,130 --> 00:00:15,470 So essentially we know that we will cover imports a little bit later. 4 00:00:15,810 --> 00:00:22,350 We know that as far as the render, it is only in one place essentially where we inject our jobs. 5 00:00:22,950 --> 00:00:26,160 So now, of course, let's talk about this sucker. 6 00:00:26,550 --> 00:00:31,620 And essentially the official name is going to be less functional component. 7 00:00:32,010 --> 00:00:37,650 Now, there are also called Dume Components, because at the moment it doesn't have something called 8 00:00:37,650 --> 00:00:40,680 state, something that will cover later. 9 00:00:41,010 --> 00:00:48,870 And as far as the rules now, the biggest one would be that we always, always need to return something. 10 00:00:49,250 --> 00:00:57,180 For example, if I select and if I'll do it, you'll see that there is a big factor where it says nothing 11 00:00:57,330 --> 00:00:59,080 was returned from the ORENDER. 12 00:00:59,400 --> 00:01:07,260 So you always, always must return something, even if that something is an empty HDMI element. 13 00:01:07,650 --> 00:01:13,050 Of course, you can say and of course you can see that at least now we don't have the error. 14 00:01:13,500 --> 00:01:22,130 Now, I also want to talk about this, Jay aspects, because technically you don't have to type here. 15 00:01:22,140 --> 00:01:23,010 This is normal. 16 00:01:23,290 --> 00:01:26,230 This ASML is to help you. 17 00:01:26,850 --> 00:01:33,540 OK, I know it sounds weird because for a lot of people probably saying that we are returning, just 18 00:01:33,540 --> 00:01:40,830 HMO might seem a little bit foreign, but just keep in mind that essentially under the hood, we're 19 00:01:40,830 --> 00:01:42,750 still calling functions. 20 00:01:43,290 --> 00:01:44,270 Now, don't believe me. 21 00:01:44,550 --> 00:01:45,450 Why don't we do this? 22 00:01:45,870 --> 00:01:47,510 Why don't we set up here? 23 00:01:47,520 --> 00:01:48,240 Hello, world. 24 00:01:49,690 --> 00:01:57,670 And then I'll create another component with the same name and everything, and I'll set it up using 25 00:01:57,670 --> 00:02:04,240 the function calls, just so you can see that under the hood when we type of this heading for, we're 26 00:02:04,240 --> 00:02:06,360 still making those function calls. 27 00:02:06,640 --> 00:02:09,150 Not since we cannot have two components. 28 00:02:09,160 --> 00:02:10,660 We get the same exact name. 29 00:02:10,690 --> 00:02:13,510 And I'm too lazy to come up with a new component. 30 00:02:13,510 --> 00:02:19,400 And then over here, I'll just come on the set and let's set up our component one more time. 31 00:02:19,830 --> 00:02:22,680 So here we go with function and you're not. 32 00:02:23,020 --> 00:02:29,580 Why don't we do in this case as a function, just so you can see that it's going to work the same way. 33 00:02:29,800 --> 00:02:32,100 So we're going to go here with a greeting. 34 00:02:32,350 --> 00:02:34,750 So that is going to be minara function. 35 00:02:34,990 --> 00:02:42,910 And then instead of returning to normal, which is to help us to have a little bit easier syntax, what 36 00:02:42,910 --> 00:02:51,640 we could do is go with return and then we're going to go with react, then create an element that is 37 00:02:51,640 --> 00:02:52,150 the function. 38 00:02:52,330 --> 00:02:54,550 And then this function is looking for three things. 39 00:02:54,910 --> 00:02:57,490 What element we would want to return. 40 00:02:57,670 --> 00:03:01,150 That's number one then Proops object, which we haven't covered. 41 00:03:01,480 --> 00:03:07,070 So don't worry, we'll just pass in the empty object and then what is going to be the children? 42 00:03:07,330 --> 00:03:10,370 So what is going to be rendered inside that element? 43 00:03:10,660 --> 00:03:13,540 Now, as far as the element, I think I'm going to go with one. 44 00:03:14,610 --> 00:03:19,470 And then, like I said, perhaps object, having covered props yet, so it let's just past empty object 45 00:03:19,800 --> 00:03:21,900 and the last thing is going to be the children. 46 00:03:22,140 --> 00:03:24,360 So here I'm going to go with Laurel. 47 00:03:24,630 --> 00:03:28,410 And then once you save Norrish, everything works. 48 00:03:28,410 --> 00:03:28,850 Correct? 49 00:03:29,190 --> 00:03:33,140 So like I said, we can use the arrow function that still works. 50 00:03:33,420 --> 00:03:36,730 We are returning having one and then we're using our world. 51 00:03:36,990 --> 00:03:42,780 Now, one thing that when you're passing in the element here, you need to pass it in the quotation 52 00:03:42,780 --> 00:03:43,030 marks. 53 00:03:43,350 --> 00:03:48,810 So when we're working with components and of course, we don't have to do that, but then if we're passing 54 00:03:48,810 --> 00:03:54,870 it into the function, we must set it up as quotation marks, because then Riak knows that, well, 55 00:03:54,870 --> 00:04:02,850 this is going to be a moment and none of this is going to be the content in our element. 56 00:04:03,030 --> 00:04:03,540 Beautiful. 57 00:04:03,990 --> 00:04:10,350 Now, the thing is, it's not as easy as it seems because at the moment you might be well, this is 58 00:04:10,350 --> 00:04:11,280 extremely forn. 59 00:04:11,610 --> 00:04:14,580 I rather use this function setup. 60 00:04:14,750 --> 00:04:18,810 OK, well, let me comment on this one out for now. 61 00:04:19,840 --> 00:04:27,370 And let me show you what happens if we have some more elements, because normally probably you'll have 62 00:04:27,580 --> 00:04:31,220 more than just one hanging for and what's really cool about. 63 00:04:32,020 --> 00:04:37,160 I mean, we can definitely do it so I can go with them online within this day. 64 00:04:37,240 --> 00:04:40,270 I'm going to create a one with a whole world. 65 00:04:40,660 --> 00:04:43,120 So, of course, I can see that it works. 66 00:04:43,240 --> 00:04:46,900 Now, at the moment, of course, there's a dev, so technically it is hard to see. 67 00:04:46,900 --> 00:04:50,080 But I can tell you right away that it does exist. 68 00:04:50,500 --> 00:04:54,730 But the gotcher here is how would I do that here with creator? 69 00:04:54,880 --> 00:05:01,410 And so, yes, this video might be a little bit annoying where again, I'll come on help and then we'll 70 00:05:01,420 --> 00:05:04,330 take a look at how we can do that using the function. 71 00:05:04,750 --> 00:05:07,180 Well, everything work really smoothly. 72 00:05:07,360 --> 00:05:09,750 When we just had one, correct. 73 00:05:10,120 --> 00:05:11,860 Everything worked out of the box. 74 00:05:12,340 --> 00:05:19,450 But now we need to understand that where we pass in the children, we will need to invoke create element 75 00:05:19,450 --> 00:05:20,770 one more time. 76 00:05:21,250 --> 00:05:22,370 How is that going to look like? 77 00:05:22,390 --> 00:05:26,170 Well, we would go with react because that is our import. 78 00:05:26,440 --> 00:05:28,120 Then we go with create element. 79 00:05:28,360 --> 00:05:30,540 Then again, what element we would want to set up. 80 00:05:30,730 --> 00:05:36,730 So in my case that is going to be adding one then props object again, empty object for now and then 81 00:05:36,730 --> 00:05:39,000 eventually what is going to be a text? 82 00:05:39,010 --> 00:05:47,590 Well, I'm going to go with the world so you can probably already see and I'm sorry this was heading 83 00:05:47,710 --> 00:05:50,320 one and it should have been a dev. 84 00:05:50,360 --> 00:05:51,070 My apologies. 85 00:05:51,430 --> 00:05:58,900 And I can see that it can get messy really, really fast because again, we're just talking about right 86 00:05:58,900 --> 00:06:01,840 now a div that has the heading one. 87 00:06:02,300 --> 00:06:02,710 That's it. 88 00:06:03,160 --> 00:06:10,780 But keep in mind that of course, your normal structure for the component here is going to be way more 89 00:06:10,840 --> 00:06:11,350 messier. 90 00:06:11,640 --> 00:06:13,870 That's why I'll leave this for you reference. 91 00:06:14,140 --> 00:06:16,900 So you know what is happening under the hood. 92 00:06:17,230 --> 00:06:26,950 Just keep in mind that the reason why you have this HDMI syntax is so it is easier for you to set up 93 00:06:26,950 --> 00:06:31,270 your turn in your component because I don't know about you. 94 00:06:32,140 --> 00:06:38,290 But even though it might look a little bit foreign where we're turning straight up, not from the function, 95 00:06:38,650 --> 00:06:47,440 at the end of the day, what we're setting up looks way more readable than starting with these endless, 96 00:06:47,440 --> 00:06:49,270 endless function calls.