下町の老舗のパン屋さん「ぱんだ」（お店のロゴは、PANDA）は、パンダの4人家族（パパ、ママ、男の子、赤ちゃん）が営む人気のパン屋さん。毎朝、焼きたてのパンを求めて、お店は地域のお客さんで大賑わい。午後になると、パパパンダと子パンダは、町のお得意さまのところへ、パンの配達にでかけます。配達先は、下町の色々な食べ物屋さん。ウサギの和菓子屋さん、イヌのお蕎麦屋さん、ライオンの喫茶店、神社に寄り道して、トラの中華屋さん、ネコのあんみつやさん、キツネのお好み焼き屋さん、ブタのコロッケ屋さん。配達のさいごに、親子でボート遊びをして、一日が終わります。翌日は日曜日。町のみんなは、公園へピクニックにでかけます。お昼の時間、「せーの！」で開いたみんなのお弁当は……？ あんこトースト、ごもくそばパン、お好みサンドなどなど、それぞれが「ぱんだ」のパンをアレンジしてつくった、楽しいお弁当パン！ みんなの「おいしーーーーい！」の声が空に響きました。

少年宇宙飛行士たちが到着したのは、白と黒のかわいすぎる動物が暮らす、心なごむ星だった。ページをめくるたびに、あふれるばかりに飛び出してくる、パンダたち。読むだけであたたかな気持ちになり、でも最後には考えさせられて、少し切なくなる絵本。

Reactをイチから学びたい方にオススメの1冊です！

【本書のポイント】

UdemyのReactコースで最高評価獲得の著者がモダンJavaScriptの基礎からTypeScriptの実践的な内容までしっかり解説！

著者が2年以上勉強会を主催し初学者と話す中で分かった、多くの人が感じるReactの挫折ポイントを解決する構成！

現場のシチュエーションベースのストーリーで技術解説をしているので、実務で必要となる知識を意識しながら学習を進められる！

「#挫折しないReact本」で学習した感想をシェア！！

Chapter1 React を始める前に知っておきたいモダンJavaScript の基礎

1-1 モダンJavaScript 概説

1-2 DOM、仮想DOM

1-3 パッケージマネージャー(npm/yarn)

1-4 ECMAScript

1-5 モジュールバンドラー、トランスパイラ

1-6 SPA と従来のWeb システムの違い .. .

Chapter1 まとめ

Chapter2 モダンJavaScript の機能に触れる

2-1 const、let での変数宣言

2-2 テンプレート文字列

2-3 アロー関数 ( ) =＞ { }

2-4 分割代入 { } [ ]

2-5 デフォルト値 =

2-6 スプレッド構文

2-7 オブジェクトの省略記法

2-8 map、filter

Chapter2 まとめ

Chapter3 JavaScript でのDOM 操作

3-1 JavaScript によるDOM アクセス

3-2 DOM の作成、追加、削除

3-3 JavaScript によるDOM 操作実践

Chapter3 まとめ

Chapter4 React の基本

4-1 React 開発の始め方

4-2 JSX 記法

4-3 コンポーネントの使い方

4-4 イベントやスタイルの扱い方

4-5 Props

4-6 State（useState）

4-7 再レンダリングと副作用（useEffect）

4-8 export の種類

Chapter4 まとめ

Chapter5 React とCSS

5-1 Inline Styles

5-2 CSS Modules

5-3 Styled JSX

5-4 styled components

5-5 Emotion

5-6 Tailwind CSS

Chapter5 まとめ

Chapter6 再レンダリングの仕組みと最適化

6-1 再レンダリングが起きる条件

6-2 レンダリング最適化1（memo）

6-3 レンダリング最適化2（useCallback）

6-4 変数のmemo 化（useMemo）

Chapter6 まとめ

Chapter7 グローバルなState 管理

7-1 グローバルなState 管理が必要な理由

7-2 Context でのState 管理

7-3 その他のグローバルstate を扱う方法

Chapter7 まとめ

Chapter8 React とTypeScript

8-1 TypeScript の基本

8-2 API で取得するデータへの型定義

8-3 Props への型定義

8-4 型定義の管理方法

8-5 コンポーネントの型定義

8-6 省略可能な型の定義

8-7 オプショナルチェイニング（Optional chaining）

8-8 ライブラリの型定義

Chapter8 まとめ

Chapter9 カスタムフック

9-1 カスタムフックとは

9-2 カスタムフックの雛形を作成

9-3 カスタムフックの実装

Chapter9 まとめ

付録 React × TypeScript 実践演習