This guide covers all React components in the project, their usage, props, and implementation examples.
- Core Components
- Page Components
- Form Components
- Utility Components
- Best Practices
- Layout
- Product
- Cart & Wishlist
Layout Components
Header (`components/Header.jsx`)
The main site header with navigation, search, cart, and user menu:
- Navigation Menu: Main site navigation links
- Search Functionality: Product search input
- Cart Icon: Shows cart item count, opens side cart
- Wishlist Icon: Shows wishlist item count
- User Account Menu: Login/logout, account links
- Mobile Menu: Responsive hamburger menu
import Header from "@/components/Header"; // Import Header component
export default function Layout({ children }) { // Layout to wrap pages and persist across navigation
return (
<>
// Display header {children} // Display children pages ); // Return wrapped pages }Footer (`components/Footer.jsx`)
Site footer with links, social media, and newsletter:
- Footer navigation links
- Social media icons
- Newsletter signup form
- Copyright information
Product Components
ProductCard (`components/ProductCard.jsx`)
import ProductCard from "@/components/ProductCard"; // Import ProductCard component
{products.map(product => ( // Display products with the given product id
// Display product card with the given product id and product
))}Props:
product– Product object from WooCommerce
ProductDetails (`components/ProductDetails.jsx`)
import ProductDetails from "@/components/ProductDetails"; // Import ProductDetails component
// Display product details with the given productCart & Wishlist Components
SideCart (`components/SideCart.jsx`)
import SideCart from "@/components/SideCart"; // Import SideCart component
// Display side cartAddToCartButton (`components/AddToCartButton.jsx`)
Reusable add to cart button component:
"use client";
import { useCart } from "@/contexts/CartContext"; // Import Cart context
export default function AddToCartButton({ productId, quantity = 1, variation = null }) { // Add to cart button component with the given product id, quantity and variation
const { addToCart, isUpdating, updatingProductId } = useCart();
const handleClick = async () => {
await addToCart(productId, quantity, variation); // Add to cart with the given product id, quantity and variation
};
return (
Add to Cart // Display add to cart button
);
}WishlistButton (`components/WishlistButton.jsx`)
Wishlist toggle button component:
"use client";
import { useWishlist } from "@/contexts/WishlistContext"; // Import Wishlist context
import { Heart } from "lucide-react";
export default function WishlistButton({ productId }) { // Wishlist button component with the given product id
const { toggle, isInWishlist } = useWishlist(); // Get toggle and isInWishlist functions from Wishlist context
const inWishlist = isInWishlist(productId); // Check if product is in wishlist with the given product id
return (
toggle(productId)} // Toggle wishlist with the given product id
className={inWishlist ? "text-red-500" : "text-gray-400"} // Set class name with the given inWishlist
>
// Display heart with the given inWishlist
// Display button with the given product id and inWishlist
);
}- Hero & Category
- Shop Components
Hero & Category Components
Hero (`components/Hero.jsx`)
Homepage hero section with call-to-action:
- Large banner image or video
- Headline and subheadline
- Call-to-action buttons
- Responsive design
Category (`components/Category.jsx`)
Featured categories grid display:
- Category cards with images
- Category names and descriptions
- Links to category pages
Featureproduct (`components/Featureproduct.jsx`)
Featured products carousel:
- Swiper carousel implementation
- Featured products display
- Navigation arrows and pagination
Shop Components
ShopFilters (`components/ShopFilters.jsx`)
Shop page filters and search:
- Price range filter
- Category filter dropdown
- Search input
- Sort options
"use client";
import { useState } from "react";
import ShopFilters from "@/components/ShopFilters";
export default function ShopPage() {
const [filters, setFilters] = useState({
category: "",
minPrice: "",
maxPrice: "",
search: ""
});
return (
{/* Products list */}
);
}ShopPagination (`components/ShopPagination.jsx`)
import ShopPagination from "@/components/ShopPagination"; // Import ShopPagination component
// Display shop pagination with the given current page, total pages and on page change functionForm Components
VariableProductForm (`components/VariableProductForm.jsx`)
import VariableProductForm from "@/components/VariableProductForm";
// Display variable product form with the given product and on variation change functionGroupedProductForm (`components/GroupedProductForm.jsx`)
import GroupedProductForm from "@/components/GroupedProductForm"; // Import GroupedProductForm component
// Display grouped product form with the given productUtility Components
Loading & Error Components
// Loading
Loading... // Display loading
// Error
{message} // Display message
{onRetry && Try Again} // Display button with the given on retry functionComponent Best Practices
- Keep Components Small: Each component should have a single responsibility
- Use TypeScript: Add type definitions for better development experience
- Extract Logic: Move business logic to custom hooks
- Reusable Props: Design components to be reusable
- Accessibility: Ensure components are accessible (ARIA labels, keyboard navigation)
- Performance: Use React.memo for expensive components
Creating Custom Components
When creating new components, follow these patterns:
"use client"; // Only if needed
import { useState, useEffect } from "react";
export default function MyComponent({ prop1, prop2 }) { // My component with the given prop1 and prop2
const [state, setState] = useState(null); // Set state with the given state
useEffect(() => {
// Side effects // Side effects with the given side effects
}, []);
return (
{/* Component JSX */}
);
}Next Steps: Learn about Best Practices for component development and optimization.