今回は
ToDoリスト応用編ということで
様々な機能を付加してみました。
具体的には
・ログイン機能の実装
・バックエンドとの連携によるトークン認証
などがメインとなってきます。
また今回はReact-ReduxやHooksを用いて
構築を行ってみました。
正直挫折してしまったのですが、
今どこまで出来ているかということを確認して
次に活かしていきたいと思います！
それでは見ていきましょう。
〜ログイン前〜
[Home]
SemanticUIのiconでGitHubネコちゃんを入れてみました
非常に可愛くて癒されますね🐱
[signIn]
react-hook-formを用いてバックエンドと連携しました
最初redux-formを使っていましたが、こちらの方が使い勝手が良かったです
[signUp]
↑いらない利用規約
ここで登録した要素は、事前にバックエンド側が指定したnameと合わせる必要があります
そうすることでサインイン時にtoken認証が行えます
〜ログイン後〜
[Create]
ここもreact-hook-formを用いて書いています
signUpでユーザーを作るときと基本的に同じで、
actionを呼び出して処理をさせ、Reducerにかけてstateを更新していきます
[Edit]
ここができていません！
理想は
・ページネーション機能で３つずつ、全ての表示を見れるようにする
・ToDoのひとつひとつのページに遷移できて、以下の編集をできるようにする
□Title、コンテンツを編集できるようにする
□そのものを削除できるようにする
なんですが、なかなかうまくいきませんでした、、次回リベンジ！
[signOut]
Sureしたらログイン前（最初はHome）に戻ります☺️
このコンポーネントが一番楽でした！！！
【反省】
・ちょっとずつ理解していない機能を導入していったら分からなくなった
・もっとメモを載せていき、ぱっと見でわかるコーディングを心がければよかった
・Udemyの講座を途中で放置したため、バグの箇所が分からなくなった
→焦らずに一区切りがついてから次のステップに進みたい
・講座が写経にならないように、理解度を確認しながら進めていく
【学び】
・React-Reduxの回し方を理解した
・react-router-domでLinkを使えるようになった
・Hooks（useState）を利用できたので、
classコンポーネントでstateのバケツリレーをしなくて良くなった
・Hooks（useEffect）、sessionStorageを軽く理解した
・REST API連携の基礎を理解した、もっと自在に扱えるようになりたい
【今後】
ToDoに関しては今後Editの導入やリファクタリングを随時行なっていきます。
GoogleOAuthなどの認証機能も搭載できたら便利かなあと思ったり。
UdemyでJSやReactの講座を受けながら学んでいきたいと思います！
別の言語だとSwiftが少し興味あるかなあ、Macだし。
あとReact NativeでiOSのアプリも作ってみたいです！
TypeScriptもいずれ触れられたらと考えています。
あとNo Codeがどんなものなのか、どこまで自由にできるのか気になるので触ってみたいと思います。