はじめに

フロントエンドスキル向上のため書籍やudemyでインプットを行っていますが、アウトプットも並行して進めるべく@Sicut_studyさんのReact100本ノックを始めることにしました。

ルール

主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由
TypeScriptを利用する

今回作るもの

簡単なTODOリストアプリ

条件

1. 入力フィールド: ユーザーがタスクを入力するためのテキストフィールドが存在する。タスク名が1文字以上でない場合はバリデーションする。
2. 追加ボタン: 入力されたタスクをTODOリストに追加するためのボタン。
3. タスクリスト表示: 追加されたタスクがリストとして表示される。
4. 削除ボタン: 各タスクの隣には削除ボタンがあり、それをクリックすることで該当のタスクをリストから削除する。

成果物

使用技術

React
TypeScript
MUI

PC

SP

感想

状態管理の基礎を学ぶことができた。
今後の展望として、①タスクごとに期限を設ける、②タスクの絞り込み機能など、やれることが結構ありそうなので、時間がある時にアップデートしていきたい。