1 00:00:00,120 --> 00:00:07,310 So let's not forget back to our main repo in here, we're looking for the folder number five. 2 00:00:07,770 --> 00:00:12,300 So let me start with the Observer that I'm going to navigate back to my route. 3 00:00:12,600 --> 00:00:19,200 And then, of course, I'm going to navigate to a menu and then more specifically, set up drag and 4 00:00:19,200 --> 00:00:19,640 drop. 5 00:00:19,890 --> 00:00:23,550 We are in the correct folder and clear the terminal. 6 00:00:23,790 --> 00:00:26,990 And I'm not just from NPM install. 7 00:00:27,480 --> 00:00:32,680 So we get all the balances and then of course, and RPM start as well. 8 00:00:33,300 --> 00:00:39,450 And of course we can navigate through the source and file we're looking for is Appoggiaturas. 9 00:00:39,780 --> 00:00:42,780 So in the Objets we import three things. 10 00:00:42,960 --> 00:00:46,070 We have menu component which will display the list. 11 00:00:46,350 --> 00:00:52,470 We have categories that will display the buttons of course, and then we have the items. 12 00:00:52,770 --> 00:00:55,470 Now the items are coming from that address. 13 00:00:55,470 --> 00:01:01,910 And again, that address is a file that holds my array online. 14 00:01:01,920 --> 00:01:03,570 Each and every item is an object. 15 00:01:03,580 --> 00:01:11,370 And again, we have the properties, the ideas, the titles, the categories, prices, images and a 16 00:01:11,370 --> 00:01:11,990 description. 17 00:01:12,360 --> 00:01:17,320 So as far as the buttons, we'll use this category property. 18 00:01:17,610 --> 00:01:20,640 You'll notice that each item has some kind of category. 19 00:01:20,850 --> 00:01:26,460 And then depending on that category, well, we'll display the buttons. 20 00:01:26,700 --> 00:01:33,630 So the more categories you have, of course, the more buttons you'll also have in your project. 21 00:01:33,780 --> 00:01:35,790 So that is my list. 22 00:01:36,090 --> 00:01:39,500 And then let's start working in the app Jazz. 23 00:01:39,750 --> 00:01:43,180 And first, I would want to set up two state values. 24 00:01:43,350 --> 00:01:49,250 And by the way, as far as the return, you should see the menu project set up if you want. 25 00:01:49,260 --> 00:01:54,900 You, of course, can do the same thing here we go to localhost three thousand and you should see the 26 00:01:54,900 --> 00:01:55,410 same thing. 27 00:01:55,440 --> 00:01:56,820 Menu, project setup. 28 00:01:57,180 --> 00:02:03,140 And I'm going to have two stage values, one for menu items and the second one for the categories. 29 00:02:03,300 --> 00:02:10,320 So let's just go here with CONSED and can we go with menu items and then also of course the function 30 00:02:10,320 --> 00:02:15,210 set menu items and that is equal to a used state. 31 00:02:15,420 --> 00:02:23,460 And now of course again we pass in those items, so whatever array we're getting from our data file. 32 00:02:23,790 --> 00:02:25,020 OK, that's awesome. 33 00:02:25,290 --> 00:02:30,510 And I would want to set up categories for the time being is just going to be an empty array because 34 00:02:30,510 --> 00:02:31,830 I would want to do that last, though. 35 00:02:32,100 --> 00:02:39,650 So we're going to go here with categories like so and then set and the same thing categories. 36 00:02:40,060 --> 00:02:47,490 OK, and that is to use state and like I just said, it's just going to be an empty array at the start. 37 00:02:47,820 --> 00:02:50,970 Then I would want to work on my return. 38 00:02:51,820 --> 00:02:58,060 And in here, we're going to go with Main, then we're going to delete this, my new project set up, 39 00:02:58,370 --> 00:03:01,620 let's also add my title just in case. 40 00:03:01,660 --> 00:03:05,530 So let's just go with section, then add some classes here. 41 00:03:05,800 --> 00:03:09,890 We're going to go with menu and section like. 42 00:03:09,910 --> 00:03:14,200 So then, like I said, title inside of the title. 43 00:03:14,230 --> 00:03:17,660 We're going to go with adding to our menu. 44 00:03:18,100 --> 00:03:19,060 OK, awesome. 45 00:03:19,360 --> 00:03:27,100 And then let's also add a underline write beautiful and now have our two components. 46 00:03:27,400 --> 00:03:35,530 One is going to be catagories, something we're going to work on last and then of course also the menu. 47 00:03:36,010 --> 00:03:40,750 So we display we have categories component as well as the menu component. 48 00:03:41,140 --> 00:03:47,470 And I think the more straightforward one is going to be menu where we have list of items and I just 49 00:03:47,470 --> 00:03:55,480 want to iterate and for each item I would just want to return some kind of nice looking article with 50 00:03:55,480 --> 00:03:58,530 an image, with text and all that good stuff. 51 00:03:58,870 --> 00:04:03,220 And of course, in order to pass my data into the menu, what do I need to do? 52 00:04:03,500 --> 00:04:06,160 I need to set up some kind of prop. 53 00:04:06,160 --> 00:04:06,670 Correct. 54 00:04:06,670 --> 00:04:15,340 So I set up the prop and the prop name will be items and I'll pass in my menu items, state value and 55 00:04:15,340 --> 00:04:17,770 then of course, inside the menu. 56 00:04:17,810 --> 00:04:21,590 Just so of course, that is my menu component. 57 00:04:21,910 --> 00:04:27,610 Now, of course, I would want to access the items and then iterate over the list and line for each 58 00:04:27,610 --> 00:04:28,210 and every item. 59 00:04:28,600 --> 00:04:32,080 Have a better looking return turn here. 60 00:04:32,910 --> 00:04:34,880 Let's change the heading to two. 61 00:04:35,850 --> 00:04:44,160 And let's add a little bit of classes and more specifically, we're looking for section santur like 62 00:04:44,160 --> 00:04:49,560 so and I'll delete my menu component, my meaningless text. 63 00:04:50,070 --> 00:04:55,770 And inside the section center, I'm going to iterate over my items. 64 00:04:56,070 --> 00:04:57,570 So over my prop. 65 00:04:57,810 --> 00:05:00,180 And then again, we need to come up with some kind of name. 66 00:05:00,510 --> 00:05:05,010 In this case, I'm going to say menu item that represents that object. 67 00:05:05,440 --> 00:05:09,480 And as far as the properties that I'm looking for, well, then just check. 68 00:05:09,480 --> 00:05:09,990 Correct. 69 00:05:10,470 --> 00:05:17,730 I have the title category, price, image and description, and we're going to do the structuring because 70 00:05:17,730 --> 00:05:18,960 I think it's going to be faster. 71 00:05:19,200 --> 00:05:27,120 So again, we go with ID, we go with title, we go with image as well as the description not as equal 72 00:05:27,120 --> 00:05:29,100 to my menu item. 73 00:05:29,460 --> 00:05:35,820 And once I have access to all of that, then we just need to come up with a return where I'm going to 74 00:05:35,820 --> 00:05:37,170 go with article again. 75 00:05:37,170 --> 00:05:39,030 We have a list, so we need to have a key. 76 00:05:39,420 --> 00:05:40,920 Then we pass in the ID. 77 00:05:41,220 --> 00:05:43,130 We set up a class and name. 78 00:05:43,560 --> 00:05:47,550 Now that is equal to a menu hyphen item. 79 00:05:48,000 --> 00:05:52,140 So and then like I said, there's going to be an image for the source. 80 00:05:52,140 --> 00:05:58,050 I'll use my image property for the alternative will use of the title. 81 00:05:59,090 --> 00:06:06,470 I don't hear an online class name will be photo photo over here, it's safe, and then, of course, 82 00:06:06,470 --> 00:06:13,250 I can see that I have my images and then right next to the image, I would want to have the item info. 83 00:06:13,520 --> 00:06:20,690 So I have the image and then I'm going to go with div with a class of item and then info and inside 84 00:06:20,690 --> 00:06:27,480 we're going to go with heter with the title The Price, and then of course we'll also have the description. 85 00:06:27,950 --> 00:06:36,680 So let's go with a header and inside of the header we have it heading for with a price or I'm sorry, 86 00:06:37,130 --> 00:06:42,200 title property here like so sure that should be our title. 87 00:06:42,440 --> 00:06:45,740 And then also I'd want to have a price for this one. 88 00:06:45,740 --> 00:06:52,220 I do want to add a class name and then of course I'm looking for my price property on. 89 00:06:52,220 --> 00:06:55,280 The problem here is that of course I didn't structure it. 90 00:06:55,610 --> 00:06:56,530 So let me go back. 91 00:06:56,540 --> 00:06:57,870 Let me just double check. 92 00:06:57,890 --> 00:06:58,240 Yeah. 93 00:06:58,280 --> 00:07:06,410 The price is the name of my property and instead of the menu, I'm going to go with a price and I'll 94 00:07:06,410 --> 00:07:08,560 close out my CURLEE purchase as well. 95 00:07:08,960 --> 00:07:09,830 So there it is. 96 00:07:10,080 --> 00:07:14,200 Now I have my price and the last thing is my description. 97 00:07:14,630 --> 00:07:21,590 So right next to the header, but still within it there we're going to go paragraph and we're looking 98 00:07:21,590 --> 00:07:22,880 for the description. 99 00:07:23,450 --> 00:07:31,840 We'll close out our curly braces and I would want add a class name of item and then hyphen text. 100 00:07:32,390 --> 00:07:39,070 So this should look extremely familiar because we have done that already quite a few times now. 101 00:07:39,080 --> 00:07:44,870 The only thing probably that is missing is the so so now we have that as well. 102 00:07:45,230 --> 00:07:47,870 But successfully we have the list. 103 00:07:48,290 --> 00:07:52,280 So now comes the interesting part where we'll set up our buttons.