[React]~Ambassador画面5:StatsとRankingの実装~

こんにちは、KOUKIです。

Reactで画面開発をハンズオン形式で紹介しています。

今回は、StatsとRankingの実装をします。

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

前回

前回は、ヘッダーコンポーネントの実装を行いました

事前準備

ファイル

Stats

Stats APIは、以下の記事で作成しています。

ページの作成

ページの実装を行います。

tableのbodyは、この後実装します。

ルートの追加

Statsページのルートを追加iします。

ナビゲーションへの追加

Statsページのリンクをナビゲーションに追加します。

ページの表示

下記のコマンドで、dockerコンテナを立ち上げます。

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

Tableの作成

画面の表示が確認できたら、Tableを作成しましょう。

この記事を参考にStatsにデータを追加後、画面を表示してみましょう。

Ranking

次は、Raningの実装に入ります。

Rankings APIは、次の記事で実装しました。

ページの作成

Statsページとほぼ同じなので、サクッと作ってしまいます。

ルートの追加

ナビゲーションの追加

データ投入

RankingデータはRedisに格納しているのですが、データが🈳になっている場合が考えられるので、以下のコマンドでデータを投入してください。

ページの表示

ブラウザから「http://localhost:4000/rankings」へアクセスして、ページを表示しましょう。

次回

次回は、Productsの実装をしましょう

Reactまとめ

学習

参考書籍


ソースコード

Stats.tsx

Rankings.tsx

App.tsx

Nav.tsx

コメントを残す