React MUI(Material-UI)サンプル集

MUI を利用する各種サンプルを紹介しています。サンプルをダウンロードしていただき、手元で動作を確認していただけます。まずはサンプルの動作を確認し、好みの動作になるように変更を加えていただけるようになっています。これから MUI を使ってアプリケーション開発を行う方におすすめのページです。

↓ MUI をインストールし、実行するまでの一連の流れを説明しています。

↓MUI Material Icons のインストールと利用方法を紹介しています。

↓ AppBar と Drawer を組み合わせ、アプリケーションのレイアウトを構築する例です。

↓AppBar クリックによる Drawer の開閉ステートを、React コンテキストを利用して管理する例です。複数コンポーネント間でステート管理する例となります。

↓ アプリケーションには欠かせない、入力検証の方法を紹介しています。react-form-hook を利用しています。

↓ MUI の CSS ユーティリティを利用した、レスポンシブレイアウトの方法を紹介しています。

↓ Grid コンポーネントによるレスポンシブレイアウトの方法を紹介しています。

↓ Drawer のメニューをクリックした際に、対応する画面に遷移する例です。

↓ MUI のコンポーネントを組み合わせてダッシュボードを作る例です。ダッシュボード作成の取っ掛かりとして参照していただければと思います。

外部リンク

https://mui.com/material-ui/getting-started/installation/

2022年5月3日