概要
以前、React を利用した UI 作成において、OSS である「MUI」を紹介しました。
今回はその MUI を利用した際の Web ページのテンプレートである「React Templates」を紹介します。
利用手順
以前紹介した MUI の公式サイトの「Templates」からページへ遷移します。
そこから、真似してみたいページの項目をクリックします。ここでは、ダッシュボードデモページを見てみます。
上記のようなダッシュボードデモページを作ってみたいと思った際は、選択したページのソースコードを選択して、GitHub ページから参照することができます。
使用感
私自身も、React を利用したページを作成したい際にはこちらのページを参考にさせていただきました。
さらに、ダッシュボードだけでなく、ブログ風のページやアルバム風のページ、さらにサインインページなども参照することができるので、非常に勉強になります。
ブログ風ページ
- デモページ：https://mui.com/getting-started/templates/blog/
- ソースコード：https://github.com/mui/material-ui/tree/v5.5.2/docs/data/material/getting-started/templates/blog
アルバム風ページ
- デモページ：https://mui.com/getting-started/templates/album/
- ソースコード：https://github.com/mui/material-ui/tree/v5.5.2/docs/data/material/getting-started/templates/album
サインインページ
- デモページ：https://mui.com/getting-started/templates/sign-in/
- ソースコード：https://github.com/mui/material-ui/tree/v5.5.2/docs/data/material/getting-started/templates/sign-in
まとめ
今回は MUI を利用した際の Web ページのテンプレートである「React Templates」を紹介しました。
こちらのテンプレートを利用することで、MUI を利用したきれいな Web アプリ・ページを簡単に無料で作成することができます。
また、有料となりますが、さらに機能が追加された「Premium Templates」も React Templates に用意されていました。
もし差をつけてよりきれいで洗練された Web アプリ・ページを作成したいと思った際には、こちらを参考にしてみるのもよいでしょう。
どちらにしても、React で Web アプリ・ページを作成してみたい方・MUI を利用したページ作成について勉強したい際には、一度こちらの OSS を参考にしてみるのはいかがでしょうか。
ライセンス
リンク
