Smart Responsive Design with React.js

One of the main topic on the web is the development of interfaces that are usable on both desktop and mobile devices.
There are many use cases to be covered and they do not allow you to have the best layout for each case, but often we have to solve layout problems for too large or small resolutions.
Some frameworks - like bootstrap - give us the possibility to hide or show content in page. However, this approach will increase the size of our html.

How can we solve the problem?

React.js comes to help us with the library react-responsive.
Here a simple example:

render() {  
    return (
        <MediaQuery minDeviceWidth={601} values={{deviceWidth: 1280}}>
            <div>You are a Desktop</div>
            <LayoutDesktop />
        </MediaQuery>
        <MediaQuery maxDeviceWidth={600}>
            <div>You are a Mobile</div>
            <LayoutMobile />
        </MediaQuery>
    );
}

So, when the state of your component changes, it will be updated by re-invoking render method. This behavior allows to easily switch from the desktop layout to the mobile one.

Passing static values through values property, server side rendering can be performed too. This library also allows you to manage the orientation (landscape or portrait) and resolution (eg: 2dppx) of the device.

Just do it.
Enjoy.