Not bad, not bad.
We're familiar with Star Project.
Next one up, we have style components.
What are those bad boys and why we would want to use them before we continue, I just want to mention
that I do have the course on style components.
So if you're interested in more complicated setups that we're going to use in this particular project,
as far as Dow components are concerned, consider enrolling in, of course, or you can also navigate
to the docks and explore different setups as well.
So just to showcase how you would get up and running with all components, we're going to navigate to
their main docks and keep on scrolling.
And essentially, in order to get Starwood stock components, you need install of the package.
And of course, the commander would be installed as the shave and then styled components.
Of course, I already installed styled components for you.
That's why if you navigate your packages, then you'll see that we have the library.
And to start using stale components, you need to import default from the stock components.
And of course, you can call it whatever you want.
You can call it MacGruber.
But in this case, I'm going to go with style, since that is somewhat of a general convention.
So I'm going with import styled from and then styled components.
So that's my package.
And then I don't have to set up separate or react component.
So essentially, if I just want a simple element that I would want and the styles I need to come up
with a name.
So in my case, I always go with the wrapper.
But of course you can, as I always call this, whatever you want.
So let's say in this case, I'm going to call this button and then we set it equal to styled and then
whichever HDMI element we would want.
So if you want to set out, then of course you would right the button.
If you want to set up their view right here or there, if you want to set up the article, hopefully
you get the idea.
So in this case, since I have the name for the button, I might as well create a button.
And then we have this interesting syntax of two backpacks.
So what is this one?
This is a Joska feature, so it's not like styled components invented that and it is called tag template
literals.
And essentially what that means is that this is going to be a function and the way styled components
use it will just pass in the success that we would want to apply to this element.
So this is how we're creating this component.
We don't have to go and create a separate component.
Essentially, it's going to be done for us.
And I'm going to start with simple styling, simple color styling so we can see how it works.
I'm going to go with background green and then color light.
And you notice that if I'm just going to grab the button right now, I'm going to be able to render
SERN here.
Instead of the heading for I'm going to add another Dave here, I'll make sure that I'm returning,
of course, and I'm just going to go with my button component, which, of course, is right now my
components installed components create that as a react component.
So in this case, I'm going to go with the button and I'll just say click me over here.
And once I say check it out in this case, I'll zoom in and I have my little button component.
So, of course, I have my button ready to go.
And for example, I'm going to go with Consed again, some kind of name.
I'm going to call this container and I'm going to go styled.
And of course, I'm looking for a diff in this case.
So I created Dave and again, I just set up whatever styles I want over here.
And again, I'm going to go with some kind of colors because it's just going to be easier.
So background and we're going to go with the red here.
May be a color is going to be a green white and the font size is going to be two or three arms.
And then right after the button, we set up our container.
So I'm not in place whatever we would want.
So if you want to place, for example, here a div inside of this container, you can simply say, Dave,
and then maybe a heading three with a text on Hello and inWorld.
So once you separate notice, we have the container and then right away I have some kind of stylus.
And then in here, of course, I have the text and I'm getting the styles from my do not wear styled
components truly shine is the fact that once I have my styled component, I can set up a class inside
of it and there's going to be no name collisions.
And the way it's going to look like, for example, I have the container over here and I'm going to
come up with another div, so inside of this container and we're just going to give it the class name
of Hero, something like this.
And then inside of this hero, say hero, hero.
So now of course, in the style component, I can select this class.
So essentially I can select whatever I would want in the container as long as it is in the container
so I could selected, therefore I could select the heading three.
And of course I can also select classes.
So the way it's going to work, I'm going to go with Hero.
And then maybe in this case, I'm going to go with font size of atriums, so I make this text way bigger,
correct.
Now, what's really cool is, again, if we navigate to the bigger screen, notice, we have this specific
class name.
So that's the one that's going to be unique for my container there.
And that's why if I select this hero, it's going to have this specific last name and then the font
size.
So there's going to be no name collisions.
So if I go back to the objects and if I copy and paste and if I'll set up container number two and essentially
repeat the same steps, I'm going to copy and paste and I'll name this container number two.
I'll still have the Hurring three, I'll still have the hero.
But in this case, if I set up my container number two here, I'll text, for example, to be smaller.
I don't know, one RTM.
You'll notice that essentially I can just get lazy where in this case I can go where the class name
ofthe hero and this is going to be styled the eight hour or whatever.
Fonso, as you said.
And then for the second one, for container number two, I can still use the same class name.
But now of course, the style is going to be different, is going to be whatever I have in the container.
And what I'm getting at is the fact that in all of my components, I don't have to be original with
my classmates, I can set up my component.
I set it up as a component, and I'll show you how I do that second.
And then inside of that styled component, essentially, I can just use the same class names that I'm
using in other components.
And that is very, very beneficial because again, I know I said this already 20 thousand times, but
when it comes to bigger project, that is one of the annoying things where you need to get really creative
with a class times when it comes to success and stealth components takes care of that.
And once we understand the basics, we can set up style components.
And of course, we also need to take a look what happens if we have react component?
Because in this case, of course, yes, it is a component, but we created that using the style component.
But what if I would want some kind of functionality?
Now, if you want, you can keep it for your reference.
My case, I will remove it because Appoggiaturas is getting quite busy and I'll remove these suckers
as well and for testing purposes right next to the objects.
So let me close all the folders so I don't push it somewhere where I don't want to.
In the source, I'm going to create testing, testing Jass and you can probably already guess that I
will delete this component once I'm done.
So I'll use my snippets to create a new component.
So and while there are many ways how you can export this component using styled components as well.
So keep in mind this is going to be some kind of functionality, right.
So maybe some button or whatever.
Right now we would need to import style component styled from style components.
And there's many ways how we can export this particular component.
But the way I like to do it is following where I go with the name of rapper.
And I just like this type of name, but of course, you can call it whatever you want, then I create
the element that is going to be displayed here in the component, whether that is the main element,
whether or not is a deflection section, whatever, whatever is the actual react component doing.
And then I'm going to go with that with the name of that component.
In this case, maybe you let me go with section and then I apply my styles.
And what I do is here are usually set it up as a main element that I'm returning now.
Sometimes I set up as a react fragment as we're going to be working on a project.
You'll see, it looks like in that case, but I have my wrapper, so that's my style component and then
whatever functionality I place in.
So this is going to be sitting in a wrapper and here I can apply all my styles.
So if I go with having three and Hello World and then maybe I'll add here a paragraph of hello and then
people and then I don't know, I'm going to go with Button and I'll say, click me now in this wrapper,
I can just style it.
And I don't need to stress about the class names or about the elements.
So when I'll style them here, if I say adding three and I don't know, I'm going to go with color.
Colour and red, this is just going to be styled for this particular component and then in order to
render it, we would need to go back to objets.
Now, I don't need the style components anymore since I'm already importing from there and we go with
testing from and then testing.
Let's see here it is this thing.
And then right after the heading for we're just going to randomly testing.
So now I have my component and I might need to add, by the way, sorry, should be export default.
So in this case, I'm going to remove the export and we're going to say export.
Export default, and then, of course, the name is this thing over here, let's say this should work
and now known as this, that in theory is only going to be styled in red in this component.
That's why if you take a look at the components, wrapper does not.
And let me repeat, it does not add any functionality.
This is just so I can be lazy with the class names and not to worry about the name collisions.
Now, I have to be honest, there's more features that style components provide, but the reasons why
I like them so much are following.
I like the fact that I can Nestore here.
So notice I have the class of colors and once we set up the component in that color div, there's going
to be a span and I can directly style the span.
So again, there's going to be no name collisions.
And I also really like stealth components because I don't have to play all my styles in the indexes,
so it's way harder to navigate.
For example, if I'm setting up this component, if I need to change around as far as success is concerned,
I simply navigate to that component and then I can see all the styles that I've used over here, apart
from if I'm using some global class.
You notice there are few global classes, like, for example, for a button.
Then of course it is a little bit different.
But one thing I would want you to understand that this rapper that we're going to add pretty much to
all the components that we're going to create together does not affect functionality.
And let me repeat, it does not affect functionality.
This is just for styling.
So in a wrapper, there is going to be a class by the name of Lincoln Center.
And then I'm just applying these styles.
Same goes for Link Button.
And hopefully you get the gist again.
If you want to find out more about style components, either you can utilize my course or you can go
to their docs and explore more.
But this is the general setup where if we would have only the style component, then of course I would
just render it like so.
But then if I have a component, usually what I like to do is wrap my whole react component in the style
component and then apply whatever styles oud one.
And then quickly, if you want to see this thing, for example, here, I'm going to have div with a
class of, I don't know, Artecoll.
And then sort of this article I'm going to have a paragraph of this is article which you'll notice that
if I am by the way, my typing is as always terrible.
So if we go with class of Artecoll and then just like in SAS, if we would want a nested notice, I
select article class and then inside of it I go with paragraph.
I don't know, I'm going to go with color green.
You'll notice that only the paragraph that is sitting inside of the article is green.
Now be careful with this one because there's going to be some cases that you would want to override
this.
And of course, this is going to be way more specific.
So, for example, if you are going to go in the next line and say that all the paragraphs should be
blue, then of course, only the first one is going to turn blue because this one is having a larger
specificity.
So that's why this was staggering.
So what I'm trying to say is I wouldn't suggest must think of the selectors seven levels deep, because
you also need to keep in mind that, for example, if you hover over the element or whatever, you also
would need to retype the same nested selection.
Yes.
Once in a while I use these nested selectors and they're pretty cool, but I wouldn't suggest over doing
that.
Hopefully we're clear with the basics and now we can finally start working on some functionality.