How to Architect React Code for Gallery-Like Website

(Jon) #1

I am trying to implement a gallery-like website with React and am unsure how to toggle between the two views across multiple breakpoints (Desktop, Tablet, Mobile). Each of these have two views (Carousel and Gallery) have a combination of four major components (Carousel, Masonry Gallery, About, Footer) and are shown/hidden based off their breakpoints.

For example, the Desktop Carousel view will only have a Carousel component, where-as the Tablet Carousel view will have a Carousel component and About component.

I am wondering how will it be best for me to control which view sees what. My initial idea would be to use CSS to show/hide based off the breakpoints, but I feel like that can get messy. Should I be taking advantage of React States or even React Routes?