All right.
And once we're done with our page now let's switch gears and let's talk about styled components.
Effectively, it's my preferred way of styling.
My applications and styled components go under the umbrella of CSS in JS and a few reasons why I like
styled components so much.
For one, I can have the styles and logic in the same file.
In my opinion, it just saves me from bouncing around my project.
I clearly know that everything is going to be in that one file, whether that is the actual component
logic or the component style.
So if I ever want to change something, I just need to look for that one file.
Again, that's just my personal preference.
And second.
What I really enjoy is that styled components create an extra unique class.
And therefore I don't have to be original with my class names.
So let's say instead of the component, if I use a class of hero, unless it's some kind of global class.
If it's only used in that one styled component I can use in any of the other components.
And there's going to be no name collision, so I don't have to come up with a specific class of, I
don't know, a hero container.
I can simply say container and use the same class in all of my components and you'll see what I'm talking
about a little bit later.
Now we can also apply JavaScript logic in the styled components, but.
In this project.
We won't do that.
And if you want to find out more info, here's the URL to their docs and I also have the course if you're
interested.
A three hour course on styled components where we just cover a little bit more complex setups.
Now if you want to install styled components, just type NPM install and then the command and this is
going to be the version we're going to use in this project and effectively this is going to be the setup
you want to import styled from styled components and essentially create the element.
And in order to create the element you'll go with styled.
So the import from styled components dot and then the element, whether that is a button, whether that
is a div, whether that is a section, it doesn't really matter.
And then we have this interesting syntax of tag template literals, which as a side note, are not really
unique to styled components.
It's a JavaScript thing and essentially in here you just type all the styles like you normally would
if you're typing in the CSS file.
So let's try it out and I'm going to do that in landing one because that is going to be the first page
we effectively complete.
So let's start here by importing style.
Keep in mind that of course it's a default export from the library, so technically you can name this
banana.
It doesn't really matter and I'm not going to be particularly original.
I'm going to create a button because why not?
Pretty much in every tutorial there is a button.
So why don't we create here one as well.
And essentially we want to go with style, like I said, and then whichever element we want to set up.
So if you want to set up a button, just type here styled dot button, then tag template literals.
And I don't know, let's go with a massive font size 1.5 rems.
And let's go with background.
Let's set it equal to red.
And color is going to be white.
Now, before we render the style button, I just want to mention that if you're working with styled
components, a very useful extension is this one.
Let me open up my extensions.
You are looking for this one.
The VS code styled components.
Probably as you're typing, everything is orange just like in the Readme over here.
So if you want the syntax highlighting, just install this extension.
Now let's navigate back to the landing one again.
We'll do the same thing where we're going to wrap it in a div.
And then right underneath the lining one, let's display our button.
Let's go over here and let's say styled BTN, just like regular button.
We need to provide some kind of text and I'm just going to say styled BTN.
Let's save that and check it out.
Now of course we have our button.
Now I do want to showcase the unique class.
So let me navigate.
So the localhost 517 three inches the big browser window and essentially notice this element.
Check it out.
So this is my button and this is the unique class.
And with the help of this unique class, we don't have to be original with the class names we use inside
of the styled component, something you'll see in the following video.