Functional Components & Props

A. A Functional Component is a JavaScript function that returns JSX, and it's the standard way components are built in modern React. In this project, every single piece — Navbar, ProductCard, ReviewModal, StarRating, StarInput, CustomerPage, AdminPage — is written as its own functional component.

Smaller components like StarRating and StarInput are built once and then reused inside bigger ones like ProductCard and ReviewModal, which is called component composition—building complex UI by combining simple, focused pieces rather than writing one giant block of code.

B. Props are how data is passed from a parent component down to a child component. Here, ProductCard receives the product object and an onSelect function as props from its parent, ReviewModal receives product and onClose, and Navbar receives userName—this parent-child data flow keeps components reusable instead of hardcoded.

This connects directly to how the project is organised: components live in a separate components folder while full screens live in a pages folder, and each file uses import/export to share itself with others — so a page like CustomerPage simply imports the components it needs, keeping the codebase clean and easy to navigate.