React + GraphQL + Pagination 実装 ＆ コンポーネント分割 作成物と本記事で触れること概要 Github GrapQL API 利用での pagination 実装 pagination + α 実装コンポーネントの分割 Before After 1 After 2 最後に React + GraphQL + Pagination 実装 ＆ コ…

urql による Github ＆ Gitlab の マルチクライアント 実現（サンプル） はじめに urql でのマルチクライアントの実現 実例 補足 urql による Github ＆ Gitlab の マルチクライアント 実現（サンプル） はじめに （こんな要件は早々ないだろうが）異なる２…

React 実践のために調べまくったこと書き綴り まとめメモ フォルダ構成 サンプル まとめ ベストプラクティス（コーディング） CSS (Style) emotion theme の モードチェンジ storybook CSF v3.0 Interaction test React 諸々 Suspense カスタム hooks Lazy R…

Redux 基本 Redux とは Redux ストア Redux 基本 ひとまず、storybook のチュートリアルに載っていた範囲＋ α のみ Redux とは Flux ベースの state（状態）を容易に管理をするためのフレームワーク refs: https://qiita.com/knhr__/items/5fec7571dab80e2dc…

React Drag & Drop メモ 各ライブラリ所感 参考(コードリーディング) refs React Drag & Drop メモ 主要ライブラリは３つ React DnD react-beautiful-dnd React-Draggable ※2022/5 末時：React18 で実現したければ React DnD を使うか自前で実装するかがよさ…

React コードフォーマット（ESLint + Prettier + TypeScript） Code Format ESLint インストール Prettier インストール & ESLint 設定 refs React コードフォーマット（ESLint + Prettier + TypeScript） XXXX 番煎じ。3 年前に webpack で一から設定したこ…

React 副作用/メモ化/レデューサー (TypeScriptコード例付) 副作用/メモ化/レデューサー useEffect 依存配列 useMemo/useCallback useLayoutEffect useReducer memo関数 React 副作用/メモ化/レデューサー (TypeScriptコード例付) 副作用/メモ化/レデューサ…

React 基本概念等 コンセプト stateのリストアップ コンポーネントとprops コンポーネントライフサイクル Presentational Component / Container Component Hooks (関数コンポーネント合体強化パーツ) 実装（基本） サンプル JSX HTML記述 コンポーネント イ…

React ステート管理 (TypeScript コード例) ステート フォーム useRef (制御されていないコンポーネント) useState (制御されたコンポーネント) カスタムフック Reactコンテキスト カスタムプロバイダー コンテキスト＆ステート併用 コンテキスト＆カスタム…

React スタイリング メモ React スタイリング 手段 手段 ref React スタイリング メモ React スタイリング 手段 手法は大きく２つに分かれていそう CSS Modules系： CSS を分けて書く。（規約が定まる） CSSのロードはJSと分かれるため、パフォーマンスは良…