[[📚2章React学習に必要なJavaScriptの知識 ・3章JavaScriptにおける関数型プログラミング]]の続き
### 第5章 ReactとJSX
#### 5.2.1 Reactフラグメント
```jsx
// エラーになる書き方
// Reactでは2つい上の要素をコンポーネントの戻り値として返すことはできない
function Cat({ name }) {
return (
<h1>The cat's name is {name}</h1>
<p>he's good</p>
)
}
// React.Fragmentでエラーにならなくなる
function Cat({ name }) {
return (
<React.Fragment>
<h1>The cat's name is {name}</h1>
<p>he's good</p>
</React.Fragment>
)
}
// <>で省略して記述することもできる
function Cat({ name }) {
return (
<>
<h1>The cat's name is {name}</h1>
<p>he's good</p>
</>
)
}
```
#### 5.3 webpack
webpack → モジュールバンドラ(異なる種類のファイルを単一のファイルに結合するためのツール)
- モジュール化→モジュールに分割することで管理しやすくする
- ネットワークパフォーマンス→ブラウザが依存ファイルをダウンロードする時間(ファイル数が増えるとリクスト数が増えて遅延が大きくなるのを防ぐ)
Reactでコンポーネントごとにファイルを作る。ただこのままだと、ファイル数が多いほどリクエストに時間がかかる→webpackを使って、モジュールを単一ファイルにビルドする