Beautiful.
So we have our basic return.
Everything looks great.
Now we just need to apply some styles and technically you can say, OK, so we can go to mix yes or
whatever the easiest file and then just add all the styles.
But as our project grows bigger, it's going to be very hard to sustain that.
It will have to come up with unique class names and we'll have to manage a thousand lines of code of
success in one file.
And essentially, it just becomes a pain.
So not solved that I use Schlesinger's more specifically styled components.
And the reason why I like styled components for one, I can have the logic and story the same component.
Now, we're not going to do that in this project simply because I wanted to transfer the styles from
my final project to the one that we're working on.
But normally that is my setup, where everything is effectively in one file using style components.
Also allows me to have no name collisions, and I'll show you, how's that possible?
And if I want, I can apply some JavaScript logic as well.
Now this is just basic setup of style components that we're going to use in this project.
So if you want to find out more info, you can always navigate to styled components docs.
And I also have a three hour course where I cover way more interesting things about style components.
So if you're interested in style commands, you can definitely check it out.
Now, in order to get up and running with styled components, first of all we need to do is install
them.
This is going to be to come out.
So let me open up my terminal.
I'll stop it here.
I'll break the command.
And now we're installing stealth components and the way we set up styled components or import style,
which is a default import.
So technically, you can name it differently, but a common convention is calling the styled.
And then we come up with a name that the style component is going to have and would set it equal to
styled and whatever h html element.
And I'll show you that in a moment in the abstract.
Now I want to spin up back my application.
So we're going to go with npm start.
I'll close the terminal.
And effectively, let's go back to Bob here.
Let's go for import styled.
From styled components, so online, let's set up a button, for example, so come up with the name
of the component you're going to create.
So notice how we don't need to use react.
In this case, we will right away just use standard components and under the hood, it's going to set
it up as a react component.
When we need to go with the style, that's the import dot and then whatever HDMI element you want to
use.
So if I want to use Div, I go with this.
If I want to go with section, I go with S. But since I named it already button, it kind of makes sense.
I'm going to go with HDMI element by the name of one.
And then we go with that template literals which are not unique to your style components.
If you ever use Gatsby., for example, you know that they use that to set up the queries.
So this is a Josko feature and the way styled components implement that.
Whatever style we replace here will be applied to this button.
So for example, if I'm going to go here with background and we're going to go with background read
pretty typical example color.
Let's just set it up as a white font size and then want R.M. if I'll go here, and in my case, I'm
going to place it above the heading one.
And if I were under my button component and let's just say here, click me what you'll notice that there
is a button more specifically with a red background and color of white.
Now, before we continue, let me just mention that I'm also using the extension for styled components,
which allows me to see the excess in different colors basically values out a different color than the
actual property.
And also, if there's some kind of bug and actually right away yells at me now the extension you're
looking for is this one.
So let's go over here and you're looking for this VSCO styled component.
That's the one that adds the syntax highlighting as well as yells at you when you're out bugs.
So if you do decide to use styled components meaning in your own project and all that, I highly suggest
installing the app extension as well.
And let me just take a look at my read me what I wanted to cover.
So there's no name collisions since you need class and let me showcase that.
So I'm going to navigate to a bigger screen and we're going to look for localhost three thousand.
And if I do, the inspect, which you'll notice here is the class.
But notice this unique class name.
Now what this allows us is to pretty much use the style components all throughout our project, and
we don't need to worry about the classes that we have.
What's really cool is that it also applies to styled components when we apply to entire component.
So at the moment, we're looking at one flavor where basically we're creating right away a style component
and we're just out of styles, but also what we can do.
We can wrap our react component in the style component, which I'm going to show you in a second.
And by doing so, we can actually use classes inside of the style component.
And then we still don't have these name collisions because the parent one, the parent style component,
will have that unique class.
So if I'm going to create another style component here, so let me copy and paste and I'll say here,
button second man, maybe this one will be blue.
And let me copy and paste, I just say button.
Second, what you'll notice once you navigate to the big screen that the classes are not the same,
which again just allows us to not be that original with our classes inside of the components, the stored
components.
Again, this is pretty much a basic or you styled components in the next video, I'll show you how we
can wrap the entire React component.
And if you want to find out more info about styled components.
Basically, if you want to use them for your own project, provide a good starting point is components
as well as the course that I mentioned previously.