Reactでのレスポンシブ対応

2019-06-15

React

Page content

Reactでメディアクエリを設定しレスポンシブ対応。

JS+Node.jsによるWebクローラー/ネットエージェント開発テクニック

Amazonで調べる

楽天市場で調べる

Yahooショッピングで調べる

7netで調べる

cssで通常のmedia query

通常レスポンシブ対応は、cssでmediaクエリを設定し、ページ幅に応じて表示するコンテンツを変えることで対応する。

以下の例だと、普段はsmartphone_areaのクラスを持つコンテンツを表示し、pc__areaのクラスを持つコンテンツを非表示とする。

横幅が767px以上になったら、smartphone_areaのクラスを持つコンテンツを非表示とし、pc__areaのクラスを持つコンテンツを表示する。

.smartphone__area {
	display: block;
}

.pc__area {
	display: none;
}

@media screen and (min-width: 767px) {
	.smartphone_area {
		display: none;
	}

	.pc__area {
		display: block;
	}
}

これを使って、以下のように書くと、横幅によって一方のdivコンテンツだけが表示されるため、幅にあった表示のコンテンツを提供できる。

<div class="smartphone__area">
    <SmartPhoneContents />
</div>
<div class="pc__area">
    <PCContents />
</div>

Reactでのmedia query

Reactでは、npmのreact-responsiveパッケージを使うことで簡単にレスポンシブの動作を実現できる。

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

$ npm install react-responsive --save

これでpackage-jsonに追加されます。

あとはファイルにimportして、以下のように使うだけ。

import MediaQuery from "react-responsive";

<MediaQuery query="(max-width: 767px)">
    <SmartPhoneContents />
</MediaQuery>
<MediaQuery query="(min-width: 767px)">
    <PCContents />
</MediaQuery>