React Hooks と TypeScript でつくる Todo PWA ~ 入門 React ハンズオン

React Hooks と TypeScript でつくる Todo PWA ~ 入門 React ハンズオン

01はじめに 02開発環境の準備 03React コンポーネントの作成 04フォームに入力された文字列を状態 (=state) として保持する 05Todo（タスク）の仕様を考える (その 1)06配列ステートの操作には要注意 07イベントを処理する関数を作成する 08todos ステートを展開してページに表示する 09Todo（タスク）の仕様を考える (その 2)10登録済みの todo を編集可能にする 11配列ステートの操作には要注意 (その 2)12タスクの完了/未完了を操作できるようにする - Todo の仕様を考える (その 3)13登録済みの todo を削除可能にする - Todo の仕様を考える (その 4)14タスクをフィルタリングする機能を追加する 15ごみ箱を空にする機能を追加する 16TypeScript のジェネリクスを使ってよく似た関数を一つにまとめる 17UI コンポーネントの構成を考える 18ソースコードをコンポーネントごとに分割する 19UI フレームワーク Material UI を導入する 20ToolBar コンポーネントの作成 21SideBar コンポーネントの MUI 化 22QR コンポーネントの作成 23FormDialog コンポーネントとTodoItem コンポーネントを MUI で化粧直しする 24AlertDialog コンポーネントの作成と ActionButton コンポーネントのアップデート 25ブラウザのストレージへデータを保存する ~ useEffect フックの利用 26コラム：React コンポーネントのライフサイクル 27ストレージのデータにも型安全性を担保する 28Todo アプリを PWA 化する 29GitHub Pages へデプロイする 30おわりに 31（補遺）なぜステートから作った値を直接渡すべきでないのか？32（補遺）なぜコールバック関数をカッコ () 付きで渡すとダメなのか？33（補遺）ユニットテストを導入するには？34（補遺）プログラミング環境の準備

Chapter 20

ToolBar コンポーネントの作成

2023.10.30に更新