Basically, all you have to do in order to detect any size changes is to produce one or more <MediaQuery> components when rendering, and those whose requirements are met will actually be rendered, and the rest won't appear on the page.

Let's write a very basic example with plenty of media queries, to see the coding style you'll be using. The following is an example given in the react-responsive GitHub page; we'll just try to detect some aspects of the current device and window:

// Source file: /src/App.4.js

/* @flow */

import React, { Component } from "react";
import MediaQuery from "react-responsive";

const XS = 576; // phone
const SM = 768; // tablet
const MD = 992; // desktop
const LG = 1200; // large desktop

class App extends Component<{}> {
    render() {
        return (
            <div>
                <MediaQuery minDeviceWidth={MD + 1}>
                    <div>Device: desktop or laptop</div>

                    <MediaQuery maxWidth={XS}>
                        <div>Current Size: small phone </div>
                    </MediaQuery>

                    <MediaQuery minWidth={XS + 1} maxWidth={SM}>
                        <div>Current Size: normal phone</div>
                    </MediaQuery>

                    <MediaQuery minWidth={SM + 1} maxWidth={MD}>
                        <div>Current Size: tablet</div>
                    </MediaQuery>

                    <MediaQuery minWidth={MD + 1} maxWidth={LG}>
                        <div>Current Size: normal desktop</div>
                    </MediaQuery>

                    <MediaQuery minWidth={LG + 1}>
                        <div>Current Size: large desktop</div>
                    </MediaQuery>
                </MediaQuery>

                <MediaQuery maxDeviceWidth={MD}>
                    <div>Device: tablet or phone</div>
                    <MediaQuery orientation="portrait">
                        <div>Orientation: portrait</div>
                    </MediaQuery>
                    <MediaQuery orientation="landscape">
                        <div>Orientation: landscape</div>
                    </MediaQuery>
                </MediaQuery>
            </div>
        );
    }
}

export default App;

I defined the four size constants (XS, SM, MD, and LG) to match the values used by Bootstrap, but you could certainly work with other sizes.

Whenever our App component is rendered, the media queries are executed, and depending on their result, components will or won't be rendered. In our case, we are just producing some <div> instances with text, but it should be obvious that you could actually produce any other kind of components. 

We can run this application in Chrome, and see how it produces different contents as we resize the window: see the following image :

Alternatively, you could use the device toggle in the toolbar, and then you'd be also able to see your application as it would look in a phone or tablet; take a look at the following screenshot for a sample of this:

Working with Bootstrap for simple adjustments, and react-responsive for more complex work, you can ensure your application will fit whatever device it's run on. Let's now move on to a different kind of situation: running in different countries or regions!