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の上に敷いてくれているレールを深掘る
フルスタック(言語統一開発)