1 00:00:02,090 --> 00:00:04,050 So, now, in the last lecture we learned 2 00:00:04,050 --> 00:00:06,960 about JSX and how it looks like under the hood, 3 00:00:06,960 --> 00:00:10,560 and why we therefore could add all these React imports 4 00:00:10,560 --> 00:00:13,373 to all these files, which hold JSX code. 5 00:00:14,450 --> 00:00:17,890 Speaking of the files, let's talk about organizing them. 6 00:00:17,890 --> 00:00:20,030 Here, we only got a couple of components 7 00:00:20,030 --> 00:00:23,030 and therefore we can store them like this, 8 00:00:23,030 --> 00:00:25,710 but as your project grows and as you have more 9 00:00:25,710 --> 00:00:27,980 and more components you might want 10 00:00:27,980 --> 00:00:30,290 to organize them into sub folders 11 00:00:30,290 --> 00:00:33,743 and not just throw them all into one components folder. 12 00:00:34,600 --> 00:00:36,020 And, indeed, that is something 13 00:00:36,020 --> 00:00:38,040 we can already get started with. 14 00:00:38,040 --> 00:00:42,800 Here, we could argue that we have some general UI components 15 00:00:42,800 --> 00:00:44,980 some general user interface elements, 16 00:00:44,980 --> 00:00:48,340 which are not tied to a specific feature of the app. 17 00:00:48,340 --> 00:00:51,590 And then, we got some features specific components, 18 00:00:51,590 --> 00:00:53,580 like these components, which are dealing 19 00:00:53,580 --> 00:00:57,243 with rendering expenses and expense data. 20 00:00:58,240 --> 00:01:00,880 And, therefore, in the components sub folder, 21 00:01:00,880 --> 00:01:05,630 we could create an Expenses sub folder, 22 00:01:05,630 --> 00:01:10,630 and next to that a UI sub folder 23 00:01:11,220 --> 00:01:14,513 for general user interface elements. 24 00:01:15,730 --> 00:01:17,500 And we could move the card files 25 00:01:17,500 --> 00:01:21,664 into the UI folder and the Expenses, ExpenseItem, 26 00:01:21,664 --> 00:01:24,783 and ExpenseDate files into the Expenses folder. 27 00:01:26,100 --> 00:01:27,630 Now, you just want to make sure 28 00:01:27,630 --> 00:01:31,550 that you update all your imports like in Expenses.js, 29 00:01:31,550 --> 00:01:34,410 where we import card, we now, first of all, 30 00:01:34,410 --> 00:01:38,670 need to go up one level with two dots and then a slash 31 00:01:38,670 --> 00:01:40,870 and then dive into the UI folder 32 00:01:40,870 --> 00:01:43,503 and import card, the card file. 33 00:01:44,810 --> 00:01:47,500 We need to go up one level because Expenses is now 34 00:01:47,500 --> 00:01:49,770 in the Expenses folder, and we need to get 35 00:01:49,770 --> 00:01:53,240 out of that folder into the next folder above it 36 00:01:53,240 --> 00:01:57,380 to then dive into the UI folder, which is a sibling folder 37 00:01:57,380 --> 00:02:00,233 to Expenses, to the Expenses folder, I mean. 38 00:02:01,430 --> 00:02:03,580 We don't need to update the other imports 39 00:02:03,580 --> 00:02:05,290 because these files are still in 40 00:02:05,290 --> 00:02:08,063 the same folder as Expenses.js. 41 00:02:08,900 --> 00:02:11,320 For ExpenseItem, we also need to update 42 00:02:11,320 --> 00:02:14,270 the card import though, go up one level, 43 00:02:14,270 --> 00:02:17,423 dive into the UI folder and then import card. 44 00:02:18,510 --> 00:02:22,310 And in App.js, we no longer import Expenses 45 00:02:22,310 --> 00:02:26,420 from components' Expenses, instead we dive into components 46 00:02:26,420 --> 00:02:28,300 then into the Expenses folder 47 00:02:28,300 --> 00:02:30,430 and there it's the Expenses file, 48 00:02:30,430 --> 00:02:32,650 which you want to import from. 49 00:02:32,650 --> 00:02:34,490 So, now, we can adjust these imports. 50 00:02:34,490 --> 00:02:39,323 And if you did that, this again, all works if you load it. 51 00:02:40,420 --> 00:02:43,300 And we're really just doing this to organize our files, 52 00:02:43,300 --> 00:02:45,400 and to keep our components organized, 53 00:02:45,400 --> 00:02:49,460 and to make sure that they're not all in one big folder. 54 00:02:49,460 --> 00:02:52,400 Ultimately, it's up to you how you want to organize them. 55 00:02:52,400 --> 00:02:54,280 And, of course you, should just organize them, 56 00:02:54,280 --> 00:02:57,450 such that you and any team members you might be working 57 00:02:57,450 --> 00:03:00,540 with are comfortable working with these files. 58 00:03:00,540 --> 00:03:03,033 That's the most important thing which matters.