[React]~Ambassador画面1: Top画面の作成~

こんにちは、KOUKIです。

Reactで、Top画面を実装します。

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

学習記事

前回

Ambassador画面の環境構築を行いました。

事前準備

ファイル

モジュール

package.json

画面開発

Bootstrapのテンプレートを参考に、「Bootstrapを導入->コンポーネントの作成->Topページの作成->ルーティング設定」の順に実装します。

Bootstrapの導入

CSSのWebフレームワークであるBootstrapを使ってみましょう。

まず、react-ambassadorのpublicフォルダ配下にあるindex.htmlにBootstrapのCDNを書きます。

Navコンポーネントの作成

ナビゲーションになるコンポーネントを実装します。

Headerコンポーネントの作成

ヘッダーのコンポーネントを作成します。

Layoutコンポーネントの作成

レイアウトのコンポーネントを作成します。

Top画面の作成

Top画面を作成します。

ルーティングの設定

ルーティングの設定を行いましょう。

ページ検証

以下のコマンドで、Dockerを立ち上げてください。

Dockerが立ち上がったら、ブラウザから「http://localhost:4000/」へアクセスします。

OKですね。

次回

次回は、Admin画面にも実装した共通処理を作成しましょう。

Reactまとめ

参考書籍


コメントを残す