【React,@media,メディアクエリ】Reactでレスポンシブデザインにする時、「react-responsive」パッケージが便利

react-responsiveとは

Reactをレスポンシブ対応させる時、メディアクエリ（@media）をcssにセットして
要素ごとに表示を切り分けると、ソースが煩雑になります。

npmの「react-responsive」パッケージを使うと、下記のように
とてもわかりやすくメディアクエリをReactに導入することができます。

reactive.js

  import MediaQuery from "react-responsive";

  <MediaQuery query="(max-width: 767px)">　// iPadの横幅を分岐点にしている
    <div>ここにスマートフォン向けの要素を書く</div>
  </MediaQuery>
  <MediaQuery query="(min-width: 768px)">　// iPadの横幅を分岐点にしている
    <div>ここにPC向けの要素を書く</div>
  </MediaQuery>

パッケージのインストール方法

package-jsonのあるディレクトリでreact-responsiveをインストールします。

$ npm install react-responsive --save

詳細について

下記「参照URL」に詳しい使用方法の記載がありますので、そちらをご覧ください。

参照URL

• 公式 npm:react-reactive(英語のサイトです)