# 2020年8月29日モブプロ#3
```
みんなで同時編集が可能なので好きに編集してください。
```
[MDの書き方](https://qiita.com/tbpgr/items/989c6badefff69377da7)
モブプロのコンテンツは🤟がついています。
# 前回のおさらい
https://hackmd.io/@9DhXIgigSNmNGDQGNDcWSQ/BkP4aW0zD
# 今日の目標
- タスクリストにいい感じのデザインを適用
# TODOに必要そうな機能
- 作成
- 削除
- 完了
# 使用するCSSフレームワーク
- [MATERIAL-UI](https://material-ui.com/ja/)
- React専用
## 翻訳ツール
- [DeepL](https://www.deepl.com/translator)
# ボタンを作成してみよう🤟
## material-uiのインストール
```bash
npm install @material-ui/core
```
## ボタン作成
[Button コンポーネント](https://material-ui.com/ja/components/buttons/)
```javascript
<Button color="secondary" variant="contained" onClick={onClickEvent}>Button</Button>
```
### オプション（今回使用したもの）
- color
- primary
- secondary
- variant
- contained
### React以外にMaterialUIを使用したい時
- [MaterializeCSS](https://materializecss.com/)
# App.jsをきれいにしよう🤟
内容は細かいので割愛...
ソースは[こちら](https://github.com/Skywill-inc/react-sample2nd/blob/master/src/App.js)
# コンポーネントの作成🤟
## Header.js
`src/components`の中に`Header.js`を作成。
作成したファイルを`App.js`にインポート
```javascript=
import Header from './components/Header'
```
使用したい場合は`<Header />`とする。
## Footer.js
`src/components`の中に`Footer.js`を作成。
作成したファイルを`App.js`にインポート
```javascript=
import Footer from './components/Footer'
```
使用したい場合は`<Footer />`とする。
# Header.jsを作り込もう🤟
[コンポーネント作成](#コンポーネントの作成🤟)後、必要なUIをインポートする。
```jsx=
import {AppBar, Toolbar, Typography} from '@material-ui/core'
```
## AppBar
```jsx=
<AppBar position="static" component="header">
```
### 使用オプション
- position
- static
- component
- header
## Typography
```jsx=
<Typography variant="h4" component="h4"></Typography>
```
### 使用オプション
- variant
- h4
- component
- h4
# Footer.jsを作り込もう🤟
## makeStyles
CSS的なスタイルをJavaScriptで定義。
```javascript=
const useStyles = makeStyles(theme => ({
footer: {
position: 'absolute',
bottom: 0,
width: '100%',
backgroundColor: '#4d4d4d',
color: '#ffffff'
},
footerContainer: {
justifyContent: 'center',
alignItems: 'center'
}
}))
```
定義したスタイルを指定。
```jsx=
const classes = useStyles(); // ←ここで上記の定義を呼び出し
return (
<footer className={classes.footer}>
<Toolbar className={classes.footerContainer}>
```
# Bodyを作り込もう🤟
## 必要なmaterialコンポーネントをインポート
```javascript=4
import {
Button,
TextField,
Box,
Container,
CssBaseline,
List,
ListItem,
ListItemText,
Checkbox,
Divider,
makeStyles
} from '@material-ui/core';
```
上記でインポートしたコンポーネントを使用していく。
```jsx=
// Bodyの大枠
<Container component="main" maxWidth="xs">
<CssBaseline />
// テキストフィールドコンポーネント
<Box mt={5} display="flex" justifyContent="space-around">
<TextField label="タイトル" value="{taskTitle}" onChange={handleTextFieldChanges} />
<Button variant="contained" color="primary">作成</Button>
</Box>
</Container>
```
### 完成品
# Task追加機能を実装しよう🤟
`onClick`を追加
```jsx=
<Button variant="contained" color="primary" onClick={addTask}>作成</Button>
```
上記で設定した`addTask`を定義する
```javascript=
import React, {useState} from 'react'; // 忘れないように１行目に追加
```
```javascript=19
const [tasks, setTasks] = UseState([])
const [taskTitle, setTaskTitle] = UseState('')
const addTask = () => {
setTasks([...tasks, {
title: taskTitle,
doing: false,
done: false
}])
}
const handleTextFieldChanges = task => {
setTaskTitle(event.target.value)
}
```
## 展開演算子（[...tasks]とは？）
```javascript=
const tasks = ['task1','task1','task1','task1']; // → task1 task1 task1 task1
console.log(...tasks) // → task1 task1 task1 task1
```
上記の１行目と３行目の結果は同じ。
`...`は配列を展開する。
### じゃあ今回は何をしているの...?
`tasks`の配列を一回展開して、新たに作られた`task`を追加して新しい配列を生成している。
```javascript=
ex.)
const tasks = [
{
title: taskTitle,
doing: false,
done: false
},
]
const tasks2 = [
...tasks,
{
title: newTask,
doing: false,
done: false
}
]
↓
[
{
title: taskTitle,
doing: false,
done: false
},
{
title: newTask,
doing: false,
done: false
}
]
```
こうなっている。(合っているかな...?)
# 本日のコミット履歴
https://github.com/Skywill-inc/react-sample2nd/commit/bbbaf2dca882acbe41291dfcd2d39288bb9180c3
Sign in with Wallet
Connect another wallet