ページの見た目と大体の機能が完成したので、Storybook 上ではなく実際のページとして表示してみましょう。 次のファイルを作成します。

ディレクトリ構造

src
  └ index.jsx

内容は次のようになります。

import React from "react";
import ReactDOM from "react-dom";
import MainPage from "./components/Pages/MainPage";
import "./style.css";

ReactDOM.render(
  <MainPage />,
  document.getElementById("app")
);

これは html ファイル内の id="app"の要素の中に Pages/MainPage を配置します。 index.html は public ディレクトリの中に、読み込んでいる style.css は src ディレクトリの中にそれぞれ用意してあります。

ファイルの作成が出来たら、app ディレクトリ下コマンドyarn devを実行しましょう。 すると、http://localhost:8080 でアプリケーションが動いている様子が確認できると思います。

エラー処理とデータの保存を除いておよそお手本通りであったら、Github Pages の設定を行ってから、 プルリクエストを出し、レビュー依頼をしてください。

Github Pages の設定

Github 上のこの課題用のリポジトリのページを開き、以下の手順で設定を行います。

Untitled

  1. Settings を開く
  2. Pages を開く
  3. デプロイの対象となるブランチの指定をする。Branch のドロップダウンを開き、
  4. gh-pages ブランチを選択する。このブランチは Github Actions により自動で作成・更新される。この時点で gh-pages がリストに無かったら想定外なので講師に連絡してください。
  5. （新たに/root 等が記載されたドロップダウンが出現するが無視して、）Save ボタンを押す

ここまで行い、一分程度待ってからページを更新すると、デプロイされたページへのリンクが出現します。

Untitled

リンク先のページが、ローカルでyarn devを実行した際のページと同じ挙動を示すことを確かめたら、このリンクを添付してプルリクエストを提出して下さい。