1 00:00:00,290 --> 00:00:03,080 Okay, so I want to get some products listed on the page. 2 00:00:03,080 --> 00:00:08,150 And as I said, just for now, we're going to start with dummy content and then we'll move on to having 3 00:00:08,150 --> 00:00:11,780 a database and all that good stuff, having a back end API. 4 00:00:11,810 --> 00:00:19,100 So in the project files for this video, you're going to have a folder, a zip file called Products 5 00:00:19,100 --> 00:00:19,850 and Images. 6 00:00:19,850 --> 00:00:25,130 So unzip that and then you'll have a products JS and then an images folder. 7 00:00:25,130 --> 00:00:29,060 So what we're going to do is bring the images. 8 00:00:29,060 --> 00:00:33,470 So over here in public we're going to bring, Oops, I lost it. 9 00:00:33,470 --> 00:00:37,940 We're going to bring the images folder into public, okay? 10 00:00:37,940 --> 00:00:41,030 And then what we'll do for the products. 11 00:00:41,060 --> 00:00:42,200 JS. 12 00:00:43,020 --> 00:00:43,850 Uh, let's see. 13 00:00:43,860 --> 00:00:45,210 How do we want to. 14 00:00:45,600 --> 00:00:49,470 We'll just put this right in the source folder because we're not going to keep it for that long. 15 00:00:49,470 --> 00:00:51,120 So just drag that over there. 16 00:00:51,120 --> 00:00:52,440 And this is what it looks like. 17 00:00:52,440 --> 00:00:58,530 It's just an array of products with an ID, I'm using an underscore ID because when we use MongoDB, 18 00:00:58,890 --> 00:01:02,610 that's what it uses for the what's called the object ID. 19 00:01:03,030 --> 00:01:05,730 Then we have a name, an image path. 20 00:01:05,730 --> 00:01:10,530 Right now, these are going to go to the images that we just put in public, but later on we'll be able 21 00:01:10,530 --> 00:01:14,310 to upload images and it will get the, you know, get it from the server. 22 00:01:14,340 --> 00:01:20,850 Then we have a description and we have the brand, the category, the price, the count in stock and 23 00:01:20,850 --> 00:01:24,060 the rating and then the number of reviews. 24 00:01:24,390 --> 00:01:24,840 Okay. 25 00:01:24,840 --> 00:01:26,460 So those are the the fields. 26 00:01:26,460 --> 00:01:27,120 And what do we have? 27 00:01:27,120 --> 00:01:28,320 Five, I think. 28 00:01:28,990 --> 00:01:29,890 Six of them. 29 00:01:29,890 --> 00:01:33,430 And then we're just exporting products at the at the end here. 30 00:01:33,460 --> 00:01:38,530 Now, the way our pages are going to work are screens rather is we're going to have a folder called 31 00:01:38,530 --> 00:01:40,570 screens and we'll have a home screen. 32 00:01:40,570 --> 00:01:44,740 We'll have a product details screen, a cart screen. 33 00:01:44,740 --> 00:01:49,690 Basically any page or screen will have a component for that. 34 00:01:49,690 --> 00:01:52,000 And we're going to start off with the home screen. 35 00:01:52,000 --> 00:01:54,490 So I want to go just in the source. 36 00:01:54,520 --> 00:01:54,710 Okay. 37 00:01:54,730 --> 00:01:57,160 Not in components, but just right in the source. 38 00:01:57,190 --> 00:02:00,310 We're going to create a folder called screens. 39 00:02:00,490 --> 00:02:00,720 Okay. 40 00:02:00,760 --> 00:02:03,610 And we're going to get into React Router in the next video. 41 00:02:03,610 --> 00:02:07,270 For now, I'm just going to embed the home screen in the main app file. 42 00:02:07,270 --> 00:02:17,810 So let's create a new file here and let's call it home screen dot JS X and we'll just do rafc. 43 00:02:19,340 --> 00:02:21,290 Okay, so we got our home screen. 44 00:02:22,100 --> 00:02:25,850 Now, I do want to add a little bit of formatting here. 45 00:02:25,850 --> 00:02:29,060 So we're going to import some stuff from React Bootstrap. 46 00:02:29,060 --> 00:02:38,630 I just want a row and a column from React Bootstrap and then I'm going to bring in the products. 47 00:02:38,630 --> 00:02:40,220 So products. 48 00:02:41,270 --> 00:02:44,560 Let's import that from dot, dot slash products. 49 00:02:44,570 --> 00:02:48,800 So that's going to be the not Json, it's just a JavaScript array. 50 00:02:48,800 --> 00:02:50,990 You could use Json if you wanted to. 51 00:02:51,620 --> 00:02:55,120 And then we want to basically map through those. 52 00:02:55,130 --> 00:02:57,200 But first let's. 53 00:02:57,950 --> 00:03:02,960 Let's make this just a fragment and then we'll have an H one that says latest products. 54 00:03:02,960 --> 00:03:04,610 Then we'll have a row. 55 00:03:06,330 --> 00:03:07,260 Let's see. 56 00:03:07,980 --> 00:03:10,380 Yeah, we'll have a row and then. 57 00:03:11,030 --> 00:03:12,290 Let's map through. 58 00:03:12,290 --> 00:03:14,300 So we're going to take our products, our data. 59 00:03:14,300 --> 00:03:23,750 We're going to use map and basically just loop through each one and then output a a product. 60 00:03:24,540 --> 00:03:27,420 Component inside of a column. 61 00:03:27,420 --> 00:03:33,300 So I'm just going to hit tab here to use what copilot is referencing. 62 00:03:33,300 --> 00:03:38,160 So this column has basically it's responsive. 63 00:03:38,190 --> 00:03:41,850 That's how React Bootstrap works with columns on small screens. 64 00:03:41,850 --> 00:03:47,010 It's going to take up all 12 columns, so it'll be just stacked on medium screens. 65 00:03:47,010 --> 00:03:48,300 It'll be two columns. 66 00:03:48,300 --> 00:03:50,970 It's going to take up six because there's 12 total. 67 00:03:50,970 --> 00:03:53,760 So each one will take up six large screens. 68 00:03:53,760 --> 00:03:58,050 It'll take up four extra large screens, it'll take up three. 69 00:03:58,440 --> 00:03:58,920 All right. 70 00:03:58,920 --> 00:04:07,590 So let's in here in this column for now, I'm just going to put an H three with the word product. 71 00:04:07,590 --> 00:04:08,940 Actually, we can put the name. 72 00:04:08,940 --> 00:04:12,510 And in here we have to, of course, say product. 73 00:04:12,690 --> 00:04:18,480 And then instead of that, let's do this, let's say product dot name. 74 00:04:19,240 --> 00:04:26,800 So that should map through the products in the file, create a column for each one, and just have the 75 00:04:26,800 --> 00:04:27,880 name for now. 76 00:04:27,880 --> 00:04:36,460 So let's go into our app.js and I'm going to just import home screens directly or home screen. 77 00:04:37,350 --> 00:04:39,060 And then let's put that. 78 00:04:39,060 --> 00:04:42,720 We'll just replace this h one right here with home screen. 79 00:04:44,590 --> 00:04:45,430 And there we go. 80 00:04:45,430 --> 00:04:51,880 So now we just see the H three right now instead of an H three, I want to have a product component. 81 00:04:51,880 --> 00:04:53,110 So let's do that. 82 00:04:53,110 --> 00:05:03,380 Let's, let's go into components and let's create a new file here called Product dot JS X and RFC. 83 00:05:05,170 --> 00:05:05,590 Okay. 84 00:05:05,590 --> 00:05:09,940 And I want each one to be a card or be wrapped in a card. 85 00:05:09,940 --> 00:05:15,070 So let's import, let's say card from React Bootstrap. 86 00:05:15,070 --> 00:05:18,610 And then this is going to take in product as a prop. 87 00:05:18,610 --> 00:05:21,950 So we're going to destructure here and get the product. 88 00:05:21,970 --> 00:05:29,500 So what we're going to do here, let's make this the card, this, this wrapper div here. 89 00:05:29,500 --> 00:05:34,570 So we'll say card and let's give it a class. 90 00:05:35,260 --> 00:05:38,830 Uh, class name and we'll do m y. 91 00:05:38,840 --> 00:05:45,800 So that's margin on the Y axis three and then padding all around three and let's make this rounded, 92 00:05:46,190 --> 00:05:46,610 okay? 93 00:05:46,610 --> 00:05:50,030 And then in the card, we're going to have a link now. 94 00:05:51,330 --> 00:05:57,450 I'm only using an A tag at the moment because we don't have React router installed, but that will change 95 00:05:57,450 --> 00:06:04,290 to a link component and it's going to go to product slash and then whatever the product ID is and then 96 00:06:04,290 --> 00:06:05,470 we'll have the image. 97 00:06:05,490 --> 00:06:07,320 It's actually a card image. 98 00:06:07,320 --> 00:06:09,480 So this is a component we can use. 99 00:06:09,510 --> 00:06:12,570 We're going to show the image as the source and then variant. 100 00:06:12,570 --> 00:06:14,700 You can use different positioning. 101 00:06:14,700 --> 00:06:15,960 We're going to do top. 102 00:06:16,440 --> 00:06:18,360 Okay, Underneath that, a tag. 103 00:06:18,360 --> 00:06:20,280 We're going to have the card body. 104 00:06:21,060 --> 00:06:23,160 So let's close that. 105 00:06:23,160 --> 00:06:26,910 And in the card body again, I'm going to have the link. 106 00:06:29,490 --> 00:06:35,040 Okay, so we have the link and then inside that is going to be the title. 107 00:06:35,130 --> 00:06:42,540 Now I want it to display as a div so we can actually add an attribute called as and then say div. 108 00:06:43,150 --> 00:06:46,330 And then let's close that card title. 109 00:06:47,310 --> 00:06:47,760 Okay. 110 00:06:47,760 --> 00:06:52,890 And then inside that, let's do the product name wrapped in some strong tags. 111 00:06:53,770 --> 00:06:58,150 And then for the for the description, we're not going to do the description. 112 00:06:58,150 --> 00:06:59,460 We're going to do the price. 113 00:06:59,470 --> 00:07:05,320 So I'm going to go under the link, under this, a tag here, and we're going to say card text. 114 00:07:06,550 --> 00:07:07,810 Let's close that card. 115 00:07:07,840 --> 00:07:13,660 Text and inside the text I actually want to make this an H3, not a div. 116 00:07:15,000 --> 00:07:16,350 So that's how you can do this. 117 00:07:16,350 --> 00:07:21,240 You can this can be any type of element you want, a div, a heading, whatever. 118 00:07:21,240 --> 00:07:25,200 So we're going to make it an H3 and we're going to put in the product price. 119 00:07:25,940 --> 00:07:27,680 This isn't a template literal. 120 00:07:27,680 --> 00:07:29,690 It's just literally a dollar sign. 121 00:07:30,350 --> 00:07:32,450 And we're just showing the price and that should do it. 122 00:07:32,450 --> 00:07:33,680 So let's save that. 123 00:07:33,680 --> 00:07:37,400 And now I'm going to go to the home screen and we're going to import. 124 00:07:38,220 --> 00:07:39,990 The product. 125 00:07:40,950 --> 00:07:42,640 Uh, product component. 126 00:07:43,960 --> 00:07:49,360 And then instead of showing this H three, let's get rid of that and let's pass. 127 00:07:49,360 --> 00:07:54,550 Let's put the product and pass in product as the. 128 00:07:55,210 --> 00:07:57,130 You know, as the prop here. 129 00:07:57,370 --> 00:08:05,470 We also need to give this column a key and we'll set the key to let's do the product ID, So product 130 00:08:05,470 --> 00:08:08,740 dot underscore ID, save that. 131 00:08:09,100 --> 00:08:10,480 And there we go. 132 00:08:11,450 --> 00:08:14,810 So that looks pretty good on small screens. 133 00:08:14,810 --> 00:08:15,410 It's stacked. 134 00:08:15,410 --> 00:08:18,230 Then it goes to two, three and four. 135 00:08:18,230 --> 00:08:20,000 And that's because of these right here. 136 00:08:20,000 --> 00:08:25,160 If you want to change the orientation for any of the screen sizes, you can just change those. 137 00:08:27,100 --> 00:08:27,490 Okay. 138 00:08:27,490 --> 00:08:30,280 So I think that we're good for this video. 139 00:08:30,280 --> 00:08:36,220 In the next video, I want to implement React Router because obviously we're going to have multiple 140 00:08:36,220 --> 00:08:36,820 screens. 141 00:08:36,820 --> 00:08:42,190 Right now I'm just putting the I'm just embedding the home screen into the app file, which of course 142 00:08:42,190 --> 00:08:43,179 we don't want to do. 143 00:08:43,179 --> 00:08:45,010 So we'll get into that next.