自分用のメモ
環境の準備
実行環境
- 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>
- 5行目のdataをmapを使って画面に表示するアプリです。
- 35行目でmapを利用しています。
import React from 'react';
import './App.css';
class App extends React.Component {
data = [
"This is list sample.",
"これはリストのサンプルです。",
"配列をリストに変換します。"
]
constructor(props) {
super(props)
this.state = {
list: this.data
}
}
render() {
return <div>
<h1 className="gb-primary display-4">React</h1>
<div className="container">
<p className="subtitle">Show List.</p>
<List title="サンプル・リスト" data={this.data} />
</div>
</div>
}
}
class List extends React.Component {
number = 1
render() {
let data = this.props.data
return (
<div>
<p className="h5 text-center">{this.props.title}</p>
<ul className="list-group">
{data.map((item, index) =>
<li className="list-group-item" key={index}>
<Item number={index + 1} value={item} />
</li>
)}
</ul>
</div>
)
}
}
class Item extends React.Component {
itm = {
fontSize: "16pt",
color: "#00f",
textDecoration: 'underline',
textDecorationColor: '#ddf'
}
num = {
fontWeight: "bold",
color: "red"
}
render() {
return (
<p style={this.itm}>
<span style={this.num}>
[{this.props.number}]
</span>
{this.props.value}
</p>
)
}
}
export default Appあとがき
mapによる繰り返し処理を勉強できました。
コメントを残す