[React]~Admin画面12:Profileの実装~

こんにちは、KOUKIです。Reactで画面開発を行なっています。

前回は、Orderページを実装しました。今回は、Prifileを実装します。

尚、「React, NextJS and Golang: A Rapid Guide – Advanced」コースを参考にしています。解釈は私が勝手に付けているので、本物をみたい場合は受講をお勧めします!

前回

事前準備

Profileページ

ページテンプレート

Profileページのテンプレートを作成します。

ルートの作成

Profileページへのルートを作成します。

ページ遷移の確認

「docker-compose up」でDockerを起動し、「http://localhost:3000」にアクセスしましょう。

そこからユーザー名「test test」にクリックするとProfileページに飛べます。

Profileページの作成

Profileページの中身を実装します。

ユーザー情報/パスワードの変更ができる画面を用意しました。

また、useEffectを使って、Profileページが開いたタイミングでAPIからユーザー情報を取得し、画面に表示する処理も入れています。

infoSubmit処理

infoSubmitは、ユーザー情報の変更を行いたいときに使用します。

項目にupdateをつけて、SUBMITボタンを押下してみましょう。

ページをリダイレクトすると、ユーザー情報が更新されたことがわかります。

passwordSubmit処理

passwordSubmitは、パスワードの変更を行いたい時に使用します。

こちらはパスワードの変更が確認できるように、一旦ログアウトしてから更新されたか確認してみてください。

次回

次回は、Reduxの導入を行います。

Reactまとめ

参考書籍


ソースコード

ここまで実装したソースコードを下記に記載します。

Profile.tsx

App.tsx

コメントを残す