Okay, so I want to get some products listed on the page.
And as I said, just for now, we're going to start with dummy content and then we'll move on to having
a database and all that good stuff, having a back end API.
So in the project files for this video, you're going to have a folder, a zip file called Products
and Images.
So unzip that and then you'll have a products JS and then an images folder.
So what we're going to do is bring the images.
So over here in public we're going to bring, Oops, I lost it.
We're going to bring the images folder into public, okay?
And then what we'll do for the products.
JS.
Uh, let's see.
How do we want to.
We'll just put this right in the source folder because we're not going to keep it for that long.
So just drag that over there.
And this is what it looks like.
It's just an array of products with an ID, I'm using an underscore ID because when we use MongoDB,
that's what it uses for the what's called the object ID.
Then we have a name, an image path.
Right now, these are going to go to the images that we just put in public, but later on we'll be able
to upload images and it will get the, you know, get it from the server.
Then we have a description and we have the brand, the category, the price, the count in stock and
the rating and then the number of reviews.
Okay.
So those are the the fields.
And what do we have?
Five, I think.
Six of them.
And then we're just exporting products at the at the end here.
Now, the way our pages are going to work are screens rather is we're going to have a folder called
screens and we'll have a home screen.
We'll have a product details screen, a cart screen.
Basically any page or screen will have a component for that.
And we're going to start off with the home screen.
So I want to go just in the source.
Okay.
Not in components, but just right in the source.
We're going to create a folder called screens.
Okay.
And we're going to get into React Router in the next video.
For now, I'm just going to embed the home screen in the main app file.
So let's create a new file here and let's call it home screen dot JS X and we'll just do rafc.
Okay, so we got our home screen.
Now, I do want to add a little bit of formatting here.
So we're going to import some stuff from React Bootstrap.
I just want a row and a column from React Bootstrap and then I'm going to bring in the products.
So products.
Let's import that from dot, dot slash products.
So that's going to be the not Json, it's just a JavaScript array.
You could use Json if you wanted to.
And then we want to basically map through those.
But first let's.
Let's make this just a fragment and then we'll have an H one that says latest products.
Then we'll have a row.
Let's see.
Yeah, we'll have a row and then.
Let's map through.
So we're going to take our products, our data.
We're going to use map and basically just loop through each one and then output a a product.
Component inside of a column.
So I'm just going to hit tab here to use what copilot is referencing.
So this column has basically it's responsive.
That's how React Bootstrap works with columns on small screens.
It's going to take up all 12 columns, so it'll be just stacked on medium screens.
It'll be two columns.
It's going to take up six because there's 12 total.
So each one will take up six large screens.
It'll take up four extra large screens, it'll take up three.
All right.
So let's in here in this column for now, I'm just going to put an H three with the word product.
Actually, we can put the name.
And in here we have to, of course, say product.
And then instead of that, let's do this, let's say product dot name.
So that should map through the products in the file, create a column for each one, and just have the
name for now.
So let's go into our app.js and I'm going to just import home screens directly or home screen.
And then let's put that.
We'll just replace this h one right here with home screen.
And there we go.
So now we just see the H three right now instead of an H three, I want to have a product component.
So let's do that.
Let's, let's go into components and let's create a new file here called Product dot JS X and RFC.
Okay.
And I want each one to be a card or be wrapped in a card.
So let's import, let's say card from React Bootstrap.
And then this is going to take in product as a prop.
So we're going to destructure here and get the product.
So what we're going to do here, let's make this the card, this, this wrapper div here.
So we'll say card and let's give it a class.
Uh, class name and we'll do m y.
So that's margin on the Y axis three and then padding all around three and let's make this rounded,
okay?
And then in the card, we're going to have a link now.
I'm only using an A tag at the moment because we don't have React router installed, but that will change
to a link component and it's going to go to product slash and then whatever the product ID is and then
we'll have the image.
It's actually a card image.
So this is a component we can use.
We're going to show the image as the source and then variant.
You can use different positioning.
We're going to do top.
Okay, Underneath that, a tag.
We're going to have the card body.
So let's close that.
And in the card body again, I'm going to have the link.
Okay, so we have the link and then inside that is going to be the title.
Now I want it to display as a div so we can actually add an attribute called as and then say div.
And then let's close that card title.
Okay.
And then inside that, let's do the product name wrapped in some strong tags.
And then for the for the description, we're not going to do the description.
We're going to do the price.
So I'm going to go under the link, under this, a tag here, and we're going to say card text.
Let's close that card.
Text and inside the text I actually want to make this an H3, not a div.
So that's how you can do this.
You can this can be any type of element you want, a div, a heading, whatever.
So we're going to make it an H3 and we're going to put in the product price.
This isn't a template literal.
It's just literally a dollar sign.
And we're just showing the price and that should do it.
So let's save that.
And now I'm going to go to the home screen and we're going to import.
The product.
Uh, product component.
And then instead of showing this H three, let's get rid of that and let's pass.
Let's put the product and pass in product as the.
You know, as the prop here.
We also need to give this column a key and we'll set the key to let's do the product ID, So product
dot underscore ID, save that.
And there we go.
So that looks pretty good on small screens.
It's stacked.
Then it goes to two, three and four.
And that's because of these right here.
If you want to change the orientation for any of the screen sizes, you can just change those.
Okay.
So I think that we're good for this video.
In the next video, I want to implement React Router because obviously we're going to have multiple
screens.
Right now I'm just putting the I'm just embedding the home screen into the app file, which of course
we don't want to do.
So we'll get into that next.