TypeScriptでMaterial-UI練習帳 — Hello, world! —
Reactの基本はなんとなく理解できてきた（気がする）。自分はUIデザインのセンスがク○レベルなので、ちょっとしたサンプルを作る上でも、次はMaterial-UIを使えるようになりたい。React＋TypeScriptの情報ってまだまだ少ないので、一から手探りになってしまうのがつらみ。
create-react-appのコマンドはもう覚えたぞ。
$ npx create-react-app --typescript material-ui-hello--typescriptはdeprecatedになったから今後は--template typescriptを使えと言われた。覚えておこう。
$ cd material-ui-hello
$ yarn startとやって、サンプルの画面がブラウザで表示されればOKっと。なんか以前と雰囲気変わった？
Material-UIのインストール。
$ yarn add @material-ui/coreApp.tsxを編集して簡単なフォームを作ってみる。テキストを表示するのは<Typography/>を使うらしい。
import React from 'react';
import './App.css';
import { Typography, TextField, Button, CssBaseline, Container } from '@material-ui/core';
const App = () => {
return (
<Container maxWidth="sm" >
<CssBaseline />
<Typography variant="h5">ようこそ</Typography>
<form>
<TextField
label="名前"
name="name"
variant="outlined"
size="small"
fullWidth
margin="normal" />
<Button
variant="contained"
color="primary"
fullWidth >
Click!
</Button>
</form>
</Container>
);
}
export default App;とりあえずこんな感じ。
次にボタンをクリックしたら、ダイアログを表示するようにしてみたい。公式APIドキュメントの<Dialog/>のサンプルがそのまま参考になりそうなので真似てみよう。公式、TSのコードスニペットも載せてくれてて助かるわー。
import React from 'react';
import './App.css';
import { Typography, TextField, Button, CssBaseline, Container, DialogTitle, Dialog } from '@material-ui/core';
type HelloDialogProps = {
open: boolean;
name: string;
onClose: () => void;
}
function HelloDialog(props: HelloDialogProps) {
const { open, name, onClose } = props;
return (
<Dialog onClose={onClose} open={open}>
<DialogTitle>ご挨拶</DialogTitle>
<Typography variant="h5">こんにちわ、{name}さん！</Typography>
</Dialog>
);
}
const App = () => {
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<Container maxWidth="sm" >
<CssBaseline />
<Typography variant="h5">ようこそ</Typography>
<form>
<TextField
label="名前"
name="name"
variant="outlined"
size="small"
fullWidth
margin="normal" />
<Button
variant="contained"
color="primary"
fullWidth
onClick={handleClickOpen}>
Click!
</Button>
<HelloDialog open={open} name={"TODO"} onClose={handleClose} />
</form>
</Container>
);
}
export default App;
公式のサンプルもフックを使った書き方になってるんだな（24行目のuseState）。新しくコンポーネントを書き始める場合はクラスコンポーネントを使わずに関数コンポーネントでいくのがよさそうだ。
const [open, setOpen] = React.useState(false);React.useStateを使って、状態変数openと、値をセットする関数setOpenを定義。seStateの引数には初期値を渡すんだな。
以下のようにダイアログを表示できるようになった。
後は、入力した名前の受け渡しを実装する。名前と、ボタンが押せるかどうかを状態に追加すればよさそうだ。
const App = () => {
const [open, setOpen] = React.useState(false);
const [name, setName] = React.useState("");
const [buttonDisabled, setButtonDisabled] = React.useState(true);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
setName(value);
setButtonDisabled(!Boolean(value));
}
return (
<Container maxWidth="sm" >
<CssBaseline />
<Typography variant="h5">ようこそ</Typography>
<form>
<TextField
label="名前"
name="name"
variant="outlined"
size="small"
fullWidth
margin="normal"
onChange={handleNameChange} />
<Button
variant="contained"
color="primary"
fullWidth
disabled={buttonDisabled}
onClick={handleClickOpen}>
Click!
</Button>
<HelloDialog open={open} name={name} onClose={handleClose} />
</form>
</Container>
);
}よし、これで入力した名前をダイアログに表示できるようになった！
