E-commerce web app with React JS (Part 3)

On this part 3 of building an e-commerce with ReactJS we’ll do what was left on the previous lesson, that is populate the main area with some informations about the product.

For that we need to add the following items:

1. Image
2. Brand
3. Price
4. Title

Let’s start with a regular HTML template, this will make easier to transport the main elements for the ReactJS app. Just call the new HTML that will be created as index.html. The structure is simple, a <div> that wraps all the products, inside this div an unordered list (<ul>) will hold all products listed in a list item tag (<li>). Inside the <li> there is an image tag (<img>), and four divs; the first one with an a tag (<a>) and the second, third and fourth with text only.

<div class=”content”>
<ul class=”products”>
<li>
<div class=”product”>
<img
src=”image.jpg”
alt=”Product”
class=”product-image”
/>
<div class=”product-name”>
<a href=”product”> Lettuce</a>
</div>
<div class=”product-brand”>Brand</div>
<div class=”product-price”>$Price</div>
<div class=”product-rating”>4.5 stars (10 Reviews)</div>
</div>
</li>
</div>

Now that the structure is ready, the next step is style it. The styles.css needs to be like this to match the previous styles we’ve added:

.products {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.product {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.products li {
list-style: none;
padding: 0;
flex: 0 1 34rem;
margin: 1rem;
height: 35rem;
border-bottom: .1rem solid Insert Your Color;
}
.product-image {
max-width: 34rem;
max-height: 34rem;
}
.product-name {
font-size: 2rem;
font-weight: bold;
}
.product-name a {
text-decoration: none;
color: Insert Your Color;
}
.product-name a:hover {
color: Insert Your Color;
transition: all 0.5s ease;
}
.product-brand {
font-size: 1.2rem;
color: Insert Your Color;
}
.product-price {
font-size: 2rem;
font-weight: bold;
}
.product-rating {
margin-bottom: 1rem;
}

That’s it! Now all is styled and populated, just repeat the <li> as much as needed to include several products. Next step is to insert this on the App.js and make it populate automatically.