▶ターゲット
「React,TypeScriptがある程度できるようになったけどTODOアプリづくりは飽きたなぁ」っていう人向きです。この記事を通して自走力をつけてください！

🤔この記事について
私は以前フローチャート作成ツールを開発しました。
今作り直すならこんな感じにしたいなという理想の塊です。
またハンズオンで（わかっていなくてもとりあえず）進められるように適当なタイミングでソースコードすべてを掲載しています。

💥扱うことがら
・React,Typescript,Redux(re-ducksパターン,fsaで型推論付き)
・html-to-imageでのスクリーンショット
・storejsでブラウザ保存
・React.memoでのメモ化
・Vercelにデプロイ


React×Redux×MUIでつくる フローチャート作成ツール

第0章 注意・おことわり

第1章 超・基本設計

第2章 サクッと環境構築

第3章 ディレクトリを整える

第4章 MUIをさわっておく

第5章 ページのレイアウト

第6章 Reduxでstate管理 前編 -設計・インストール・items state-

第6章 Reduxでstate管理 後編 -meta state・app state・カスタムhooks-

第7章 ReduxをUIに反映しよう 前編 -タイトルと記号を表示-

第7章 ReduxをUIに反映しよう 後編 -フローを表示-

第8章 機能を実装してツールを仕上げる その1 -フローや記号の追加機能-

第8章 機能を実装してツールを仕上げる その2 -記号の更新・削除-

第8章 機能を実装してツールを仕上げる その3 -プレビューモードと画像出力-

第8章 機能を実装してツールを仕上げる その4 -ブラウザに保存する-

第9章 パフォーマンスチューニング

第10章 Vercelにデプロイしてアプリを公開

最終章 自走のための道標

読者コミュニティ｜React×Redux×MUIでつくる フローチャート作成ツール