1 00:00:00,300 --> 00:00:09,690 Beautiful in previous video, we covered that as far as the return from the component is a J as X. 2 00:00:10,110 --> 00:00:16,290 And in this video, I would like to continue because in previous video will learn that it is kind of 3 00:00:16,290 --> 00:00:17,940 like the normal, but not really. 4 00:00:18,180 --> 00:00:20,010 So there are some specific rules. 5 00:00:20,010 --> 00:00:23,010 So we might as well cover them right now. 6 00:00:23,370 --> 00:00:30,060 And we'll start with a first one where we always, always need to return a single element. 7 00:00:30,390 --> 00:00:31,570 Now, what do I mean by that? 8 00:00:31,590 --> 00:00:39,100 Well, inside the element of that, we're returning, we can get extremely, extremely creative. 9 00:00:39,510 --> 00:00:42,280 Like I said, you can return the whole website. 10 00:00:42,660 --> 00:00:49,410 For example, I could write adding three hello, people in here. 11 00:00:49,530 --> 00:00:53,670 Then after that and three, I'm going to go with another list and then list item. 12 00:00:53,670 --> 00:00:58,920 And then here, let's place a link and I'll just add hash tag so it's not going to go anywhere. 13 00:00:59,280 --> 00:01:03,480 And then we'll write another hello world so I can save it. 14 00:01:03,600 --> 00:01:06,540 And I can clearly see that there are no issues. 15 00:01:07,010 --> 00:01:10,090 Everything is working like peaches. 16 00:01:10,560 --> 00:01:15,420 Now, the one thing we cannot do is notice where we have this div. 17 00:01:15,840 --> 00:01:18,200 I cannot add adjacent element. 18 00:01:18,540 --> 00:01:20,450 Now that could be any element. 19 00:01:20,460 --> 00:01:26,370 But of course, just because it's going to be simpler, I'll just place it there and notice even before 20 00:01:26,370 --> 00:01:29,720 I save, you'll have this red squiggly line. 21 00:01:30,000 --> 00:01:34,460 Well, that just means that something in your project went bananas. 22 00:01:34,860 --> 00:01:43,350 So if you save Norrish you'll get error where it says adjacent elements must be wrapped in the enclosing 23 00:01:43,350 --> 00:01:43,660 tag. 24 00:01:44,130 --> 00:01:46,190 Did you want a J fragment? 25 00:01:46,530 --> 00:01:49,740 Now, I'll talk about Jerse fragment in a second. 26 00:01:50,130 --> 00:01:58,110 Just keep in mind that we always need to return a single element, not what would be the solution in 27 00:01:58,110 --> 00:01:58,540 this case. 28 00:01:58,740 --> 00:02:01,260 Well, I could wrap everything here in a def. 29 00:02:01,620 --> 00:02:02,070 Correct. 30 00:02:02,460 --> 00:02:08,210 So I'll place my parents live and once we say we're not going to get any error. 31 00:02:08,610 --> 00:02:15,180 Now, please keep in mind one thing, though, that at the end of the day, we're still rendering the 32 00:02:15,240 --> 00:02:17,570 HMO at HMO. 33 00:02:17,880 --> 00:02:23,880 We have something called semantics, where if we just return everything as dictated, if they're so 34 00:02:23,880 --> 00:02:29,860 essential, we we're just creating a dish soap that is not the best practice. 35 00:02:30,150 --> 00:02:33,690 So first, I would encourage you to follow the semantics. 36 00:02:33,690 --> 00:02:40,710 For example, if this is something as a section, then we return a section instead of a div. 37 00:02:41,010 --> 00:02:44,280 Then, for example, if this would be an article, we return the article. 38 00:02:44,490 --> 00:02:49,110 And of course, keep in mind, it doesn't mean that instead of the list item, you're going to return 39 00:02:49,110 --> 00:02:51,990 the article just as a common sense. 40 00:02:52,380 --> 00:02:54,760 Don't place everything as definitive. 41 00:02:55,050 --> 00:03:02,730 Now, there's no rule against it, but a better practice is to follow the HMO semantics. 42 00:03:03,010 --> 00:03:04,020 And one more thing. 43 00:03:04,050 --> 00:03:09,720 Remember this little error, how it's defragment now, I'm going to skip ahead a little bit. 44 00:03:09,960 --> 00:03:15,390 But for example, if I would have the situation by the way, let me go back to these definitiveness, 45 00:03:15,840 --> 00:03:22,170 if I wouldn't want to wrap everything there, since in that way I'm creating the soup in react. 46 00:03:22,200 --> 00:03:25,160 We also have something called react fragment. 47 00:03:25,440 --> 00:03:26,370 How does that look like? 48 00:03:26,370 --> 00:03:34,080 Well, instead of enclosing everything in a div, I'm going to close this into a react fragment. 49 00:03:34,350 --> 00:03:41,790 So I'm going to go with DOT and then we are typing fragment and you'll notice that this will create 50 00:03:41,790 --> 00:03:44,240 a div in your HMO. 51 00:03:44,610 --> 00:03:49,210 So in your final application, but also you'll have no idea. 52 00:03:49,470 --> 00:03:55,430 And a shortcut essentially would be just typing the angle brackets and then the closing. 53 00:03:55,440 --> 00:03:57,630 Once again, we're skipping a little bit of head. 54 00:03:58,020 --> 00:04:01,980 Don't worry, we will talk about Fragment a little bit later on. 55 00:04:02,310 --> 00:04:10,440 But just keep in mind that either you have an option of using proper HTML semantics or you can use a 56 00:04:10,440 --> 00:04:17,340 fragment on this case I'm going to remove of the day that was causing the problems and I'll remove the 57 00:04:17,340 --> 00:04:18,600 fragments as well. 58 00:04:18,900 --> 00:04:29,190 And once I saw it, everything works nicely when we need to talk about the attributes in the HMO because 59 00:04:29,190 --> 00:04:31,370 again, we are turning Jésus. 60 00:04:31,770 --> 00:04:38,000 And for example, when we work with Gösta, we can have these in line endlessness. 61 00:04:38,010 --> 00:04:40,920 For example, I could type here on Kallick. 62 00:04:40,950 --> 00:04:42,540 Now, please keep in mind I'm adding this. 63 00:04:42,600 --> 00:04:48,060 What they have normally probably would add this to a button, but that doesn't change the setup where 64 00:04:48,060 --> 00:04:50,460 essentially in Riak you're not going to write like this. 65 00:04:50,460 --> 00:04:58,380 You're not going to stay on click notice how since this is JavaScript, we must capitalize it. 66 00:04:59,130 --> 00:04:59,640 So what I'm. 67 00:04:59,960 --> 00:05:05,450 Here is on Kleck now, I'm not going to talk about the events right now, I'm just telling you that 68 00:05:05,660 --> 00:05:12,380 each and every attribute that we all need a capitalization, you must act, otherwise there's going 69 00:05:12,380 --> 00:05:13,100 to be another. 70 00:05:13,340 --> 00:05:21,650 So the same will work with a class where with ethics class is already a key word because we know that 71 00:05:21,650 --> 00:05:22,690 we can create classes. 72 00:05:23,000 --> 00:05:30,220 So on a div, if we have the attribute of class in sex, we cannot write class. 73 00:05:30,440 --> 00:05:32,870 So this will spit back here, OK. 74 00:05:33,080 --> 00:05:37,040 Now of course, the error at the moment is the fact that we cannot see anything. 75 00:05:37,190 --> 00:05:40,900 But in general you must use class name. 76 00:05:41,160 --> 00:05:42,560 So that is the proper name. 77 00:05:42,860 --> 00:05:49,580 Now we'll talk about this a little bit later, which is remember, every time you talk about HTML attributes, 78 00:05:50,120 --> 00:05:53,870 if you need to use the chemicals, you have to do that. 79 00:05:54,330 --> 00:05:55,510 Otherwise it won't work. 80 00:05:55,850 --> 00:06:02,960 And then also remember how I talked about how we need to close out of the elements, even the ones that 81 00:06:02,960 --> 00:06:10,130 don't have the closing tag and even the ones that in actually more five you can write without the closing 82 00:06:10,130 --> 00:06:10,400 tag. 83 00:06:10,580 --> 00:06:13,200 Well, in a reactive, that's not going to fly. 84 00:06:13,550 --> 00:06:19,910 So, for example, right after the list item, I'm going to go with image and notice how the amateur 85 00:06:19,910 --> 00:06:23,150 writer work for me with a closing tag. 86 00:06:23,330 --> 00:06:28,520 And if Alameda's and if I save again, I'm going to get error. 87 00:06:28,730 --> 00:06:34,120 And it clearly tells me I expected corresponding to a closing tag for the IMG. 88 00:06:34,520 --> 00:06:38,660 And once I add, of course, everything is going to work beautifully. 89 00:06:38,910 --> 00:06:40,040 That's a safe bet. 90 00:06:40,340 --> 00:06:40,890 There's no harm. 91 00:06:41,120 --> 00:06:43,550 So the same will work for input. 92 00:06:43,550 --> 00:06:46,670 For example, I go with input text again. 93 00:06:46,670 --> 00:06:52,910 If I met this closing tag again, I'm going to have the error and the last thing that I would want to 94 00:06:52,910 --> 00:06:54,470 mention in this video. 95 00:06:55,450 --> 00:07:02,530 Are these parentheses because as you start working with Jessop's, you'll notice that once in a while 96 00:07:02,620 --> 00:07:08,620 they will be added by the year and once in a while there will just omentum. 97 00:07:09,220 --> 00:07:10,470 So what are the rules? 98 00:07:10,930 --> 00:07:11,950 Not technically. 99 00:07:11,980 --> 00:07:17,470 You don't have to use the parentheses, but I can tell you right away that your life will be a little 100 00:07:17,470 --> 00:07:19,890 bit easier if you do so. 101 00:07:19,900 --> 00:07:21,730 Let me show you what I mean. 102 00:07:22,150 --> 00:07:24,930 For example, here I have the return. 103 00:07:25,300 --> 00:07:28,780 I'm just going to go with that one and I'm going to say hello. 104 00:07:28,780 --> 00:07:31,010 World life is awesome. 105 00:07:31,570 --> 00:07:41,440 However, if, for example, you will move your whole thing over here, notice how this one got great 106 00:07:41,440 --> 00:07:41,710 out. 107 00:07:42,160 --> 00:07:46,170 And essentially now once you say it, you'll have this semicolon. 108 00:07:46,660 --> 00:07:53,920 So technically, you can only get the parentheses, but then you always, always need to make sure that 109 00:07:53,920 --> 00:07:58,800 your opening tag is in the same line as your return. 110 00:07:58,960 --> 00:08:04,140 Otherwise it will add that semicolon and then you will get this out. 111 00:08:04,450 --> 00:08:10,570 So this just saves you from running around like a headless chicken and looking for error where the error 112 00:08:10,750 --> 00:08:11,690 does not exist. 113 00:08:11,710 --> 00:08:17,230 However, if you add those parentheses, it will be fixed right away for you. 114 00:08:17,260 --> 00:08:18,980 Again, prettier. 115 00:08:19,010 --> 00:08:22,440 A lot of times we'll just add them or will remove them. 116 00:08:22,660 --> 00:08:24,070 So don't stress about that. 117 00:08:24,070 --> 00:08:29,200 But I'm just telling you, the rule that if you add these parentheses, then you don't have to worry 118 00:08:29,200 --> 00:08:35,020 about placing this there, meaning the opening time in the same line here. 119 00:08:35,020 --> 00:08:42,670 I can simply move to the next line and again, I can go with adding one and then Hello World, and you'll 120 00:08:42,670 --> 00:08:44,670 see that there are no issues. 121 00:08:45,040 --> 00:08:49,000 OK, that's something that I would want you to keep in mind again. 122 00:08:49,240 --> 00:08:52,360 We must, must, must, must always return a single element. 123 00:08:52,660 --> 00:09:01,450 Then it is beneficial if we pay attention to external semantics or we can simply use the fragment then 124 00:09:01,450 --> 00:09:09,460 as far as the attributes we are using the camel case because at the end of it, this is JavaScript than 125 00:09:09,760 --> 00:09:11,620 the class is already keyword. 126 00:09:11,800 --> 00:09:19,360 So we must use a class name and we'll talk about the in detail a little bit later on as well as we would 127 00:09:19,360 --> 00:09:25,060 want to close up every single element, even the ones that are not technically required by the normal 128 00:09:25,080 --> 00:09:25,440 five. 129 00:09:25,750 --> 00:09:32,230 And then lastly, it is beneficial to use these parentheses because you just don't need to worry about 130 00:09:32,230 --> 00:09:37,210 setting up your opening tag in the same line as the return.