[React]~Ambassador画面6:Productページの実装~

こんにちは、KOUKIです。

Reactで画面開発をハンズオン形式で記事にしています。

今回は、Productページの実装をします。

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

前回

StatsとRankingsの実装を行いました。

事前準備

ファイル

ProductsBackend

Productを表示するページを作成します。

ページの作成

以前作成した、ProductsFrontendページを元に実装します。

ナビゲーションの変更

Frontend/Backendナビゲーションのリンクを変更します。

ルートの追加

ProductsBackendへのルートを追加します。

検証

ブラウザから「http://localhost:4000/backend」へアクセスしてみましょう。

OKですね。

Products

Product一覧を表示するページを作成します。

ページの作成

ProductsFront/Backendから共通のHTMLを抜き出します。

このProductsコンポーネントをFront/Backendページから呼び出します。

Products APIへリクエストを送る

ProductsFrontend/BackendページからProducts APIへリクエストを送る処理を実装します。

Products APIは、以前以下の記事で実装しました。

PropsでProductsページにデータ渡す

Propsを使って、取得したデータをProductsページに渡してあげましょう。

検証

画像イメージがないので味気ない感じになりましたが、とりあえず成功ですね。

次回

次回は、検索機能の実装をしましょう。

Reactまとめ

参考書籍


ソースコード

Nav.tsx

App.tsx

Products.tsx

ProductsFrontend.tsx

ProductsBackend.tsx

コメントを残す