Reactの守破離
#設計
#守破離
利用想定
React Docs
読み終わった段階でみる
自身を客観的にとらえるためのセルフ
チェックリスト
--
守 (公式API, 純粋JS,
コンポーネント指向
)
コンポーネントスコープドな
HTML
と
CSS
の書き方
スコープは小さいに越したことはない
useEffect
を使わないコンポーネント間の状態伝播や
システム内コミュニケーション
宣言的UIのライフサイクル
ステート/オブジェクトのライフサイクル
keyの仕組み
The State Initializer Pattern
useState vs useReducer
安易にuseEffectやuseStateを利用する前に考えるべきことがある
Lifting state up
単方向データフロー(unidirectional data flow)
Composition
ReactNode型とReactElement型とReactChild型
---
破(モジュール設計、責務分割などの設計論)
フロントエンドのコンポーネント設計
React Hooks
の応用
React > Context
React > Concurrent Features
Suspense
正しい
useEffect
の使い方
カスタムフック
の応用
React HooksをHumbleObjectと捉える
状態管理(GUI)
Redux
(<--
CQS
のエッセンスが大事
Atomic State Management
GUIのデータアーキテクチャと状態管理の変遷
雑多設計メモ:
宣言的UIの設計レシピ
責務分割と
テスト
パッケージング
関心の分離はドメインとプレゼンテーションから考える(PDS)
単体テストの考え方/使い方
React Application Architecture for Production
フロントエンド開発のためのテスト入門
私のフロントエンドディレクトリ構成・テスト観点 2022
Webフロントエンドのパフォーマンス周り
Advanced React
---
離(
フロントエンドのレンダリングアーキテクチャ
)
React Server Components
Server-Driven UI
マイクロフロントエンド
React, Nextの乗り換え先
Next.jsがReactの上に敷いてくれているレールを深掘る
フルスタック(言語統一開発)