[React]~Admin画面1:ダッシュボードの作成 ~

こんにちは、KOUKIです。

前回は、Reactの開発環境を構築しました。

今回は、ダッシュボード画面の実装に着手します。

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

なお、前回作成したreact-adminフォルダは以下のようになっています。

このフォルダ構成は、Reactのバージョンによって異なるかもしれませんので、package.jsonを貼っておきます。

前回

事前準備

フォルダ/ファイルの作成

ダッシュボード画面の作成

Bootstrapの導入

CSSのフレームワークであるBootstrapを導入しましょう。現場でもよく使います。

導入方法はいくつかありますが、今回は、CDNで導入しましょう。

スタイリングの追加

src配下の「App.css」を以下のように書き換えます。※元ネタ

ナビゲーションバーの追加

ナビゲーションバーを追加します。

メニューの追加

メニューを追加します。

App.tsx

src配下の「App.txs」を以下のように書き換えてください。※元ネタ

ダッシュボードの表示

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

OKですね。

次回

次回は、ルーティング処理を実装します。

Reactまとめ

参考書籍


ソースコード

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

index.html

App.css

App.tsx

Menu.tsx

Nav.tsx

コメントを残す