自分用のメモ
環境の準備
実行環境
- VS code：v1.62.3
- Node.js：v14.17.3
- React：v17.0.2
プロジェクトの作成
React Create Appで作成します。
React Create Appで作成されたソースの変更
- 15行目でbootstrapをCDNで読み込んでいます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous" >
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
- 10行目（入力値を表示）、11行目（入力値を合計表示）、12行目（入力値を税額含めた表示）をするアプリです。
- 32、46行目で異なる関数（total、tax）を代入しており、74行目のfunc(p)がそれぞれ、total(p)、tax(p)として処理されます。
import React, {useEffect, useState} from 'react';
import './App.css';
const App = () => {
return (
<div>
<h1 className='bg-primary text-white display-4'>React</h1>
<div className='container'>
<h4 className='my-3'>Hooks sample</h4>
<PlainMessage />
<AlertMessage />
<CardMessage />
</div>
</div>
)
}
const PlainMessage = props => {
const [msg, setCalc] = useCalc()
const onChange = e => {
setCalc(e.target.value)
}
return (
<div className='p-3 h5'>
<h5>{msg}</h5>
<input type='number' onChange={onChange} className='form-control' />
</div>
)
}
const AlertMessage = props => {
const [msg, setCalc] = useCalc(0, total)
const onChange = e => {
setCalc(e.target.value)
}
return (
<div className='alert alert-primary p-3 h5 text-primary'>
<h5>{msg}</h5>
<input type='number' onChange={onChange}
min='0' max='1e4' className='form-control' />
</div>
)
}
const CardMessage = props => {
const [msg, setCalc] = useCalc(0, tax)
const onChange = e => {
setCalc(e.target.value)
}
return (
<div className='card p-3 h5 border-primary'>
<h5>{msg}</h5>
<input type='number' onChange={onChange}
min='0' max='1e4' className='form-control' />
</div>
)
}
const total = a => {
let re = 0
for (let i = 0; i <= a; i++) {
re += i
}
return re
}
const tax = a => {
return Math.floor(a * 1.1)
}
const useCalc = (num=0, func = a => a) => {
const [msg, setMsg] = useState(null)
const setValue = p => {
let res = func(p)
setMsg(<p className='h5'>※{p}の結果は、{res}です。</p>)
}
return [msg, setValue]
}
export default Appあとがき
特になし
コメントを残す