WEBVTT 00:00.000 --> 00:00.330 Okay. 00:00.360 --> 00:03.300 Currently we've got a single folder structure. 00:03.300 --> 00:08.670 Really, everything's inside the source folder with zero organization effectively. 00:08.670 --> 00:13.560 And let's add a bit of organization so that we don't make our code unmanageable. 00:13.590 --> 00:17.400 Now there's no law in place about folder structure when it comes to react. 00:17.400 --> 00:20.760 It's really developer preference and what works for you. 00:20.790 --> 00:22.590 I'm going to demonstrate one approach. 00:22.590 --> 00:24.720 And this isn't the only approach. 00:24.720 --> 00:30.180 You may see others, and you may have a preference of how you structure your code in your projects. 00:30.210 --> 00:33.150 The goal of this is always the same. 00:33.780 --> 00:39.270 The only reason we do this is so that we can, as developers, we can easily locate the code we're looking 00:39.270 --> 00:45.150 for inside the file and folders if we need to, and inside the source folder. 00:45.150 --> 00:47.070 Just to give this a bit of structure. 00:47.070 --> 00:52.500 And this is the approach that I'll be taking in this course I'm going to create a new folder called 00:52.530 --> 00:52.980 app. 00:52.980 --> 01:00.960 Inside this folder is going to be any code that we write that is applicable to the application as a 01:00.960 --> 01:01.740 whole. 01:01.920 --> 01:08.860 So things like a navbar, things like our product type will have a models folder where this kind of 01:08.890 --> 01:14.560 thing goes, and things like global styles can all go inside this app folder, but I'll create another 01:14.560 --> 01:18.580 folder inside here to give this a bit of structure called layouts. 01:18.580 --> 01:24.340 And inside the layout folder, and something that I don't particularly like inside VS code is these 01:24.340 --> 01:25.480 collapsed folders. 01:25.480 --> 01:30.880 I'd prefer that not to be the case and see the layout folder directly underneath the app, so I'm just 01:30.880 --> 01:37.660 going to make a change to that inside code and settings and settings. 01:37.660 --> 01:42.220 And I'll just search for folder and compact folders. 01:42.220 --> 01:43.150 This is what I'm looking for. 01:43.180 --> 01:47.380 I'm just going to uncheck that so that the folders are not compact. 01:47.380 --> 01:49.540 I prefer to see all of them like this. 01:49.540 --> 01:53.650 And I'm going to put the app dot TSX inside the layout folder. 01:53.650 --> 01:58.840 I'm going to say yes to move it and yes to update any imports. 01:58.840 --> 02:01.450 The main TSX can stay where it is. 02:01.450 --> 02:07.180 Inside the app folder, I'm going to create another new folder and call it models, and I'm going to 02:07.180 --> 02:14.040 drag the products and put that inside the models folder, the index index.css. 02:14.070 --> 02:19.470 I'm going to use this as a global kind of stylesheet, and I'm going to move this into the layout folder 02:19.470 --> 02:23.070 as well and move this inside there. 02:23.070 --> 02:26.760 But I'm going to rename this to Styles.css instead. 02:26.760 --> 02:34.050 So I'm just going to say rename and specify Styles.css as our global stylesheet for our application. 02:34.410 --> 02:36.630 And everything else can pretty much stay the same. 02:36.630 --> 02:42.180 We've got an error in the main dot TSX, and something didn't update when we moved it, and that would 02:42.180 --> 02:43.800 be the app itself. 02:43.800 --> 02:45.960 So we could just remove app from there. 02:45.960 --> 02:52.950 And then we should be able to use the quick fix to bring in the correct import coming from Dot App Layout 02:52.980 --> 02:53.640 app. 02:53.640 --> 02:57.180 And I'm just going to rename the index dot CSS. 02:57.360 --> 03:02.580 And that's now inside the app folder inside the layout folder. 03:02.580 --> 03:05.370 And it's called Styles.css. 03:05.970 --> 03:10.890 And that should be that everything else should still be okay. 03:10.920 --> 03:19.220 And in fact, no it isn't because our app did not update the product import or moving the product afterwards. 03:19.250 --> 03:20.390 Didn't update that. 03:20.390 --> 03:25.430 So once again, I'm just going to remove the import and use the quick fix to get the correct import 03:25.430 --> 03:28.220 from models product inside there. 03:28.880 --> 03:29.960 And that should be it. 03:29.960 --> 03:31.700 Everything else should be fine. 03:31.700 --> 03:37.820 Also what we'll have as well as the app folder we will create inside the source folder a new folder 03:37.820 --> 03:39.110 called features. 03:39.230 --> 03:43.670 So for each feature inside our application it's going to have its own dedicated folder. 03:43.670 --> 03:51.200 So we're going to have things like a catalog folder and a basket folder a checkout folder and orders 03:51.200 --> 03:51.830 folder. 03:51.830 --> 03:55.730 So each feature is going to have code related to that specific feature. 03:55.730 --> 03:58.670 And that's going to go inside this folder. 03:58.670 --> 04:00.650 So it keeps us more organized. 04:00.680 --> 04:02.690 It's not the only way to lay out the code. 04:02.690 --> 04:04.340 There's other ways you can do this. 04:04.340 --> 04:08.660 But this is the approach that I find makes the most logical sense to me. 04:08.750 --> 04:11.360 And that's the way I'll demonstrate it. 04:11.360 --> 04:13.040 So now we've got some structure. 04:13.040 --> 04:18.410 Next we're going to take a look at adding some react components because currently we only have the one. 04:18.410 --> 04:20.990 And that's not normal for a react application. 04:20.990 --> 04:24.080 We normally make our application up of many components. 04:24.080 --> 04:25.970 So we'll take a look at that next.