1 00:00:02,050 --> 00:00:03,210 So let's get started 2 00:00:03,210 --> 00:00:05,430 building this project together now. 3 00:00:05,430 --> 00:00:07,210 For this, attached you'll find 4 00:00:07,210 --> 00:00:09,200 this basic starting project here 5 00:00:09,200 --> 00:00:12,900 which is just again an empty React application 6 00:00:12,900 --> 00:00:13,733 pretty much. 7 00:00:13,733 --> 00:00:15,860 And you can download this attachment, 8 00:00:15,860 --> 00:00:18,644 extract it, place it anywhere on your system 9 00:00:18,644 --> 00:00:20,970 where you want to work on it. 10 00:00:20,970 --> 00:00:24,270 Run npm install in the extracted folder 11 00:00:24,270 --> 00:00:26,616 to install all dependencies. 12 00:00:26,616 --> 00:00:31,120 Then npm starts to bring up that development server. 13 00:00:31,120 --> 00:00:33,110 And if you do all of that 14 00:00:33,110 --> 00:00:37,340 what you'll see on the screen is just something like this 15 00:00:37,340 --> 00:00:39,710 because we're going to build this project together 16 00:00:39,710 --> 00:00:41,560 from the ground up. 17 00:00:41,560 --> 00:00:44,608 And that of course means that we'll build many components 18 00:00:44,608 --> 00:00:47,030 and that we'll practice many things 19 00:00:47,030 --> 00:00:49,550 which we learned early in the course already 20 00:00:49,550 --> 00:00:52,488 because components and passing data between components 21 00:00:52,488 --> 00:00:55,120 and managing state and all of that 22 00:00:55,120 --> 00:00:59,390 of course are crucial core fundamentals of React 23 00:00:59,390 --> 00:01:02,940 so we will need those in any project we build. 24 00:01:02,940 --> 00:01:05,940 But then, throughout this course section 25 00:01:05,940 --> 00:01:07,540 we're also going to apply 26 00:01:07,540 --> 00:01:09,410 all these other hooks we had a look at 27 00:01:09,410 --> 00:01:14,016 like use effect, so that's the plan for this module. 28 00:01:14,016 --> 00:01:18,020 Now to get started with this application here 29 00:01:18,020 --> 00:01:20,760 we will need a bunch of components. 30 00:01:20,760 --> 00:01:23,060 And if you remember the finished app 31 00:01:23,060 --> 00:01:24,474 which I showed you before, 32 00:01:24,474 --> 00:01:25,969 if you have a look at that 33 00:01:25,969 --> 00:01:29,610 there of course are quite a few components 34 00:01:29,610 --> 00:01:31,610 that can be identified. 35 00:01:31,610 --> 00:01:34,794 Like that list of meals or the header at the top 36 00:01:34,794 --> 00:01:39,360 or the cart, but also a couple of wrapper components 37 00:01:39,360 --> 00:01:42,117 like this general model component, 38 00:01:42,117 --> 00:01:44,090 this overlay component. 39 00:01:44,090 --> 00:01:47,830 Or this container our meals are in. 40 00:01:47,830 --> 00:01:49,700 We also got this image below the header 41 00:01:49,700 --> 00:01:52,833 so there are quite a bit of components involved. 42 00:01:53,870 --> 00:01:56,670 Now to get started, here I will again add 43 00:01:56,670 --> 00:01:58,890 a components folder of course. 44 00:01:58,890 --> 00:02:00,990 And in that components folder, 45 00:02:00,990 --> 00:02:04,300 I will add four sub-folders 46 00:02:04,300 --> 00:02:06,674 which is just a personal decision made by me 47 00:02:06,674 --> 00:02:08,793 and I'll explain it along the way. 48 00:02:09,630 --> 00:02:13,530 One sub-folder is the UI sub-folder. 49 00:02:13,530 --> 00:02:17,390 I want to place general UI elements, 50 00:02:17,390 --> 00:02:20,345 general UI components in that folder. 51 00:02:20,345 --> 00:02:24,410 For example, I will have an input component in there 52 00:02:24,410 --> 00:02:27,790 where the user can enter the amount in this application. 53 00:02:27,790 --> 00:02:30,140 I will have a card component in there 54 00:02:30,140 --> 00:02:34,211 which will be this container around my meals, for example. 55 00:02:34,211 --> 00:02:39,211 And I plan to place the model component in that folder. 56 00:02:39,410 --> 00:02:42,060 So some general UI components 57 00:02:42,060 --> 00:02:44,955 which are not tied to a specific feature 58 00:02:44,955 --> 00:02:47,840 of this application, but which instead 59 00:02:47,840 --> 00:02:51,343 could be used in multiple places in any project. 60 00:02:52,960 --> 00:02:54,601 I will also add another folder 61 00:02:54,601 --> 00:02:57,450 side by side to the UI folder 62 00:02:57,450 --> 00:03:01,090 and that will be the Layout folder. 63 00:03:01,090 --> 00:03:05,470 Now in that folder, I plan to add my header component, 64 00:03:05,470 --> 00:03:09,320 basically, and also another component 65 00:03:09,320 --> 00:03:11,363 which will be related to that header. 66 00:03:12,920 --> 00:03:14,740 Another folder which I will add 67 00:03:14,740 --> 00:03:19,420 side by side to Layout and UI is the Meals folder. 68 00:03:19,420 --> 00:03:22,490 That is the folder which will hold that list of meals, 69 00:03:22,490 --> 00:03:25,483 but also the individual meal item components. 70 00:03:26,360 --> 00:03:30,470 And then the last folder for the last set of components 71 00:03:30,470 --> 00:03:32,981 I plan to build, is the cart folder 72 00:03:32,981 --> 00:03:36,573 which will hold all the cart related components. 73 00:03:37,840 --> 00:03:41,430 So that is just the structure I came up with here. 74 00:03:41,430 --> 00:03:44,270 Of course it's not the only correct structure, 75 00:03:44,270 --> 00:03:46,493 of course you can go for a different structure 76 00:03:46,493 --> 00:03:50,144 and store your components the way you want 77 00:03:50,144 --> 00:03:52,830 and write the components you want to write. 78 00:03:52,830 --> 00:03:54,630 This is just my suggestion 79 00:03:54,630 --> 00:03:58,600 because I think that this is a nice split 80 00:03:58,600 --> 00:04:01,710 to split our components between features, 81 00:04:01,710 --> 00:04:05,736 meals, and cart, and also have some general UI components 82 00:04:05,736 --> 00:04:08,253 and some general layout components.