React+MaterialUIでWebデザインを初めからStep1

今回の目標

MaterialUIを適用してマテリアルデザインのヘッダーを作成します。
前回作成した開発環境で作成します。

Node.js+Express+React+MaterialUIの開発環境構築

2018.04.08

今後はApp.js,App.css,HelloWorld.jsなどは使用しません。
しかしHelloWorld.jsを読み込んだ時同様に似たような形でMaterialUIのコンポーネントを読み込んでいきます。

最終的なフォルダ構成

ヘッダーの変更

まずは以下の公式URLを参考にヘッダーをバーにしてみます。
https://material-ui-next.com/demos/app-bar/

変更ファイル

ファイル 変更点
components/header.js 新規作成
index.js 新規作成したHeaderにidを指定します。
public/index.html ヘッダーを表示させるdiv(id)に変更。
index.css リセットCSSを適用します。

今後jsファイルが増えていくことが考えられるのでcomponentsディレクトリをsrc配下に作成します。

components/header.js

公式サイトを参考にしていますが、一部パスが変更になっているようなので、その部分は修正しています。
ex)「material-ui/icons/Menu」 > 「material-ui-icons/Menu」

index.js

こちらも公式のソースコードまんまです。
id部分をheader、ファイル名に合わせてパスを変更しています。
https://material-ui-next.com/demos/app-bar/

public/index.html

  • マテリアルデザインのフォントとアイコンのstylesheetをヘッダーに追加
  • デフォルトではlang=enなのでjaに変更
  • divのidをheaderに変更

index.css

ブラウザによる表示差異をなくすためにリセットCSSを適用しています。
https://code.google.com/archive/p/html5resetcss/downloads

変更後のスクリーンショット

無事に画面が表示されました。

さいごに

Reactの仕組みを理解できれば、簡単なデザインはすぐに実装できそうです。
次は複数のコンポーネントを組み合わせたパターンをやります。
具体的には今回作成したヘッダーに左上のボタンをクリックするとメニューが表示できるようにします。

React+MaterialUIでWebデザインを初めからStep2

2018.04.09

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です