今回は、React.jsにMaterial-UIでヘッダーを表示してみようと思います！
デザインに自信がない方でも簡単に表示できるので、ぜひ参考にしてみてください！
学習に使った本はこちら！
ポチップ
ポチップ
クマじいAmazon Kindle Unlimited でもReactの本はいっぱいあるぞ！
前回の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
こんな感じで、ボタンが表示されていると思います！
もちろん、この記事からみてもらっている方であれば、何もない状態かもしれませんがそれでも問題ありません。
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 Appimportしてあげることで、App.js内で使用することができます！
ここまでできれば、ヘッダーは完了です！
ヘッダーを確認してみよう！
では実際に、実行して画面を確認してみましょう！
こんな画面が表示されていると思います！
ヘッダーのタイトルが中央揃えになってしまっていますが、アプリのヘッダーのタイトルは左揃えにしたいことが多いと思いますので、左揃えにして、タイトルを任意に変えてみようと思います！
ヘッダーを少し編集してみよう！
ヘッダーのタイトルを左揃えにして、タイトルを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を使って左寄せにしてみました！
早速、画面を確認してみましょう！
こんな感じで左揃えにできたと思います！
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だとエラーになってしまうので、ここが注意点です！
修正できたら確認してみましょう！
まとめ
今回は、React.jsにMaterial-UIを使って、ヘッダーを表示させてみました。
サンプルをコピペである程度形になるので、簡単にできたのではないでしょうか！
応用として、フッダーなども作成してみるのもいいと思います！
こんな感じの、ボトムナビゲーションなんかもあります！
学習に使った本はこちら！
ポチップ
ポチップ
クマじいAmazon Kindle Unlimited でもReactの本はいっぱいあるぞ！
次回は、routerを使った画面遷移をできるようにしていこうと思います。
