Okay.
Currently we've got a single folder structure.
Really, everything's inside the source folder with zero organization effectively.
And let's add a bit of organization so that we don't make our code unmanageable.
Now there's no law in place about folder structure when it comes to react.
It's really developer preference and what works for you.
I'm going to demonstrate one approach.
And this isn't the only approach.
You may see others, and you may have a preference of how you structure your code in your projects.
The goal of this is always the same.
The only reason we do this is so that we can, as developers, we can easily locate the code we're looking
for inside the file and folders if we need to, and inside the source folder.
Just to give this a bit of structure.
And this is the approach that I'll be taking in this course I'm going to create a new folder called
app.
Inside this folder is going to be any code that we write that is applicable to the application as a
whole.
So things like a navbar, things like our product type will have a models folder where this kind of
thing goes, and things like global styles can all go inside this app folder, but I'll create another
folder inside here to give this a bit of structure called layouts.
And inside the layout folder, and something that I don't particularly like inside VS code is these
collapsed folders.
I'd prefer that not to be the case and see the layout folder directly underneath the app, so I'm just
going to make a change to that inside code and settings and settings.
And I'll just search for folder and compact folders.
This is what I'm looking for.
I'm just going to uncheck that so that the folders are not compact.
I prefer to see all of them like this.
And I'm going to put the app dot TSX inside the layout folder.
I'm going to say yes to move it and yes to update any imports.
The main TSX can stay where it is.
Inside the app folder, I'm going to create another new folder and call it models, and I'm going to
drag the products and put that inside the models folder, the index index.css.
I'm going to use this as a global kind of stylesheet, and I'm going to move this into the layout folder
as well and move this inside there.
But I'm going to rename this to Styles.css instead.
So I'm just going to say rename and specify Styles.css as our global stylesheet for our application.
And everything else can pretty much stay the same.
We've got an error in the main dot TSX, and something didn't update when we moved it, and that would
be the app itself.
So we could just remove app from there.
And then we should be able to use the quick fix to bring in the correct import coming from Dot App Layout
app.
And I'm just going to rename the index dot CSS.
And that's now inside the app folder inside the layout folder.
And it's called Styles.css.
And that should be that everything else should still be okay.
And in fact, no it isn't because our app did not update the product import or moving the product afterwards.
Didn't update that.
So once again, I'm just going to remove the import and use the quick fix to get the correct import
from models product inside there.
And that should be it.
Everything else should be fine.
Also what we'll have as well as the app folder we will create inside the source folder a new folder
called features.
So for each feature inside our application it's going to have its own dedicated folder.
So we're going to have things like a catalog folder and a basket folder a checkout folder and orders
folder.
So each feature is going to have code related to that specific feature.
And that's going to go inside this folder.
So it keeps us more organized.
It's not the only way to lay out the code.
There's other ways you can do this.
But this is the approach that I find makes the most logical sense to me.
And that's the way I'll demonstrate it.
So now we've got some structure.
Next we're going to take a look at adding some react components because currently we only have the one.
And that's not normal for a react application.
We normally make our application up of many components.
So we'll take a look at that next.