Tricks to keep your React site Mobile Friendly.

React provides to your Frontend a Simple, Stateless & Declarative Component architecture that keeps your app easy to understand and extend as it grows from 20 to 20,000+ lines of code. Like with any other new web technology, a couple basics you have picked along the way (Media Queries, Z-indexes, etc) will need to be revisited to adapt to the components mindset.

Cooking your Meat

One of the most important basics most websites will require is to make all components Responsive, that is: elements that responds to the needs of the users and the devices they are using.

Screen Size is not a constant

Yes, your device’s screen size, does change. http://ux.stackexchange.com/q/24255

Responsive Web allows us to adjust a website content into the best layout for the device displaying it.

A Responsive component is a component that can respond to screen size changes, adjusting its contents into the optimal layout for the given parameters.

Take a look at the component above, notice how it responds to width changes by turning the days rows into columns once the screen size has increased beyond a certain threshold. This is a responsive component.

The First Principles behind Responsive components

Media Queries is a CSS3 module that “defines expressions allowing to tailor presentations to a specific range of output devices without changing the content itself.”

What this means is that using the special media directives on our HTML & CSS, we can load the styles that fit the content best for a given device.

In this example below we load the example.css when the max width exceeds 800px. And we hide the facet_sidebar class when the max width exceeds 600px.

<!-- CSS media query on a link element -->

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />



<!-- CSS media query within a stylesheet -->

<style>

@media (max-width: 600px) {

.facet_sidebar {

display: none;

}

}

</style> https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

We’re in React now

Now, in the React World, we don’t have pure css, we have CSS-in-JS. What this means is that either you adopt a hybrid approach using a global css specific to your project (which will stop you from reusing your components in other projects) or you start adding styles to each one of your Components in their JSX templates. The article below goes over the tradeoffs each approach has.