React.jsとMaterial-UIでヘッダーを表示してみよう!Classで使う方法も紹介!

ReactとMaterialUIでヘッダー表示
  • URLをコピーしました!

今回は、React.jsにMaterial-UIでヘッダーを表示してみようと思います!
デザインに自信がない方でも簡単に表示できるので、ぜひ参考にしてみてください!

学習に使った本はこちら!

¥3,432 (2022/12/03 14:42時点 | Amazon調べ)
¥5,601 (2022/12/03 14:42時点 | Amazon調べ)
クマじい

Amazon Kindle Unlimited でもReactの本はいっぱいあるぞ!

  • 技術書をたくさん読みたい!
  • 色々な技術を学びたい!
初回30日間無料体験があるので、どのような参考書があるか確認してみよう!

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ!
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります!

¥15,980 (2022/12/09 11:28時点 | Amazon調べ)

前回のReact.jsにMaterial-UIを導入してみよう!の続きになっております。

まだ、Reactアプリの雛形を作れていないよという方は、こちらを参考にして環境を構築してみてください!

まだ、Material-UIを導入していないという方は、こちらを参考にして導入してみてください。

ヘッダーがあるだけで、かっこよく見えますし、Material-UIには他にも様々なサンプルがあるので応用して試すこともできると思います!

こんな方に見てもらいたい内容です!
  • Reactアプリをカッコよくしたい!
  • ヘッダーを作りたい!
  • Material-UIをClassで使う方法を知りたい!
目次

前回のおさらい!

前回は、Material-UIをReact.jsに導入して、Material-UIのサンプルのボタンを表示させましたね!
おさらいのために、アプリを実行してみましょう!!

これで実行できるよ!

C:\Users\******\Documents\sample-react-app\sample-client> npm start
HELLO WORLD

こんな感じで、ボタンが表示されていると思います!
もちろん、この記事からみてもらっている方であれば、何もない状態かもしれませんがそれでも問題ありません。
Material-UIは、前回の記事を参考に導入しておいてくださいね!!

ヘッダーを作っていく!

では、実際にヘッダーを作っていこうと思います!
とは言っても、Material-UIのサンプルをコピペでほぼ対応できるので簡単ですよ!

Header.jsを作成する!

Header.jsは、「src>components>modules」配下に作成してください!

こんな感じになっていれば、OKです!

Material-UIのサンプルをコピペしていく!

続いては、先ほど作ったHeader.jsにMaterial-Uiのサンプルをコピペしていきます!

今回使うのは、「app-bar」です!
一番上のサンプルを使いますが、好みに応じてお好きなものをコピーしてもらえればいいと思います!

Header.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
}));

export default function ButtonAppBar() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

こんな感じで、全てコピペしてもらえればOKです!

App.jsからHeader.jsを呼び出そう!

Header.jsを作るだけでは、表示することはできません。
表示するためには、App.jsから呼び出してあげる必要があります!

App.jsを編集していきましょう!

App.js

import './App.css'

import Header from './components/modules/Header'

function App() {
  return (
    <div className="App">
      <Header />
    </div>
  )
}

export default App

importしてあげることで、App.js内で使用することができます!
ここまでできれば、ヘッダーは完了です!

ヘッダーを確認してみよう!

では実際に、実行して画面を確認してみましょう!

News 
LOGIN

こんな画面が表示されていると思います!

ヘッダーのタイトルが中央揃えになってしまっていますが、アプリのヘッダーのタイトルは左揃えにしたいことが多いと思いますので、左揃えにして、タイトルを任意に変えてみようと思います!

ヘッダーを少し編集してみよう!

ヘッダーのタイトルを左揃えにして、タイトルをSampleに変更しましょう!

Header.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
}));

export default function ButtonAppBar() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            <Box textAlign="left">Sample</Box>
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

今回は、Boxを使って左寄せにしてみました!
早速、画面を確認してみましょう!

Sample 
LOGIN

こんな感じで左揃えにできたと思います!

ClassでMaterial-UIを使ってみよう!

状態管理がしたいなどで、Material-UIをClass Componentで使いたい場合もあると思います。
そんな方のために、ClassでMaterial-UIを使えるようにしていきましょう!

Header.js

import React from 'react'
import { makeStyles, withStyles } from '@material-ui/core/styles'
import {
  AppBar,
  Toolbar,
  Typography,
  Button,
  IconButton,
  Box,
} from '@material-ui/core'
import { Menu as MenuIcon } from '@material-ui/icons'

const useStyles = (theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
})

class Header extends React.Component {
  render() {

    const { classes } = this.props

    return (
      <div className={classes.root}>
        <AppBar position="static">
        <Toolbar>
          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            <Box textAlign="left">Sample</Box>
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
      </div>
    )
  }
}

export default withStyles(useStyles)(Header)

classでMaterial-UIを使う場合、Styleを適応するためにwithStylesを使う必要があります。
makeStylesだとエラーになってしまうので、ここが注意点です!

修正できたら確認してみましょう!

01dwes

まとめ

今回は、React.jsにMaterial-UIを使って、ヘッダーを表示させてみました。
サンプルをコピペである程度形になるので、簡単にできたのではないでしょうか!

応用として、フッダーなども作成してみるのもいいと思います!
こんな感じの、ボトムナビゲーションなんかもあります!

学習に使った本はこちら!

¥3,432 (2022/12/03 14:42時点 | Amazon調べ)
¥5,601 (2022/12/03 14:42時点 | Amazon調べ)
クマじい

Amazon Kindle Unlimited でもReactの本はいっぱいあるぞ!

  • 技術書をたくさん読みたい!
  • 色々な技術を学びたい!
初回30日間無料体験があるので、どのような参考書があるか確認してみよう!

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ!
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります!

¥15,980 (2022/12/09 11:28時点 | Amazon調べ)

次回は、routerを使った画面遷移をできるようにしていこうと思います。

ReactとMaterialUIでヘッダー表示

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

東京在住で20代のエンジニアです。
特に特技があるわけではありませんが、誰もが楽しくプログラミングができたらいいと思い、「teech lab.」を開設いたしました。

Enjoy Diaryという、ガジェットや雑貨を紹介しているブログもあります!
ぜひ、みてください!!

目次