In this video, let's design the header.
So we are going to create a component for that.
So let's close the open ones here and inside the components, you are going to create one folder called
Header and I'm going to add the components and then it's CCIS.
All right, so let's add some simple text here called H one and say header and let's require the CSS
first and then we start with a HTML.
So let's render this by going into the app and then here let's require the header component.
Let's put it after the nav bar.
Going to be the header components.
Now let's have a look.
Yes, here we go.
Okay.
So how are you going to start this?
Well, you're going to have the skeleton of the HTML.
So let's see how I'm going to structure this one.
So inside here, there is a header.
Let's remove all this ones and let's have a parent dev core header container.
Great.
And inside that, you are going to have two sections.
One section is going to be the content, which is this one, and the next section is going to contain
the image.
This Dave, this Dave and this Dave.
So let's see how we are going to structure this.
So let's start with the header content here.
So here we go.
So back to the HTML.
Let me have a comment and call this one as header content.
Perfect.
Now, let's see how you're going to add the HTML.
I'm going to have a div with a class called header content.
And then inside our half inch wine and this one as hi.
And then that is it.
And next, I'm going to be the name of you or your name.
So I give it a class called Food Name.
And then your full name will be here.
This is my full name, Emmanuel.
Great.
So after that, we are going to have this typing logic.
And for this one I used a third party package called React Typical.
So let's see.
All react typical or typical?
The name is up to you how I pronounce it.
Okay, so let's get that one done by going to our terminal and then let me shut down and let's install
the package.
John add react dash typical and hit enter.
So why is it stalling?
Let's go ahead and continue our configuration.
So after H2, we are going to add another H2 and these are going to contain that type in effect.
So I'll call this one as AM.
And then a and then here comes the components of the react typical.
So what is installing.
Let's go ahead and then require that because we cannot wait for a to install before we continue.
So let's see.
So in part typical.
Tapioca or tapioca from React.
Does.
Typical.
All right.
So let's continue on what is installing.
So it is how we are going to configure it.
You are going to put it inside the H two.
So here we go.
We are bringing the components of typical as that.
And for this we are going to pass in couple of props into this component.
So here you go.
The first prop is going to be the steps, meaning the text that you want to see.
Like this one, you can see the text, food stock developer, react developer and so on and so forth.
So here we go is equal to objects.
And then array of the items I want to show the first one going to be the text that I want to see.
So the first one is.
All right.
I just finished installing, so let's go ahead and run the server to make sure that everything is correct.
Okay, so now let's fill up this once.
So after that we are going to pass in the time going to be 100 seconds.
So we see that I added an emoji in front of that and on mark we can have access to emoji by pressing
the F function and you're going to have the emoji being pop up.
But if you cannot access that, let's go to a website.
So let's say that this is the emoji that you want.
So copy paste it in front of your text as That's great.
So let's run the server because I have one application running on this part that is the final one.
That is why it is asking me if I want to run on a different part.
So I would type in.
Yes.
Now you can see that I get an error.
What is the error?
It says that.
Okay, because we haven't finished up filling this particular function.
So let's continue.
Now we have the step so we can pass in more content the way you want it.
So let's collapse this one and let's continue to fill up.
The next prop you pass in is what we call the loop.
And for this, it takes in what is called infinity.
As the name implies.
So this one is from the package.
And lastly, we're going to have the wrapper.
So this wrapper are going to determine the kind of HTML.
So let's use what is called bold B for both where I still see an error.
What is a problem?
So let's check it out.
Well because of this code here.
So let's save it and check in the browser.
And here we have it.
You get it.
So let's add more content inside this array.
You can add anything of your choice.
So I'm going to paste what I did with my emojis.
So I'm going to remove this one and paste the one I used.
So I have one here with comma separated and it's done so with this one.
Let's save it and let's see what we have.
Now you can see that everything is working nice, but there is no space between A and then the text.
So here I'm going to add some space and this is a trick object and then single code has that.
So now you can see that there is some space between them that is nice.
So that is the component for React typical.
The next one is going to be after the type which is this one.
We have some paragraph here and some link to some payment gateway.
So let's finish up with that one also.
So let's continue.
So after the typical so let me collapse it and next is down here.
Let's go ahead and add the P tag here with some Lorem text as that and that is it.
So after the P tag here contains the payment links.
So for the payment link, I wrapped everything inside what is called header dash payments.
Dash container and here we go.
I often use header with the name of the components, so I will see that.
Okay.
Now this SS is for these components.
So that's how I like naming my class names.
The choice is also yours.
So inside that I'm going to have one button and inside that I'll write what is called high mean.
And then after the button I'm going to add some payment links.
And for this I use font awesome to get it done.
So let's see.
So I'm going to add some font or some links here.
The first one going to be the eye tag and the class name is going to be F a dash bronze and then space
f a dash paypal and all these ones are for font.
Awesome.
So save it.
And now let's see what we have and here we have it.
So I'm going to add the remaining links for all the payment gateway.
So our copy the rest and then paste it inside here, save it and now let's have a look a there we go.
So now we are done with the first components, which is this one.
The next one is going to be the image container.
So let's see how we are going to design this once also.
So back to the structure here.
Now I'm done with the first section, that is the header container.
Next I'm going to be the image container.
So it's going to be as.
Image.
Container yet.
And for this one I wrapped, remember, I have individual items.
This Dave, this Dave, this Dave.
This Dave.
And the image.
That's why I'm going to wrap everything inside a Dave.
So Dave and the class is profile dash img dash container.
Is Dash.
I am g.
Good.
So here I'm going to have the image and the image.
Let me import it here.
And you can get the image from the asset folder.
So the name of the image I can use anything but let me use profile image which is from.
Code ..4.4 slash and I have the assets and then I have the profile.
IMG So that is what we have.
So I chose the IMG rather yeah, this is the import for the image.
So inside the SLC I'll provide the profile image.
Now let's see, definitely I'm going to be a little bit bigger, but don't worry, I'm going to use
CSS to control it.
So that is it about that the next one going to be which are this ones, this one and that and that.
So I'm going to add through it, Divs, one div here and one div here.
And for the image two, I use border bottom and what I hope to achieve this effect the first day going
to have a class called circle dash one.
So let me select this one shift option down arrow key twice and let me change this 1 to 2 and this 1
to 3.
Well, I think I only used to.
So let me remove, I use this one and that, so let's remove the three.
Right.
So for a day we are going to use access to add the border and the background color.
So we are not going to add anything yet.
So if you save it, this is what we have now.
We are done with the structure of the header.
What has left is about a CSS.
So let's get into that the next video.