[React]~Admin画面8:Productページの実装~

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

前回は、Linkページを実装しました。今回は、Productページの実装を行います。

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

前回

事前準備

フォルダ/ファイル

Productページ

早速、Productページを作成していきましょう。

Productモデル

まず、以下のモデルを作成します。

このモデルは、Productページで、データの型付けのために使います。

Product取得処理

次に、axiosでProduct取得処理を実装します。
※処理は、これまで実装してきたものと同じなので、詳細は割愛します。

ページの実装

Productのページを実装します。これは、前回実装したUserページとほぼ同じです。

Tableなどには、Material-UIを使っています。

Material-UIは、ページネーション機能も提供しているので、かなり便利です。

ルートの追加

Productページへのルートを追加しましょう。

これで、ブラウザから「http://localhost:3000/products」へアクセスしたらProductページへ遷移できるようになりました。

Menuの変更

MenuからProductページへ遷移できるようにしましょう。

確認

ブラウザから「http://localhost:3000/products」へアクセスし、Productsページへアクセスできるか確認しましょう。

imageへのパスはダミーなので表示エラーになっていますが、これでOKです。

削除処理

Productsの「Actions」に削除ボタンをつけましょう。

Productを削除するAPIのエンドポイントは、「http://localhost:8000/api/admin/products/{product_id}」です。

問題なく削除されるか、確認しましょう。

Okですね。

次回

次回は、Productの作成機能を実装します。

Reactまとめ

参考書籍


ソースコード

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

Products.tsx

App.tsx

Menu.tsx

Product.tx

コメントを残す