CodeParkStart from the mock. Draw a box around each piece that has a single job, then name it.
For a product page, ProductPage sits at the top. It contains:
BreadcrumbsImageGalleryProductInfo, with the title, price and ratingVariantPickerAddToCartButtonReviewsRecommendedProducts
Then I separate components that own data from presentational ones. Presentational components only display the props they receive. The page, or a few section containers, fetch the data. Leaves like Price or Rating just render props.
Next I find the minimal state and where it lives. For example, the selected variant (like a size or colour) is shared by the gallery, the price and the add-to-cart button. So it lives in their common parent. It can also live in the URL, so a user can share a link to that variant.
Finally I look at loading boundaries. Reviews and recommendations are below the fold, which means the user must scroll to see them. They can stream in or lazy load, with their own skeletons (grey placeholder shapes). So they should be separate components with their own data dependencies.
- Each component has a single responsibility and is named from the mock.
- Container components own the data. Leaf components are presentational and only render props.
- Find the minimal shared state and its owner, which can be the URL.
- Draw loading and code-splitting boundaries, for example around below-the-fold sections.