This is where we left by creating fresh projects to get started with how we can use CSS in React.
So in this video, let's see how we have couple of ways of using CSS in React.
And the first method is what we call the inline method and then the CSS file method.
Well, in this video, let's get started with the inline method where it's better to explain with code.
So let's get started.
Well, before you continue, let's create a folder based on the topic or the concept that you are going
to explore.
So I'll call it as component component.
And then inside that, the first concept you are going to do is called CSS.
So CSS in React.
So let's create a component.
So the file sits in wrapped dot jars.
Well, you could see that any time you want to create a react component, unless you do the same pattern
or petition something like create a function and then return some G6, well, we have an extension that's
going to make our life easier.
So click on extension and then set for seven React Redux.
So this one extension.
And the name is.
Yes.
S7 React Redux by D as Niger.
Well, so install that one.
As soon as we finish installing, we have a couple of snippets that are going to issue to scaffold and
empty component for us.
So as soon as you install the components, let's go ahead and use the snippet to create React component
group really easily.
So make use of r, a, f, f, c, e and then hit enter.
And now there we go.
First it has imported react and then export it here, but we don't need the import or react anymore.
Here, remove that.
And now this is our component.
Well, because we want to deal with CSS in React.
Let's go ahead and mount this component instead of the up component that we are mounting inside the
index dot G's file.
So let's import that and the auto import is working and then let's bring it here and then let's see
where I think the path is wrong.
So I think let's do it manually.
Slash components last case in react slash.
As that.
And there we go.
All right.
So now let's close this once and explore this where we are going to return some nested I mean, yes,
here.
So let's remove that and retain a parent.
A parent.
Dave And now each one and this is CSS in React using inline styling.
So let's see, let's refresh it.
Okay, so here comes how can we style this particular I mean elements here, let's add P tag in the
mix also.
Let's see we have some tag here and let's see this is just the beginning, beginning of using CSS in
React.
So assuming that I want to have a background color for this particular element here and for the inline
style styling, it says that we are going to add the style in line with the element.
So any element that we see in React, we have an attribute called style.
So let's say I want to give this head each one a color of red, and this is a syntax.
You bring in your style attributes and then Kerry braces and then carries as well to Kerry braces.
So what goes inside here is any valid CSS property.
But in React we use what is what is called camel casing, for example.
In normal case, for example, if we want to make use of font size, it goes like this font.
And then does size, right.
And then semicolon and the value let's say 20 parsecs.
Well in react you could see that we get this warning meaning that we are don't know this kind of syntax
right because an object.
So instead we to use what is called communication.
So instead of this one, Mickey is of uppercase s and then size sorry like this.
And you have even the auto IntelliSense as well.
So if I save this one, let's check it out.
You see that I have the font size being as that if I want to increase by, say, 90 pixels and now I
have it beautiful as that.
So whatever.
If I want to add a color, the simple process because it's an object, we have the property in a value.
So comma here and let's say the color, let's say is also as red and now indeed we have red.
And what about the p tag here, let's say for the P tag to I want to place everything at the center.
So my service has that one and then text aligned and then say center and now at the center of the page.
So I can give my parent Dave here a type property of say background color, background color and let's
say give it as pink.
And now indeed we have pink.
If I want to give it some height.
Some height of, say, 100 VH.
And indeed, I have my 100 VH.
So that is how we can use inline styling with React.
Then this video.
Let's get started with the CSS file where before we end this video, let's look at the pros and cons
of this method.
One is the pro.
Is that where it's easy to style a particular element very easily by the cons is that well this tile
is not reusable, meaning that this tile is only pertaining to this particular component.
So we cannot re-use this tile as you mean.
I want to have the same style in the in my other component unless I repeat it again.
But with what you are going to discuss in this video is going to avoid it.
So let's see what you can do in the next video.