自分用のメモ
環境の準備
実行環境
- 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>
- 12、13行目で親のstateを子に渡します。
- 33行目のClickボタンで、25行目の配列からランダムで文字列を選択して表示します。
- 49行目のClickボタンで、41行目の子stateをインクリメントし、44行目で子stateの内容を親stateに渡しています。
import React, {useState} from 'react';
import './App.css';
const App = () => {
const [alert, setAlert] = useState('This is alert message')
const [card, setCard] = useState('This is card message')
return (
<div>
<h1 className='bg-primary text-white display-4'>React</h1>
<div className='container'>
<h4 className='my-3'>Hooks sample</h4>
<AlertMessage alert={alert} setAlert={setAlert} />
<CardMessage card={card} setCard={setCard} />
<hr />
<div className='text-right'>
<p>{alert}</p>
<p>{card}</p>
</div>
</div>
</div>
)
}
const AlertMessage = props => {
const data = ['Hello!', 'Welcome...', 'Good-bye?']
const actionAlert = () => {
const re = data[Math.floor(Math.random() * data.length)]
props.setAlert('message: "' + re + '".')
}
return (
<div className='alert alert-primary h5 text-primary'>
<h5>{props.alert}</h5>
<button onClick={actionAlert} className='btn btn-primary'>
Click me!
</button>
</div>
)
}
const CardMessage = props => {
const [count, setCount] = useState(0)
const actionCard = () => {
setCount(prevCount => prevCount + 1)
props.setCard('card counter: ' + count + ' count.')
}
return (
<div className='card p-3 border-dark text-center'>
<h5>{props.card}</h5>
<button onClick={actionCard} className='btn btn-secondary'>
Click me!
</button>
</div>
)
}
export default Appあとがき
特になし
コメントを残す