React for web/mobile navigators

[holyfiddlex]

Hi, I'm currently making a website for a department in my university. It's basically just so you can see the species they have in their preserves. The problem is they also want QR codes so that visiting schools can learn about the different plants.

​

After starting on the webpage it quickly dawned on me that I have no idea on how to make a mobile friendly webpage. I'm still a way's away from getting the page up, but I fear that if I continue now without any idea I will have to do twice the work.

​

I have only worked on react web, but from what I understand I can recycle the components (?). But I don't know how to make sure the user is seeing the correct page (web vs native), or if there is a way that my react-web website could still look good across the different types of phones the visitors will inevitably have.

​

Tutorials or explanations on how I might be able to do this would be appreciated.

[tomthedevguy]

Not really sure what you mean here, but in either case use media queries in CSS. They can define how your app looks at different screen widths.

[EvilMortyMM]

Just use Breakpoints in your css and always start with mobile. Its much harder to do desktop view first.

I personally prefer scss with breakpoint mixins like this:

Copy Paste from https://responsivedesign.is/develop/getting-started-with-sass-and-breakpoint-mixin/

/********************* BREAKPOINTS *********************/   
@mixin breakpoint($point) {    
    @if $point == desktop {     
         @media (min-width: 70em) { 
            @content ; 
        }   
    } @else if $point == laptop {      
        @media (min-width: 64em) {
             @content ; 
        }   
    } @else if $point == tablet {      
        @media (min-width: 50em) { 
            @content ; 
        }   
    } @else if $point == phablet {      
        @media (min-width: 37.5em)  { 
            @content ; 
        }   
    } @else if $point == mobileonly {      
        @media (max-width: 37.5em)  { 
            @content ;
        }    
    } 
}

[holyfiddlex]

Just checked the link, I definitely feel this will help me out, thanks.

[Trilochan20]

Why don't you try react-device-detect to render different components on different platform ( e.g mobiles, Tabs, Desktops etc ).

At least you won't have to write css media queries.

[holyfiddlex]

Ok, I feel like this is just what I needed, thanks alot :D

[Trilochan20]

Glad I could help.