Okay.
In this video we will be talking about styling.
We haven't touched styling yet.
We kind of have CSS styles already here and this is what is available already in our React application.
Whatever we've created and we don't really use them at all.
And so I opened up CSS here and that's a file that is loaded with our app.js here.
So we have App.js, I'll close it here to have more space.
And basically we import that CSS files here and you can see that's a traditional HTML, CSS kind of
styling because that's just a bunch of different classes and they apply.
So whatever we import this here that will be available and it will style our website.
So this is built in styles.
We have up header up logo and so on, but we don't use them anymore because we don't use the built in
class.
We actually have a class name up here and that's it.
So basically this is applied.
The rest of it, we remove it so we can actually go and remove this.
So we have this style that that's left over from whatever was created for us with Create React app.
So we'll save it.
Now you can see the only thing is text align center.
So just to prove it, if I will do background.
Color, let's say, like this.
You can see my application is background color.
And the reason for this, I have a class name here and that's up is the same as this one.
I mentioned that before in React, the way to do a class, it's class name because class is restricted
for word for JavaScript, so we can't really use the class name, so we need to use class name, but
we could use something like an ID We, we had that already in in the normal HTML and it is available
in our react.
And also we have the style like that.
So this is available.
The only problem collision is with class.
When you remember to use class name, everything will be easy.
So basically what we have an option to style our application.
So our first option will be to use normal CSS and you can group your CSS with your JavaScript.
So you might have different CSS for each part, but it doesn't mean that it's not going to conflict
because it will be just loaded and it will be resolved as any other CSS.
So if you have styles that might impact other components, this this will happen.
So you need to be careful with the selectors because they might interfere with with each other.
It doesn't mean that once you load it here, it will be available only here.
So that being said, you have an option to style it with a normal attributes and selectors, as you
can see here, that's a class selector here.
So that's one option.
Another option will be to use.
Uh, actually, I need to for a moment, uncomment this and save it so you can see it's working fine.
So another option will be inline styling.
So, for example, we have this header here or the main content here.
So what I could do is I could do style and then equal, I can have some inline styling here.
Let's say I will have P style like that, this P style.
I need to create a constant P style and then I can create an object.
So this time I will create a style for this content inside our kind of JavaScript.
And we will use a similar to CSS properties like for example, if I want to have a font size.
I need to do like that.
Let's say to em.
And that's need to be wrapped in the.
I must like that.
So I have this style applied here if I will save it.
Now, you can see here this one is bigger and normally in this the same style in the normal CSS, I
will have it like that.
So remember, if you have dash in the CSS in this format you will have without dash but camelcase.
So lower letter upper letter for each new word.
So font size, for example, I can go do another one.
So color this is one word only.
So I didn't need to do that.
The camelcase are seen here and then I can say for example red.
And I can see this is red.
So this is inline styling and we can do it this way.
Also, remember to wrap everything here, like red normally is a keyword, but sometimes, like a units
you have here in the CSS, you don't wrap it in the in the quotes, but this time you need to do it
because you need to treat this as a string.
Okay.
So that's another way to do it.
So what other options do we have?
Very popular solution for React is to use a styled components.
And we can go to the website here.
So we are in the website styled components.com and this is styled components explanation how we can
actually use it.
So what we need to do is we need to install styled components in our application in order to use them.
I'll just copy this and I will go here, I will close my server.
So control C we'll close it and I can do ctrl V, so npm install save.
We don't need to do it, but there is no harm so styled dash components that what you need to install
and it will be added.
And then what we can do is we can start using this.
So we need to import this and let's come back to our page and I will show you how we can actually use
it when that will be installed.
So first thing first, we need to import the styles from this library that we have just installed and
this styled it will give us an option to use some of the functionality from the styled component.
So first let's do NPM, start and start our server again.
And let's create here a new style component.
So what we can do is we'll create another constant and let's call it bar graph like that, and then
it will be equal to styled and then dot P like the paragraph.
So basically what we are doing is we create a P tag and we will call it paragraph like this.
Then here I will do a backtick twice.
So that's a new way we can actually wrap our strings around and then inside we can have any styles we
like.
So let's say we'll have font size like this, but inside we don't need to do this.
We can have a normal.
Normal CSS.
So this time we'll have let's change this to green, for example, and then do something bigger.
So three M.
I will have it like this.
So basically what I did is I create a paragraph that will be our new element that we can use.
So we have this styled paragraph here that we styled with an inline style.
Let's create a new paragraph here and inside I can do new styled like that.
So if I will save it.
Now you can see here new styled is there.
So what I'm doing with styled components is I create my own tags, my own elements, so I can do anything
really what is here.
And in this case I use the P and I name it paragraph.
So this paragraph, I use it as a tag here and I can put inside whatever I like.
So it is still the paragraph, but this paragraph takes this styles and whatever I have here, they
will be used.
The good thing about this is I can reuse it.
So next time I would like to use the same style for paragraph.
I can just use this paragraph or you can have that exported in one file and then you import into different
components the same styles and this is the way to do it.
So that's a few ways how we can actually control our styles and our CSS, CSS.
The first one will be traditional CSS from the CSS file and then you import it in the file itself.
The another one will be with inline styles like the style here.
And another very popular is the styled components.
This is extra library, but it's very handy to work with.