yucatio@システムエンジニア

趣味で作ったものいろいろ

STEP 4での成果物(STEP 4 : Material-UIの導入 - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

STEP 4ではMaterial-UIを導入し、アプリの見た目を整えます。

material-ui.com

Material-UIとは

Material-UIとは、Googleが提唱するマテリアルデザインを実装しているReactコンポーネント群です。ボタンやフォームの見た目を整えたり、ナビゲーションやメニューの表示など便利な機能を提供しています。

material.io

Material-UIの導入

STEP 4での完成イメージです。

f:id:yucatio:20181128093444p:plain

f:id:yucatio:20181128093456p:plain

使用しているMaterial-UIの部品一覧です。

f:id:yucatio:20181128093642p:plain

f:id:yucatio:20181128093653p:plain

ロゴは LOGASTER | ロゴメーカー | オンラインロゴ作成 で作成しました。

ブログ主はデザインやUI/UXの知識はほぼないので、STEP 4での説明においてはMaterial-UIのコンポーネントの使用方法のみ記載し、デザイン面については語らないようにします。

それでは、STEP 4を始めましょう。

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com