[React]~Admin画面9:Product作成機能の実装~

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

前回は、Productページを実装しました。今回は、Productを作成する機能を作っていきたいと思います。

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

前回

事前準備

フォルダ/ファイル

Productの作成

Addボタンをつける

前回作成したProductページ上に、Addボタンをつけましょう。

「”/products/create”」は、これから実装するFormページへのパスです。

ブラウザから「http://localhost:3000/products」へアクセスして、確認してみましょう。

Formページの作成

次は、Formページを作ります。

ルートの設定

Formページへのルートを実装します。

ページ遷移の確認

Addボタンを押下して、Formページに遷移するか確認しましょう。

OKですね。

Formの作成

次に、Product情報を送信するFormを実装します。

Submit処理の実装

APIへProduct情報を送信する処理を実装します。

作成確認

Formページから商品情報をAPIへ送信し、問題なく登録されるか確認しましょう。

以下の画像では、「Harry Potter」を送信します。

送信が問題なく完了したら、Productページへリダイレクトされるので、商品が登録されているか確認しましょう。

No.31に登録されていますね! incredibleがimcredibleになってしまってますが^^;

次回

次回は、Productの更新機能を実装します。

Reactまとめ

参考書籍


ソースコード

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

Products.tsx

App.tsx

ProductForm.tsx

コメントを残す