nomurabbitのブログ

nomurabbitのブログはITを中心にした技術ブログです。

nomurabbitのブログ

【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行追加してみてください。

f:id:nomurabbit:20211204065525p:plain

その他の注意ポイントは
過去の記事でも触れていますので、
よろしければ参考にしてみてください。

サーバーレスで公開するときの
注意全般はこちら
nomurabbit.hatenablog.jp

画像を公開するときの
注意はこちら
nomurabbit.hatenablog.jp

完成

完成したサイトがこちらです。

まずはHomeから!
じゃーん!

f:id:nomurabbit:20211204070311p:plain

つぎはPortrait!
じゃじゃーん!

f:id:nomurabbit:20211204070336p:plain

GitHubソースコードを載せていますので、
よろしければ参考にしてください。

github.com

今回はMUI ver 5.2.2でサイトを作って遊んでみました。

よかったら試してみてください。

8日目は@kinpira-flavorさんの記事です。
よろしくお願いします!