Beautiful.
And once we're done with our first component, I'm showing you how we're going to set up styles for
the remaining of the project because writing them like this for each and every component is not very
sustainable.
Like I said, we'll spend away more time on styling than the actual project logic.
And before I do that, let me just mention that it is still my preference to keep styles together with
the logic and the component because I found out that in the long run, it saves me time where if I want
to change something about component, everything is going to someplace.
But we cannot do this for this project because then we would have to copy and paste pretty much the
stars or add them together, which again, like I just said, is not very sustainable.
So instead, what we can do, we can set up a separate component just for style component in a separate
folder as a separate file.
So how is that going to look like?
Well, we can navigate to the assets.
We're looking for wrappers here and inside of the wrappers.
Just create a new one.
Just create a new file.
And I'm going to call this testing J.S. one.
And what you want to do is take everything from the landing as far as the wrappers concerned.
So take all this code.
Cut it out.
Set it back into testing.
Now you also won't need the style anymore here.
So remove this one as all the import and you want to place it here in the testing one on one and where
we want to do it, we want to export this wrapper.
Now, if you want, you can export it as name export.
But in my case, I'm going to go with export default and that I'm looking for the same name.
So I'm going to go here, we have a wrapper and then back in the landing.
What are we going to do?
We're going to import the components, so we're not looking for styled.
We're looking for stored component.
So I'm going to go here wrapper and then we'll go to your assets, of course, run wrappers and then
we're looking for retesting one.
And once we're done with important notice, how everything works.
So nothing broke.
Why?
Well, because we simply set up the styles in the separate file.
And if you take a look at the wrappers, the folder, what you'll notice there is the landing page.
Look for this one.
And notice the landing page, and I'll take a look at styles.
So basically, what's happening?
Is that for every component or have Rider-Waite style set up?
And the only thing we will need to do is just import it.
And again, it is my preference to call this wrapper.
And therefore I went with wrappers.
That's the folder name, because that signals to me that these are just going to be styled components.
So these are not regular components.
The React components, these are style components with all the styling and then the reason why we're
doing that so we can move on from component to component and simply what you need to do is import wrapper
from the associated file in the actual wrappers and then you have stores set up.
So what I want to do right now is just change this around where instead of wrappers, I'm going to go
with my landing page.
Let's say I notice again, nothing changed because I have a wrapper and I'm just applying the styles.
Now, if you want to be more explicit, you can add to all of them.
Big sidebar wrapper or Big Side Bar style or whatever.
Things of that nature.
But in my case, I thought that was an overkill.
Just keep in mind one very, very important thing.
Something that I mentioned earlier here.
The wrapper is only responsible for styling.
So each and every time one will add the wrapper for that component, it doesn't apply any kind of logic
in just as the style.
And again, the reason why we're doing that is because I don't want to type out the CSC together for
each and every component.
Hopefully, this is clear.
And then starting with the next component, we'll simply grabbed the wrapper from associating file in
the wrappers and will right away apply to see us.
Now, if you are interested in the system I was using.
Yes, definitely.
Just navigate to the file and you'll see the logic that I applied for that specific component.