😚

React100本ノック 3本目「Todo List」(解説付き)

2024/06/19に公開

Reactのお題を消化していく、React100本ノック。
Reactの実力向上のため始めました。

ノック2本目:Todo List

React100ノックの本家

https://qiita.com/Sicut_study/items/5dec3c42c8f3c90f0487

実装

Todo Listを作成。
タスク作成時のバリデーション、タスク入力フォームを学習できるテーマです。

Todo Listならドラッグ&ドロップの要望もあるよね、ということで「dnd-kit」を使ってドラッグ&ドロップも実装しました。

さらに工夫として新規タスクモーダルをエスケープキーで閉じるようにしています。
ちょっとした操作性が大事ですよね。

利用技術

  • React
  • TypeScript
  • tailwindcss
  • dnd-kit

画面

https://kuni-chan-k.github.io/react-lesson/#/lesson3

コード

https://github.com/kuni-chan-k/react-lesson/blob/main/src/components/Lesson3.tsx

解説

ここでも考慮しないといけないのはタスク名の最大値。本家ではとくに触れられていませんが大事です。

タスクの作成、表示に関してはとくに解説することはないのですが・・・

ドラッグ&ドロップ機能で苦戦しました。

  • ドラッグする起点をリストの左端に設定
  • スマホ独自の挙動を考慮
    して満足する挙動になりました。

タスクの情報をAPI経由で登録・更新・削除できるとよりよい勉強になると思います。
そのときはセキュリティに気をつけてください。

React本

本で勉強したい人にはこちらをオススメ

これからはじめるReact実践入門 コンポーネントの基本からNext.jsによるアプリ開発まで

GitHubで編集を提案

Discussion