1 00:00:00,550 --> 00:00:05,750 And before we start dealing with more complicated subjects we're gonna set up our homepage. 2 00:00:05,770 --> 00:00:11,680 And when I say set up the homepage I mean we're gonna set up this hero component where we have some 3 00:00:11,680 --> 00:00:17,850 kind of headings some kind of paragraph as well as we have a link to navigate to a let's say products 4 00:00:17,860 --> 00:00:21,930 page and in order to set this up we're going to use a hero component. 5 00:00:22,000 --> 00:00:24,100 So I'm going to open up the sidebar. 6 00:00:24,160 --> 00:00:30,460 I'm gonna get rid of all the tabs that I had for there and about and then I'm gonna look first for my 7 00:00:30,460 --> 00:00:31,140 pages. 8 00:00:31,570 --> 00:00:35,140 So let's look for the home page and let's import two things. 9 00:00:35,200 --> 00:00:41,050 Let's import a hero component which again just has the setting one and then of course he's sitting within 10 00:00:41,050 --> 00:00:42,190 the components. 11 00:00:42,190 --> 00:00:47,950 And of course I should have said from AND THEN WE'RE GONNA BE LOOKING FOR OUR HERO component it is within 12 00:00:47,950 --> 00:00:50,930 the components and then we're looking for the hero. 13 00:00:51,070 --> 00:00:56,870 And the second one is gonna be a link and you're gonna see in a second where we're using the link so 14 00:00:56,870 --> 00:00:58,600 let's say import. 15 00:00:58,940 --> 00:01:01,410 Then I would want to have a link from. 16 00:01:01,580 --> 00:01:04,720 And then it is coming from reactor Rotterdam. 17 00:01:04,790 --> 00:01:10,640 And in this case I am going to set up a reactor fragment because there's just gonna be some adjacent 18 00:01:10,640 --> 00:01:16,670 components because later on we're also gonna set up a feature products component within the home page. 19 00:01:16,670 --> 00:01:22,200 So since we're kind of have two adjacent Components side by side we're gonna have to use the reactor 20 00:01:22,200 --> 00:01:28,120 fragment and the easiest way I can use the reactor fragment is just to have the angle. 21 00:01:28,340 --> 00:01:31,030 Again you could do it the same way we react. 22 00:01:31,400 --> 00:01:37,190 And then you type in fragment not all source network but in my case I'm just going to go with a shorthand 23 00:01:37,540 --> 00:01:42,350 where we're just gonna have the angle brackets and then first one is gonna be a hero and then like I 24 00:01:42,350 --> 00:01:46,880 said later we're going to set up also our feature product. 25 00:01:46,880 --> 00:01:47,560 Let's save it. 26 00:01:47,970 --> 00:01:53,690 And if we now get right now to the homepage of course we're just gonna have halo from hero so let's 27 00:01:53,690 --> 00:01:54,460 fix it. 28 00:01:54,620 --> 00:01:56,450 We're gonna head over to your components. 29 00:01:56,450 --> 00:02:00,830 We're going to head over to a hero and we're going to start working on it. 30 00:02:00,970 --> 00:02:05,900 And the way I would want to set this up is I would want to pass in children. 31 00:02:05,900 --> 00:02:08,510 Now you're probably thinking what are you talking about. 32 00:02:08,570 --> 00:02:10,910 What you see I have the hero component right. 33 00:02:10,970 --> 00:02:17,510 So we're gonna have the image we're gonna have a text but then I also want to have a area where I can 34 00:02:17,510 --> 00:02:23,780 just pass in wherever I would want from the component that is rendering my hero component. 35 00:02:23,900 --> 00:02:28,820 So let's say in our homepage I would want to pass in the link if I wouldn't want to pass link I could 36 00:02:29,060 --> 00:02:30,880 pass in whatever I would want. 37 00:02:30,980 --> 00:02:36,110 So we could technically hard code this link I could say that within a hero there's always gonna be a 38 00:02:36,110 --> 00:02:37,850 link but there's no need for it. 39 00:02:38,150 --> 00:02:42,630 We can might as well leave our options open and then just decide later what we're going to do. 40 00:02:42,760 --> 00:02:48,140 And in order to set up our children elements just need to write children. 41 00:02:48,140 --> 00:02:53,780 So we're accessing the children properly and then we just need to decide where in our component we're 42 00:02:53,780 --> 00:02:57,920 going to render our children not gonna die right away in our case it's gonna be right after the heading 43 00:02:57,920 --> 00:02:59,470 One paragraph but. 44 00:02:59,530 --> 00:03:03,030 So as you can render them anywhere you'd want. 45 00:03:03,080 --> 00:03:06,920 Let me close the sidebar and first let's return a div. 46 00:03:06,920 --> 00:03:15,250 So I'm just going to have a div and the class is gonna be hero first let me get rid of the text and 47 00:03:15,500 --> 00:03:23,900 I'm gonna have a class name of hero and then within hero we're gonna have a banner and then within the 48 00:03:23,900 --> 00:03:28,220 banner there's gonna be a one with some kind of text. 49 00:03:28,250 --> 00:03:30,860 Now I'm gonna go with whatever I come up with. 50 00:03:30,860 --> 00:03:34,640 So think code and deploy and you can write. 51 00:03:34,640 --> 00:03:35,070 Banana. 52 00:03:35,060 --> 00:03:36,230 Banana banana. 53 00:03:36,470 --> 00:03:46,130 If you would want and then I'm gonna have a paragraph with let's say text of Embrace your choices then 54 00:03:46,130 --> 00:03:52,050 hyphen we do and then this is the part where I would need to decide where I want to place my children. 55 00:03:52,190 --> 00:03:57,990 And again just to jog your memory the whole deal with children is that I want to stay flexible. 56 00:03:58,160 --> 00:04:03,350 Well let's say if I'm rendering the hero component in some different page and if I don't want to have 57 00:04:03,350 --> 00:04:05,960 a link Well I just don't pass it correct. 58 00:04:06,050 --> 00:04:08,790 I don't pass that as a child and I'm good to go. 59 00:04:08,810 --> 00:04:14,220 So in this case I'm going to say if there is ever a children that I'm just gonna pass them here. 60 00:04:14,220 --> 00:04:18,480 So they're gonna be rendered in my j OS X in this particular spot. 61 00:04:18,560 --> 00:04:26,420 So if we're gonna head back to a home component and if let's say within the hero component I would want 62 00:04:26,420 --> 00:04:28,370 to render my children. 63 00:04:28,380 --> 00:04:35,690 I just need to make sure that I have a opening and closing tags like so that I just need to decide what 64 00:04:35,690 --> 00:04:39,400 kind of child I would want to render in my case that is going to be a link. 65 00:04:39,500 --> 00:04:43,650 So within a hero say yes I would like to render a link. 66 00:04:43,730 --> 00:04:48,460 Again we need to have a two prop so where we would want to navigate. 67 00:04:48,620 --> 00:04:54,530 In my case I'm gonna direct it to a product and also let's right away add some classes just for we have 68 00:04:54,530 --> 00:05:02,060 some styling so BD n Beattie and primary and then also we have Beattie and hero. 69 00:05:02,310 --> 00:05:04,740 Let's in fact close it out. 70 00:05:04,940 --> 00:05:06,740 As far as the text I don't know. 71 00:05:06,760 --> 00:05:12,910 Let's write our product and you're gonna see that if of course we pass the child. 72 00:05:13,070 --> 00:05:18,480 The child is gonna be displayed right after the paragraph if we're gonna move it if let's say I'm going 73 00:05:18,490 --> 00:05:23,210 to say you know what it's gonna be above the heading One then of course every time I would render a 74 00:05:23,210 --> 00:05:29,180 child or I would pass a child then that child is gonna be rendered above the heading One and within 75 00:05:29,180 --> 00:05:36,530 a matter of minutes we have set up our Navarre as well as the header about page our page and a hero 76 00:05:36,530 --> 00:05:41,510 page or I'm sorry maybe more correctly home page with a hero component. 77 00:05:41,510 --> 00:05:46,880 And of course now things are gonna get a bit more difficult because we're gonna start working on our 78 00:05:46,880 --> 00:05:47,570 contexts.