Best practise: react components on mobile version of site

Question

I'm wanting some advice/opinions about react component usage.

When faced with two different designs for the desktop and mobile version (NOT an app) of a site, do you use the same components and modify various parts using media queries or JavaScript window size etc OR do you create different components where required and render differently if it's the mobile site?

Any strategies you have used with your experience/opinions on would be of great help. Many different ones will be appreciated!

Thanks!

Answer 1

I would use the webs standard of responsive design and libraries like bootstrap or foundation. There is no need to write different views unless you are targeting different platforms (native vs web for example). This will save you time and effort as the gains you get from writing different components are not substantial.

That said if there are particular pages that would be better served with completely different UI you can do a mix of both. There is no advantage in simply creating two home pages that have a bunch of text, this issue has been solved by responsive design practices and not taking advantage of them is a step backwards.

Also take advantage of component re use as much as you can. If desktop shares 5/6 features write the 5 in a way they can scale differently to be shred and write two versions of the 6th.

I wouldn't say that the two options are mutually exclusive. Take advantage of responsive design practices when you can and take advantage of the componentization of react when you can. If you ever find yourself not sure which way to go it likely means use responsive design (IMHO).

I have designed apps where the target was truly different platforms. We wanted to have native and web side by side. What you are looking for is a middle ground as many components will likely be shared but a handful may require different functionality and thus components. I have seen two app structures, one that organizes your app by type (components vs containers for example) and another that organized code based on page structure (index, account, login, shared). I have found that when needing to mix components that accomplish the same function but target different platforms its best to separate by page structure as in the index page I can simply have a iOS index and a web index side by side when needed. This allows me to have two stateless components and one stageful container to power them. This also makes more sense mentally for larger apps and allows you to do more of what you are looking to do.

Overall, if you are needing to use if statements to hide and show functionality consider breaking things down into reusable components and create a mobile and desktop presentational component being powered by a single state full component.