And before we start dealing with more complicated subjects we're gonna set up our homepage.
And when I say set up the homepage I mean we're gonna set up this hero component where we have some
kind of headings some kind of paragraph as well as we have a link to navigate to a let's say products
page and in order to set this up we're going to use a hero component.
So I'm going to open up the sidebar.
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
pages.
So let's look for the home page and let's import two things.
Let's import a hero component which again just has the setting one and then of course he's sitting within
the components.
And of course I should have said from AND THEN WE'RE GONNA BE LOOKING FOR OUR HERO component it is within
the components and then we're looking for the hero.
And the second one is gonna be a link and you're gonna see in a second where we're using the link so
let's say import.
Then I would want to have a link from.
And then it is coming from reactor Rotterdam.
And in this case I am going to set up a reactor fragment because there's just gonna be some adjacent
components because later on we're also gonna set up a feature products component within the home page.
So since we're kind of have two adjacent Components side by side we're gonna have to use the reactor
fragment and the easiest way I can use the reactor fragment is just to have the angle.
Again you could do it the same way we react.
And then you type in fragment not all source network but in my case I'm just going to go with a shorthand
where we're just gonna have the angle brackets and then first one is gonna be a hero and then like I
said later we're going to set up also our feature product.
Let's save it.
And if we now get right now to the homepage of course we're just gonna have halo from hero so let's
fix it.
We're gonna head over to your components.
We're going to head over to a hero and we're going to start working on it.
And the way I would want to set this up is I would want to pass in children.
Now you're probably thinking what are you talking about.
What you see I have the hero component right.
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
just pass in wherever I would want from the component that is rendering my hero component.
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
pass in whatever I would want.
So we could technically hard code this link I could say that within a hero there's always gonna be a
link but there's no need for it.
We can might as well leave our options open and then just decide later what we're going to do.
And in order to set up our children elements just need to write children.
So we're accessing the children properly and then we just need to decide where in our component we're
going to render our children not gonna die right away in our case it's gonna be right after the heading
One paragraph but.
So as you can render them anywhere you'd want.
Let me close the sidebar and first let's return a div.
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
I'm gonna have a class name of hero and then within hero we're gonna have a banner and then within the
banner there's gonna be a one with some kind of text.
Now I'm gonna go with whatever I come up with.
So think code and deploy and you can write.
Banana.
Banana banana.
If you would want and then I'm gonna have a paragraph with let's say text of Embrace your choices then
hyphen we do and then this is the part where I would need to decide where I want to place my children.
And again just to jog your memory the whole deal with children is that I want to stay flexible.
Well let's say if I'm rendering the hero component in some different page and if I don't want to have
a link Well I just don't pass it correct.
I don't pass that as a child and I'm good to go.
So in this case I'm going to say if there is ever a children that I'm just gonna pass them here.
So they're gonna be rendered in my j OS X in this particular spot.
So if we're gonna head back to a home component and if let's say within the hero component I would want
to render my children.
I just need to make sure that I have a opening and closing tags like so that I just need to decide what
kind of child I would want to render in my case that is going to be a link.
So within a hero say yes I would like to render a link.
Again we need to have a two prop so where we would want to navigate.
In my case I'm gonna direct it to a product and also let's right away add some classes just for we have
some styling so BD n Beattie and primary and then also we have Beattie and hero.
Let's in fact close it out.
As far as the text I don't know.
Let's write our product and you're gonna see that if of course we pass the child.
The child is gonna be displayed right after the paragraph if we're gonna move it if let's say I'm going
to say you know what it's gonna be above the heading One then of course every time I would render a
child or I would pass a child then that child is gonna be rendered above the heading One and within
a matter of minutes we have set up our Navarre as well as the header about page our page and a hero
page or I'm sorry maybe more correctly home page with a hero component.
And of course now things are gonna get a bit more difficult because we're gonna start working on our
contexts.