In this video, we'll see how to use the grit component of a material.
Yeah.
So first, we have to import that grade from material you.
From.
Materially way.
So as you can see, there is a difference here.
Very important, the YouTube without Carly basis, whereas great, we are importing with cuddly presses.
This is because when you go to YouTube, yes, we are definitely exploiting it as default.
So whenever you are, you are like importing something that is exported as default.
No need of curly braces like you can simply export it, but instead, this may be really good.
There are a lot of components, as you can see over here.
When you go to material, you write components here and do that in many components.
Box content upgrade great to any middle.
So there are many components.
So like there is no the grid is not default exploitation.
It is not exported, but not as default.
So that is why we have specified inside the calibrations as grid.
So once this is done now.
Now it'll be like returning the green that we want.
So basically coming to the styling, all that mattered anyway, but you need to know about the deep
material you like, how these all work and everything will basically use the, you know, the attributes
like given the excesses of culture.
Well, the break point is I'm six and everything will be directly using it inside the grid.
We'll see the code for that.
First will create the great.
So inside this group will be having the style.
The standard customs like mainland style.
Actually, I want prefer you there in line styling because if you are having a lot of styles, then
the inline style will be tough to label.
So what we have to do is we have to basically create obnoxiousness, right?
Write the styles over here and then import the style.
But as of now, inside in this project will be handling only small styling, but so no need to create
explicitly the file and everything will be everything that all the styling will be doing in that boxy
or jet itself.
So he had the style will be.
Justify Content Center.
Justify, you can also see whether we have installed the material in the package that you can see the
material you quoted and strong, and we did not have any problem.
Very content, police enter.
After that, the container spacing will be 10.
The container and then the spacing will be 10.
So why we are giving this reality is basically dependent on the material, your documentation, how
it will access the values.
So you can refer to the documentation, but also search for other documentations of how they will work
and everything.
Basically, we're using the, you know, the competence built by some other developers.
These are all the components, the material you either exiles and everything.
We have the component of functionalities that are built by other developers.
Are using them to build a custom, you know, a website that we want to look like.
So that way, we're not going to detail what this spacing an artist.
This basically gives you the output that you do that will we more interesting into the boilerplate code?
How the video item should look like outlanded the React React, props, the react, you know, react
status to the state management and then the flow of the body and everything into that.
And then there will be other great.
So here in this great we love item.
I don't.
Is equal to 11.
I it this was basically the documentation that we have for how they react app should look like they're
using it.
And inside this great will have three grids.
So first thing, like we have the container spacing as opposed to.
You know.
It.
And spacing basically ghostwritten.
Now, instead, this will have three different grades for one is for research, but one is one major
detail and one is what Middle East?
Great.
So here we have the Middle East component.
VIDEO It's like we'll first have the search bar, right, but it will be the search bar.
But a common thing you can use controlled slash.
So tomorrow and then the next great.
Next meal will contain a component, and I'll be your detail.
The detail of the video.
And then another great.
It will contain the media list.
Read your list, so I'll comment this, but as of now.
Once we built the company, then we can use it.
So often we do a list of that before everything is good now we have some inside attributes and that
this great.
The item will be.
Excess.
Excess Rebate Credit.
That means it will take the whole sites the surge, but should be the whole size of the listing, right?
So that's why we're using excessive excesses.
Well, this was the debate and then the video detail will have eight the same thing.
Can copy what are you?
And then access will be eight.
And then the same thing over there, but it will be fought.
That means we want the ape should be like it should take this science.
The form will take the list, the list of leaders that we get from the YouTube and YouTube, as you
see there, that I tell you, will be having the videos related to the main video and the main media
and then the search box.
So that is what we want to believe.
So this is the grid system now will be billing the components for this search by immediately telling
media list.
But that go to source, create a left for components.
And in the components will be creating the components for the search bar.
We know it'll be two item Middle Eastern America first.
Search bar Dot GSX.
The difference between GSX and Jessi's, if you like what I value, if you give the extension is geez,
you have to import everything related to react.
But if you give J.S. only to import the statement like import react from react in order to write this
statement.
So I prefer using edge by not J6.
But there is no problem.
If you used it, there's just a one or two lines will be extra like import react from React is a basic.
Accepting that you have another component will be with your detail.
VIDEO detailed art and jazz sex, and then a third component will be released.
Sex.
Yeah.
So now he will write the code for the search about how the search bar should look.
All detainees should look out the video list and inside the building to use the video from the YouTube
episode.
And then we really will have a subcomponents of video item and everything.
And also how to export all these videos together with a single file using the index to.
So these are let's see from the next freedom.