Building your e-commerce cards

As you know, whenever you buy something online, there's always a basket full of the products you've chosen. Each item in that basket is usually a card with information about the price, the item's name, a picture, and the possibility to increase or decrease the number of items of the same type.

So, this is what we're going to create as well. Let's take a look at it here, as we've already become so advanced that we should now be able to think of ways of creating the functionality with only those things that we've learned up to now:

Figure 8.17 – Final rendered version of our e-commerce card

Looks pretty good, right? Honestly, it isn't even that hard to build, so we'll be moving quickly through the layout. Let's create a new file called CommerceCard.js inside the components folder.

Now, let's think about which types of imports we'd need for this one—...