ToDoアプリを作成すると、常に新しいWeb技術を学び始めると何かを構築する練習をしたい人のための良いアイデアです.
私は、反応フックとlocalstorageでtodoアプリを作っていました、そして、私は私がそれを作った方法について書いています.
私はここで超詳細にしようとしている🤪) 誰もが簡単に手順に従うことができます.しかし、すべての質問を歓迎します.

TLドクター

以下はGithubリポジトリです.
デモ:https://github.com/ducdev/todo-app-react-hooks-localstorage

https://todo-app-react-hooks-localstorage.netlify.app/ さあ、始めましょう！

ノードを仮定します.JSとNPMはあなたのワークスペースにインストールされています.
さて、このコマンドを実行して、新しい反応プロジェクトを初期化します.

npx create-react-app todo

現在、

cd todo
npm start

今のところ、デフォルトのアプリケーションを実行している

http://localhost:3000/

作成したプロジェクトのコードを開き、App.jsディレクトリにsrcが表示されます.App.jsにTodo.jsの名前を変更し、コードを変更するコードを変更します.
コードの変更

ファイルを保存し、デフォルトの反応アプリが表示されますが表示されますが唯一のTODO見出しテキストが表示されます.
次に、TodoList & TodoItemを作成し、モックスアレイでレンダリングします.
コードの変更
https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/42ab20edd451ea87619cad15314c9afe995bcb6a
我々は今、偽のtodoリストを得た👏
さて、新しいtodoを追加できるような入力を作成します.上記のように、私はブラウザのウィンドウを更新するときにToDoアプリのデータを保つためにブラウザのLocalStorageを使用するので、ToDoリストは消去されません.formikを使用してフォームを作成し、フォームの値をyupで検証すると仮定しますので、このコマンドを実行してこれらのパッケージを追加する必要があります.

npm i formik yup

コードの変更
https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/b002cb5772c5ff8262df706d3a54d06008875db5
https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/f61da2a15cbbcd5929f01545800c94a3309974d6
基本的に、今我々は新しいtodoを追加するためのフォームを持っているし、それぞれのToDo項目の削除ボタンを作成します.

コードの変更

我々は、完了または保留のtodo項目をマークすることができます.
https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/57af5f2e5414709407345eef323cb97a59a76f8b
コードの変更

時々、私たちもtodoのテキストを編集する必要があります.
https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/c3e90764641ffb16a80c5457f2f6714ef864e4b7
コードの変更

これは、いくつかのスタイリング、改善と検証を追加する時間です.
今回はsassと一緒に行きましょう.

npm i node-sass

https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/933eff9f3a5bcb0111032fbea5ba37b8d0dacae5
コードの変更

アプリが正しくレンダリングされていることを確認するには、我々はテストを追加忘れてはいけない.作成反応アプリはアサーションのセレクタとしてライブラリをテストする反応を使用します.だからこそ、我々はアプリケーションの依存木に何かを追加する必要はありません.
コードの変更
https://github.com/ducdev/todo-app-react-hooks-localstorage/commit/d64447083a2ada0112c735d5329f59a1bd4cc9a4node-sass

npm run test

最後に、アプリはすぐに展開され、使用する準備ができて、あなたがポストをお楽しみください.あなたが私がよりよくすることができる何かがあると思うならば、^