【AWS】React × MUI ver 5.2.2で遊んでみた【React】
この記事は
Calendar for React | Advent Calendar 2021 - Qiita
の7日目です。
6日目は@shimi7oさんのこちらの記事でした。
qiita.com
React Hook Formを使ったバリデートは私よくわかっていないので、
勉強させていただきます!
改めましてこんにちは!nomurabbitです。
この記事ではReactのMUIで
遊んでみたいと思います。
デザインライブラリを試すのは
ワクワクしますね!
Reactのテンプレート準備
まずはReactのテンプレートを準備します。
今回はcreate react-appで作成します。
yarn create react-app 20211117_my_react_app_mui5 --template typescript
しばらく待ってテンプレートが作成されたら
今回のメインテーマであるMUIを追加しましょう。
yarn add @mui/material @emotion/react @emotion/styled yarn add @mui/icons-material
ルーティングにreact-router-domを使うので
こちらも追加しておきます。
yarn add react-router-dom
以上でテンプレートの準備は完成です。
ページの準備
次にページを作ります。
今回はHomeとPortraitの2ページ構成です。
それぞれ、MUIのResponsive drawerを使って
作ってみました。
まずHomeですが、
こちらは文字列を返すだけのシンプルなページです。
import * as React from 'react'; import ResponsiveDrawer from '../components/layout/ResponsiveDrawer'; const Home = () => { return ( <ResponsiveDrawer> <div> <p>It's home page.</p> </div> </ResponsiveDrawer> ); } export default Home;
次にPortraitです。
こちらはCardを使って画像を表示させています。
import * as React from 'react'; import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; import CardMedia from '@mui/material/CardMedia'; import Typography from '@mui/material/Typography'; import { CardActionArea } from '@mui/material'; import ResponsiveDrawer from '../components/layout/ResponsiveDrawer'; import noa_xmas_icon from '../noa_xmas_icon.png'; const Portrait = () => { return ( <ResponsiveDrawer> <div> <Card sx={{ maxWidth: 256 }}> <CardActionArea> <CardMedia component="img" height="256" image={noa_xmas_icon} alt="noa_xmas_icon" /> <CardContent> <Typography gutterBottom variant="h5" component="div"> noa </Typography> <Typography variant="body2" color="text.secondary"> </Typography> </CardContent> </CardActionArea> </Card> </div> </ResponsiveDrawer> ); } export default Portrait;
以上でページの準備は完成です。
ルーティング
最後にルーティングですが、
今回はreact-router-domの6.0.2を使っているので、
Switchではなく、Routesを使って記述します。
import React from 'react'; import Home from './pages/Home'; import Portrait from './pages/Portrait'; import {BrowserRouter, Routes, Route} from "react-router-dom"; function App () { return ( <BrowserRouter> <Routes> <Route path="/web/portrait" element={<Portrait/>} /> <Route path="/web/home" element={<Home/>} /> <Route path="/web/" element={<Home/>} /> <Route path="*" element={<Home/>} /> </Routes> </BrowserRouter> ); } export default App;
注意するポイント
S3やAPI Gatewayを使って公開するときは
package.jsonに1行追加してみてください。
その他の注意ポイントは
過去の記事でも触れていますので、
よろしければ参考にしてみてください。
サーバーレスで公開するときの
注意全般はこちら
nomurabbit.hatenablog.jp
画像を公開するときの
注意はこちら
nomurabbit.hatenablog.jp
完成
完成したサイトがこちらです。
まずはHomeから!
じゃーん!
つぎはPortrait!
じゃじゃーん!
GitHubにソースコードを載せていますので、
よろしければ参考にしてください。
今回はMUI ver 5.2.2でサイトを作って遊んでみました。
よかったら試してみてください。
8日目は@kinpira-flavorさんの記事です。
よろしくお願いします!