Functional Components, Props and Component Reusability

A. Functional components are just JavaScript functions that return JSX, which is how React describes what should appear on the screen. They replaced the older class-based components since they are shorter to write and work naturally with React hooks. In FalCon Store, every single piece of the UI, from the navbar to a single product card, is written as a functional component.

B. Props are how data gets passed from a parent component down to a child component, without the child needing to fetch or know where that data came from. In our project, the ProductCard component receives a product object as a prop from pages like HomePage and ProductsPage, and uses it to display the image, name, price, and rating without holding any of that data itself.

C. Component reusability means building a component once and using it in multiple places instead of repeating the same code. ProductCard, StarRating, and Toasts are good examples in FalCon Store, since ProductCard shows up on the home page, products page, and even inside the related products section, but its code exists in only one file.