【React.js】Material-UIで遊んでみることにする

はじめに

こんにちは、がんがんです。

先日よりReact.jsを触っており、その過程でMaterial-UIについて触りました。Material-UIは比較的使用頻度の高いものをコンポーネントとして提供してくれているので非常に使いやすいライブラリです。
今回はそんなMaterial-UIに慣れていくために簡単に遊んでみようと思います。

目的

Materil-UIで遊んでみる
React.jsの使い方に慣れていく

今回の完成品

今回は公式が提供しているDashboardに似たものを作っていきます。
理想形にはほど遠いですがパッと作ってみたので許してください。

f:id:gangannikki:20200319011431j:plain — 今回作ってみたもの

公式のテンプレートはこちらです。
material-ui.com

環境設定(on Docker)についてはこちらを

【React.js】Docker ComposeでReact.jsの環境を構築する - ganganの技術備忘録
 【React.js】DockerでMateril-UI環境を作って試してみた - ganganの技術備忘録

各部分の詳細

create-react-appからの追加部分を主に書いておきます。

Header部分には上部に配置するAppBarを持ってきています。

ドキュメント：AppBar

App Bar React component - Material-UI

コード

function Header() {
  return (
    <AppBar position="static">
      <Toolbar variant="dense">
        <Typography variant="h6" color="inherit">
          React Test Page
        </Typography>
      </Toolbar>
    </AppBar>
  );
}

Footer部分にはCRAで用意されているCopyrightについて記載しています。

コード

function Footer() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {'Copyright © '}
      <Link color="inherit" href="https://material-ui.com/">
        Your Website
      </Link>
      {' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
}

List

ドキュメント：List

List React component - Material-UI

ドキュメント：Divider

Divider React component - Material-UI

コード

function ListDividers() {
  return (
    <div>
    <List component="nav" className="list-test" aria-label="mailbox folders">
      <ListItem button>
        <ListItemText primary="Inbox" />
      </ListItem>
      <Divider />
      <ListItem button divider>
        <ListItemText primary="Drafts" />
      </ListItem>
      <ListItem button>
        <ListItemText primary="Trash" />
      </ListItem>
      <Divider light />
      <ListItem button>
        <ListItemText primary="Spam" />
      </ListItem>
    </List>
    </div>
  );
}

Main-area (Grid × 3)

Gridを使って複数のBoxを表示させています。サイズに合わせたpropを渡してやると綺麗になりそうですが、とりあえず今回は放置しました。

ドキュメント：Grid

Grid React component - Material-UI

コード

function BoxTop() {
  return (
    <Grid container spacing={4}>
      <Grid item xs={12}>
        <Paper>
          <Box my={4}>
            <Typography variant="h4" component="h1" gutterBottom>
              Create React App v4-beta example
            </Typography>
            <ProTip />
          </Box>
        </Paper>
      </Grid>
      <Grid item xs={12} md={6} lg={6}>
        <Paper>
          <Box my={4}>
            <Typography variant="h4" component="h1" gutterBottom>
              Create React App v4-beta example
            </Typography>
            <ProTip />
          </Box>
        </Paper>
      </Grid>
      <Grid item xs={12} md={6} lg={6}>
        <Paper>
          <Box my={4}>
            <Typography variant="h4" component="h1" gutterBottom>
              Create React App v4-beta example
            </Typography>
            <ProTip />
          </Box>
        </Paper>
      </Grid>
    </Grid>
  );
}

おわりに

今回はMaterial-UIを使って簡単なダッシュボードもどきを作っていきました。
React.jsにおけるMateril-UIのコンポーネントの使い方はなんとなく把握できました。次はstyled-componetでCSSを整えていきたいと思います。