Welcome back to the new video of this project.
In this video, until now, we have seen the how we get started with the reactor.
In this video, we'll see how to get started with the components will bend each component one by one.
First, the helicopter component and then the technical component.
The node component, the footer, everything.
The first thing we have to build the header component.
So now what we'll do is create a folder called components.
Components and then inside this folder are now start building the components, the first component that
will be listed at a company so that Dargis X, you can use any syntax.
Dance is fine.
Yes, it's sexy, it's fine.
But sometimes the jazz sex gives us the feature to skip this import react statement.
If you are, if you have you started use that box, then you have been for them.
But if you have like the basic import react, some react.
You can skip that.
So now, actually in this region, this is what we are going to build the new component, if you use
that tool, which decided to use the, you know, the extension that I would use for their labor purposes.
So this had an error component.
We are going to win this in this way.
So now what we have to do inside the set up, so as you can see, there is a no go area.
That goal came from material.
If you go to material, you are dot com and search for a logo.
So fun for that.
First, we need to import the, you know, installed this material component type.
So a minstrel at that age.
Material like flash forward.
And direct material.
You are flash icons.
So this will install the material you write code and icons, maybe using this icon.
The flashlight icon.
So let us search for this icon.
This is basically in the shape of some highlight icon, right?
Some torch.
So rather than having the torch on.
Dodge, if you go.
Otherwise you can.
Orbital components.
OK.
Just search for the icons or what do you?
In broad daylight, you can search for icons.
And do a Google search.
So, yeah, so this is all we can use the icons like if, for example, if we take a home icon, there
is a component name home icon.
If you want to change the color, you can give the attribute color.
These are basically props.
These are their custom components that some user created that we are using.
So all these components are documented and said this material is a component that we can use.
So now we can search like a.
Torch icon.
Our highlight.
I like I from.
You can switch like torch.
Indicating I think so.
Search for highlights.
Yeah.
So this is the icon that will be using this icon.
You can see it is a white in color, so the color we can do, it exists.
So basically, we have to import this statement.
Let's first check weather, yeah, so as you can see, the packages really writing material, white
code icons have been installed.
If you want to check, you can go to package our Jason.
And you can see the dependencies that your code and icons have been installed successfully.
So they're not just an import, the statement in particular icon from the your white flash icon slash
pilot.
And for that, now we'll basically import React.
No need to do that, but I love good programming practice.
If you want some practice on some practice, then you can simply go and find this one line of code.
In Mexico, a court for everything you can, and also the exit extension, I said before, it can be
either jazz or jazz.
So once this is done.
So now we can create the function.
Function at a.
You can return.
No.
And so basically, this is all hatched in Malcolm Miller default conference that we're giving her,
that intel will have a Toronto and insider join me, this satellite icon.
I like.
So, yeah, we don't need this.
This is a self intact, and after the contest, we can have the name of the total list, as you can
see over here and having a to do list name, so I can have it here.
So once this is done, you can simply export the harder component.
Once you explore this now, you have to import this component in your app drawer, just right.
So go grab dodges and simply import the genetic component and bought.
From.
Dot slash conference slash.
And.
So long as this is done yet, instead of the very comfortable that we want to display here, that so
will display her.
Boeing wanted company.
Now, if you open your Web site.
Yeah, so here you can see we have got the icon and also the entry to the list.
But what we are missing the background, the styling, some adding the marginal list.
So all of these things we can do in cases, we do that now.
So basically, for Australians to understand what happened until now, they have created a component
called J6 product, the code for the header, not just like we used icon, they had to not to do list.
And then we exported this as the default export.
Now this export been wouldn't have done this and use it.
So that largest importer had it and then use it inside the division of that, that we are ready.
So now we have to do the driving part to the public and here in public, create a new file called Style
Start CSIS.
Once this is created.
Now we're going to operate like all the styles that.
So initially, the whole package will have to be for batting and margin to really make that zero.
So that's the best fighting big, you actually work in the way that we want.
Rock sizing should be a.
So basically, we have ordered in a default given by the Chrome browser.
And then basically, it's general funds will get.
Font family will be on track.
Sans serif.
So once this is done now, we'll do.
Body.
Know how to get down a tag, as you can see inside the head or not, just as there is an adult that
we, well, we are basically targeting that had that original tag of the etched, in fact, should have
a background color of.
Ash.
I find we're.
We.
One.
So now we'll see whether this is reflected on.
As you are refreshing, you can see this is not reflected, right?
We'll see that before that will complete the styling, but.
Margin will be auto.
Minus 16 cents.
So this are top and bottom should be auto left and right should be minus 16 cents.
And then batting will be 16 pixel and 32 pixels.
Seeking pixels are top and bottom, digital pixels right and left.
And then box shadow will be zero zero and extensive zero.
Our GBA.
I've seen them.
Needles, you know, and 0.3.
Zero point zero and zero point.
Off the bat, we have got to find each one.
Inside the hotel.
They had to run banks.
We have to target this hedge one that that is present inside there, so I should have a color of f f
f.
Font family should be.
McLaren, because the.
This is your always this is your style.
Stylistic choice here I am preferring McLennan because I feel that is like, you know, more attractive
place just simply a style stylistic choice.
You can go to the Google Fonts and select what font to want and then use it.
And we want it should be some boy of the.
So now we have a the styling, but.
Styling part of the webpage, but if you open up a and refresh, you can see there are no styling like
you know that there are no changes that are visible.
The reason is because if you go to the next hour.
So if you go to Nexo, Dr. Denman.
Then you can see you are not importing the same ship, so we have created the code, it's OK.
But where we are calling this code to work, that is what we have to do in the head.
After the title, you link the stylesheet.
The relationship between stylesheet and it should be standard, she insists.
So once you do this line up for sale and open now, you can see the changes have been reflected about
a good deal of water, the padding is somewhat different because it might be some like you can check
the padding, like giving some more padding for that and everything will see that.
And also, there is some different background, like there's some texture in the background.
You don't see that in the upcoming because all of the styling and everything.
So now in this regard, we have completed the added part.
What we learned in this region is using the material you write, importing, exporting and also using
the, you know, how to like the basic style cases.
This is basically simplified, it seems, as a margin padding watercolor, find the shadow and everything
can go through.
The next redo will be actually starting the end of that date, not part and not create area.
And this is basically to create area that button, the delete button of the Note B and see everything
in the upcoming.