Challenge: Product Listing Page
Explore how to build a product listing page by creating reusable React components such as Header, ProductItem, Tag, and Button. Learn to drive dynamic behavior with props, handle user events, and apply basic styling to design a clean, interactive UI. This lesson teaches you component composition, event handling, and prop-driven design within React's stateless architecture.
Problem statement
You are tasked with creating a product listing page as part of a larger online store application. This page should include a header, display a list of products, indicate if a product is on sale, and feature a “Buy now” button that responds to user clicks. All components should be stateless, and all dynamic behavior or content should be driven by props. ...