Before we start typing away, let me just quickly cover what are you going to find in a star project
and why I made certain choices and everything that you need to know about the project you can find in
the read me in there.
I'll start by saying that all the services is already provided for you.
So you'll find a global Silesian.
The index is less than four specific components are used styled components library, which I'm going
to cover in a second.
Then when it comes to folders and files as well as imports in those files, everything is already set
up for you.
That's why when you check the integrated terminal, you'll notice that there are a bunch of warnings.
Now, these are not errors.
These are just warnings because, of course, since I have all the imports, but we're not using them.
There sort of is just complaining that, hey, you imported such and such, but you are not using it.
Now, why weren't this are all similar?
Because it allows me to save time on a project, meaning we can get the project done in less time.
And by doing so, we can add more features.
Because I've noticed that creating a file and then setting up the import, it takes some time and it's
much more easier if we can just focus on the functionality instead.
Because that way, if the files and imports are already there, we can add more cool features.
Now, why we don't have to spend a necessary time on during the imports and setting up the folders as
well as the files.
Now, the second thing is because I've noticed that a lot of times students get some silly bugs, but
just simple fact that we all have our naming conventions.
For example, I named my dashboard page dashboard, but you thing that you would want to name at home
while at all is good.
What happens is later.
Of course, my functionality depends on the fact that I named my file dashboard.
But you already rename it home.
So a lot of times what I see, people spend unnecessary time on looking for bugs.
So avoid that.
I provided files and folders and all that.
So when you're working on your own project, of course, you follow your own naming conventions.
So you're not going to get those errors.
Now, the only downside of that is the fact, of course, that you will get those warnings.
Now, if you're really sensitive about it, for example, in a browser, you can simply turn them off.
I mean, warnings.
So if you go to the console and if you notice all these warnings, you can simply say that you are not
going to be looking for the warnings and console while you're developing.
Again, I think that in my opinion, the pros are bigger than the cons, of course.
That is only in my opinion.
But that's why I set up the project in the following way.
Now, you will also notice something interesting where if in a folder I am exporting more components,
you'll find the index.
In that index Jass, you'll see the imports from the files and then one export.
Now, why I was sending this up because of that way.
What we can do is we can save lines of code.
So essentially, for example, in the abcess, I have all these components coming from the pages folder.
So instead of having a separate line for each and every import, I can simply say, yeah, get me the
dashboard.
Get me a log in or whatever.
I'm exporting from the pages folder.
And since I'm using index, for example, in pages.
But you'll notice this pattern in different components as well, meaning in different folders.
That since I'm setting everything up in the index, I also don't need to say forward slash and then
the file.
Because by default index is going to be the one that's first hit when we're looking for that pages.
And then since in the index, I have all the imports in place.
So I'm importing specific components from specific file.
And then I'm just exporting everything as a named import mulloway in the app.
I can also write a way, access them.
Now, that shouldn't concern you too much because again, all the imports are you there.
But I'm just explaining my setup.
So we all are on the same page.
So that should do it for the basic setup.
And now let's talk about two more interesting things.
One is the stalled component.
And the second one is going to be react icons.
So I said all the systems are already prepared.
And then we have the.
Styles.
And by the way.
Macharia them.
So in the next year, us, you'll find the global styles.
So once in a while we use those classes online for each and every component that has more styling.
And I cannot get away with just global classes.
We will use these tile components.
Now, this project is not about style components.
I'm just using style components so I can setup a specific services.
Now, if you're interested, I have a course on style components.
Of course you can enroll and learn more.
Or if you'd want to just understand the basic setup you can navigate to their main docs.
Just following this link.
Now, to give you a quick and dirty intro, what we would want is each and every time we would want
to use a sound component, we would import styles from style components.
Now, of course, you would need to insert a library that goes without saying.
And then there are multiple ways how you can set it up.
By the way, if you want, you can check it in the main documentation or in my course.
But the way we will do that will have our reac component.
So what I write is gonna be dashboard page, log and page or user in four repos or whatever.
And then from that component, we will return a style component.
That's all you have to know.
You don't have to bother with more info.
That's all you have to know that in that reac component, there's going to be a style component which
we can name whatever we want.
But in my case, I always like to name them wrappers.
But again, it's up to you.
However you'd name them.
And the way we set up that style component is coming up with some kind of name, which in my case is
going to be, in most cases, wrapper and then styled.
So whatever we imported, and then we're creating any kind of racial element.
If you'll visit docks, you'll see that they're using the button as our main example.
But in is going to be sections, articles, devs, whatever.
And then we just simply pass here whatever styles we would want.
Now, while Axtell components so much because they allow me to scope styles for that specific component.
So that way I don't need to worry about naming collisions.
And of course, since they're using JavaScript on their herd, there's a lot of cool features that we
can use.
But I can tell you honestly that in this project, when I was setting up CSX, I purposely avoided using
those features because that would mean that I would need to explain what is happening with a stalled
component.
And since they are not our main concern in this project, that's why I avoid it.
But hopefully that is clear as far as these torque components.
And then let's talk about the icons.
Now, there's many ways how we can add icons to our project, but I went with React Icons Library.
And if you'd want to visit and you know this case, I will actually visit this page.
So let me go over here.
Yep.
Now, this is unfortunately going to open up on a smaller browser window.
That's not what I want.
So let me navigate to a bigger one.
So that's the library that I'm using.
You can see that they offer many options, everything starting from font.
Awesome.
And then they have material design and all that.
And the way to set up works, of course, we would need to install a library.
Again, that goes without saying.
And then if you'd want to import the icon, you just go with a name.
The import.
That is important.
That you always need to use the name import because that's how they set everything up.
And then which library is using.
So if you navigate back, for example, you're gonna go with font.
Awesome and Nourse.
It just says get the icon name.
So these are your options.
And then you need to say a react icon.
That's the library name.
And then forward slash F.I..
So if you're going to do the same thing with material design, we can already put two and two together
where it says M.D.
Now what I really like is just searching for the icon.
So I can go off here for the user.
And this gives me all the icons.
So from all my options.
And that way I can just pick it out.
All right.
I would want to choose this one.
And then, of course, I just need to make sure I'm getting it from the correct library.
Again, we import from the reactor icons and for slash.
And the actual library that we're using, whether that's font awesome or material design or whatever,
we need to have the same exact name.
And then once we would want to use that icon, we just set it up as a component.
And what I really like is the fact that you can even add a class name on that icon.
So that way you can directly targeted and it returns the necessary G, which is even better.
So overall, I really like this library.
So that should do it for a star.
Hopefully we are all on the same page.
And of course, we can start typing away and building our awesome project.