はじめに
フロントエンドスキル向上のため書籍やudemyでインプットを行っていますが、アウトプットも並行して進めるべく@Sicut_studyさんのReact100本ノックを始めることにしました。
ルール
- 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由
- TypeScriptを利用する
今回作るもの
簡単なTODOリストアプリ
条件
1. 入力フィールド: ユーザーがタスクを入力するためのテキストフィールドが存在する。タスク名が1文字以上でない場合はバリデーションする。
2. 追加ボタン: 入力されたタスクをTODOリストに追加するためのボタン。
3. タスクリスト表示: 追加されたタスクがリストとして表示される。
4. 削除ボタン: 各タスクの隣には削除ボタンがあり、それをクリックすることで該当のタスクをリストから削除する。
成果物
使用技術
- React
- TypeScript
- MUI
PC
SP
感想
状態管理の基礎を学ぶことができた。
今後の展望として、①タスクごとに期限を設ける、②タスクの絞り込み機能など、やれることが結構ありそうなので、時間がある時にアップデートしていきたい。