自分用のメモ
環境の準備
実行環境
- 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>
- 43行目のClickボタンで、20行目のActionが実行され、data変数が形成される。
- render処理が開始され、53行目にJSON文字列が反映される。
import React, {useState} from 'react';
import './App.css';
const App = () => {
const [name, setName] = useState("")
const [mail, setMail] = useState("")
const [age, setAge] = useState(0)
const [data, setData] = useState({
name: 'no name', mail: 'no mail', age: 0
})
const doChangeName = e => {
setName(e.target.value)
}
const doChangeMail = e => {
setMail(e.target.value)
}
const doChangeAge = e => {
setAge(e.target.value)
}
const doSubmit = e => {
setData({name:name, mail:mail, age:age})
e.preventDefault()
}
return (
<div>
<h1 className='bg-primary text-white display-4'>React</h1>
<div className='container'>
<h4 className='my-3'>Hooks sample</h4>
<AlertMessage data={data} />
<form onSubmit={doSubmit}>
<div className='form-group'>
<label>Name:</label>
<input type='text' className='form-control' onChange={doChangeName} />
</div>
<div className='form-group'>
<label>Mail:</label>
<input type='text' className='form-control' onChange={doChangeMail} />
</div>
<div className='form-group'>
<label>Age:</label>
<input type='text' className='form-control' onChange={doChangeAge} />
</div>
<input type='submit' className='btn btn-primary' value='Click' />
</form>
</div>
</div>
)
}
const AlertMessage = props => {
return (
<div className='alert alert-primary h5 text-primary'>
<h5>{JSON.stringify(props.data)}</h5>
<hr />
<table className='table h6'>
<tbody>
<tr><th>Name</th><td>{props.data.name}</td></tr>
<tr><th>Mail</th><td>{props.data.mail}</td></tr>
<tr><th>Age</th><td>{props.data.age}</td></tr>
</tbody>
</table>
</div>
)
}
export default Appあとがき
特になし
コメントを残す