[React]~Admin画面11:Orderページの実装~

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

前回は、Product編集機能を実装しました。

今回は、Orderページの作成にチャレンジしましょう。

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

前回

事前準備

Order

モデルの作成

データの型タイプをモデルで定義します。

Orderモデルを作成したので、LinkモデルのOrdersプロパティの型をOrderに変更しましょう。

Orderページの作成

Orderページのテンプレートを作成しましょう。

ルートの追加

次に、Orderページへのルートを追加します。

Menuの変更

Menuに、Orderリンクを追加します。

ページ遷移の確認

「docker-compose up」でDockerを立ち上げ、「http://localhost:3000/」へアクセスしてTopページを表示してください。

するとMenu一覧に「Orders」が出ていると思うので、それをクリックしてOrderページへ遷移してください。

Order表示機能の実装

Orderページを完成させましょう。

Order データをAPIからとってくるやり方は、これまで解説してきたものと同じなので、説明は省きます。

Accordionは、初めて出てきましたね。

Orderデータ表示確認

Orderデータの表示確認をしましょう。

OKですね。

次回

次回は、Profile機能を実装します。

Reactまとめ

参考書籍


ソースコード

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

Orders.tsx

App.tsx

Menu.tsx

order.ts

order-item.ts

link.ts

コメントを残す