From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Product card component

Product card component

From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Start my 1-month free trial Buy for my team

Product card component

“

Welcome back. Now let's continue developing this product card, which is going to define how the product is going to look like on the screen. I'm going to add another component, productCard.tsx, I'll do rafce and we have our initial product card component. Now let's continue implementing this. We should first have our prop types for product card props and it can have a product which will be of type product interface. After that, inside it, we can have the dispatch variable using useDispatch function from react-redux and it can be of type AppDispatch. Since this is a type, so we have to write the type keyword along with this to satisfy type script. Now we are going to have an JSX implementation for this. So inside this div, we are going to give it a class name of flex, flex call, item center, padding of 4, border, a border gray of about 200, it will be rounded lg, there will be be a shadow of medium and on hover, we can have a shadow excel. Let's give it a transition effect with shadow,…

Contents