1 00:00:00,120 --> 00:00:01,320 In this video. 2 00:00:01,320 --> 00:00:07,590 Let's talk about nesting elements in React JS X. 3 00:00:07,590 --> 00:00:09,630 So what is nesting? 4 00:00:09,720 --> 00:00:15,900 Nesting simply means that putting something into something and thus something into something and then 5 00:00:15,900 --> 00:00:17,190 something into something. 6 00:00:17,730 --> 00:00:22,260 So nesting here means that I need to have a parent where we can put in something. 7 00:00:22,260 --> 00:00:28,230 So let's take it that this house, for example, so that inside I can put something inside, right? 8 00:00:28,230 --> 00:00:34,460 So I'm nesting even this one, this list here around that building, the same thing about React. 9 00:00:34,540 --> 00:00:36,930 JC So let's get rockin. 10 00:00:37,380 --> 00:00:40,410 All right, so here comes the clue. 11 00:00:40,770 --> 00:00:46,200 Well, what about if I want to write more, tag more, more elements on my page? 12 00:00:46,200 --> 00:00:47,580 That's why we call us what? 13 00:00:47,580 --> 00:00:48,270 Nesting. 14 00:00:48,420 --> 00:00:51,600 So with this current implementation, we are strictly. 15 00:00:51,600 --> 00:00:55,200 We are all straight to just one line of HTML here. 16 00:00:55,320 --> 00:00:57,570 What about if I want to add more HTML? 17 00:00:57,600 --> 00:00:58,830 Here come the clue. 18 00:00:59,220 --> 00:01:01,260 Let's remove this one. 19 00:01:02,520 --> 00:01:05,690 And now let's remove the element because it doesn't exist. 20 00:01:05,700 --> 00:01:14,910 So this retain call it as a function like that first step and then inside let me save it and bring it 21 00:01:14,910 --> 00:01:15,630 up here a little bit. 22 00:01:15,630 --> 00:01:16,000 Yeah. 23 00:01:16,050 --> 00:01:21,510 Inside here we need to have a parent tag. 24 00:01:21,540 --> 00:01:26,820 Remember from normal HTML, we can have a Dave and the children being inside. 25 00:01:26,820 --> 00:01:28,110 That's what you call nested. 26 00:01:28,110 --> 00:01:34,910 So here we can have a parent called Dave because it's going to wrap that one because something will 27 00:01:34,950 --> 00:01:37,260 add fragment so we can even remove this. 28 00:01:37,260 --> 00:01:41,910 Dave And the same as before this is react fragment. 29 00:01:42,300 --> 00:01:47,910 So this read fragment, if we want to have a nested called nested, I mean element. 30 00:01:47,910 --> 00:01:49,980 So let's move step by step. 31 00:01:50,160 --> 00:01:50,970 Okay, cool. 32 00:01:51,180 --> 00:01:57,480 So here this my parents, you know, I can write many a HTML element inside for the first time. 33 00:01:57,480 --> 00:02:05,700 Let's have each one here in each one and call it as welcome to. 34 00:02:06,970 --> 00:02:07,900 React. 35 00:02:08,440 --> 00:02:20,350 And now beneath that I can add p element here in qualify as this is how we create react nested. 36 00:02:22,060 --> 00:02:23,800 Element in G6. 37 00:02:23,980 --> 00:02:25,180 Okay, cool. 38 00:02:25,630 --> 00:02:27,530 So if I save it, check it out. 39 00:02:27,550 --> 00:02:31,190 Now I have nested two elements here. 40 00:02:31,210 --> 00:02:32,770 Welcome to React. 41 00:02:32,770 --> 00:02:33,460 And now. 42 00:02:33,730 --> 00:02:36,880 So here I can add more text into it. 43 00:02:36,910 --> 00:02:37,820 That is about it. 44 00:02:37,960 --> 00:02:41,620 Because of Jesus, we're not improving how a component work. 45 00:02:41,980 --> 00:02:48,370 We see that this one component and this component just returning some messages and some paragraph here. 46 00:02:49,060 --> 00:02:52,750 So that's I mean I mean, just for you. 47 00:02:53,380 --> 00:03:02,290 Well, so the next video, because we want to add more things into the mix and talk about attributes 48 00:03:02,290 --> 00:03:13,870 in G6 and how to use cases in React and then talk about how we can use expression in React also. 49 00:03:14,260 --> 00:03:22,080 But before we get into that, let's talk about how we can embed expressions in G6. 50 00:03:22,090 --> 00:03:28,660 And then from there we talk about how to use case to talk about attributes in G6.