見出し画像

CodePenでesm.shでお手軽にReact Routerを使用してみるテスト

siouxcitizen

ここからの作業のつづきです。　引き続き esm.sh による CodePen のコードで、今回は React Router を使用できるか試してみました。


fork元コードｘ３

以下の skypack により React Router の機能を使用している３つのコードをforkして参考にさせていただき、skypack 部分を esm.sh に置き換えていきながら React Router の動く CodePen コードを作成していきました。

１．hello-react-router-v6　
（fork元コードと同じ内容の自分作成のコード hello-react-router-v6）

２．react: React-router-dom v6
（fork元コードと同じ内容の自分作成のコード react: React-router-dom v6）

３．Learn React Router Dom V6
（fork元コードと同じ内容の自分作成のコード Learn React Router Dom V6）


「fork元コードと同じ内容の自分作成のコード」は上記３つのfork元コードと全く同じ内容のコードを自分用にforkして作成したものです。　コードをsiouxcitizen名義にして手元に集めやすくしてから、それらをしばらく観察・調査してから以下のコード作成の作業にうつりました。　
ここではコードの修正は全く行わなかったので、かつて剣道について教えてもらったときに聞いた「見取り稽古」というものを延々としているような気分でしたｗ。


自分でCodePen上に作成したコード

以下、forkして修正も行ないながら作成していった siouxcitizen 名義の CodePen コードとなります。

■ hello-react-router-v6 test

まず最初に、上記３つのfork元コードのうち最もシンプルなコード 「１．hello-react-router-v6」を fork して siouxcitizen名義「hello-react-router-v6」を作成し、そこからさらにforkしてタイトルだけ少し変更して作成したコードです。　siouxcitizen名義「hello-react-router-v6」は原紙的にバックアップとして残しておきたいと思い、新しくこのコードを作ったかと記憶しています。　コードの内容はfork元から変わらず同じです。　このコードを元に以降の修正を行っていきました。


■ hello-react-router-v6 test02

上記のコードの skaypack を esm.sh に置き換えたコードです。　esm.sh を使用する理由はこのnoteに書いていたのと同じで、esm.sh のほうがより細かくバージョンの設定ができるからです。

また
import * as ReactRouterDOM from "https://esm.sh/react-router-dom@6.21.2";
と
import * as ReactRouterDOM from "https://esm.sh/react-router-dom@6.22.3";
をコメントアウトで使い分けて
react-router-dom@6.21.2
react-router-dom@6.22.3
のどちらでも React Router が使えるか試しています。


■ hello-react-router-v6 test03

test02で
react-router-dom@6.21.2
react-router-dom@6.22.3
のどちらでも  React Router が使えるようだったので、このコードからは react-router-dom@6.22.3 のほうを使用するようにしています。


■ hello-react-router-v6 test04

test03 のコードから機能を削っています。　test03 では３つあったHome、About、Contact、という項目をこの test04 ではHome、About、の２つに変更しています。　動く状態を維持しながらコードを削りつつ、はじめて使う React Router の書き方はこんな感じか～、ということを試しつつ作業を行っています。　


■ hello-react-router-v6 test05

上記で一度単純な構造にしたうえで、「３．Learn React Router Dom V6」　のコードを参考＆コピペさせてもらいつつ、より凝ったレイアウトのコードを反映・表示できるか試しています。


■ hello-react-router-v6 test06

作成したtest05を削ってまた単純化して、できるだけコード内容を自分でも理解できる形にしようと修正したコードです。　

次のtest07コードが動かないので、とりあえずこのコードを今回noteの成果物として画面とコードを載せてみます。　う～ん、この成果物、fork元からほとんど発展なしかも、というか退化しただけかもｗ。

Chrome初期画面


Chrome「Home」クリック時


Chrome「About」クリック時


Firefox初期画面


Firefox「Home」クリック時


Firefox「About」クリック時


HTML

<div id="root"></div>

CSS　なし

JS（JavaScript）

import React from "https://esm.sh/react@18.2.0";
import ReactDOM from "https://esm.sh/react-dom@18.2.0";
import {
  BrowserRouter,
  Link,
  Routes,
  Route
} from "https://esm.sh/react-router-dom@6.22.3";



const App = () => {
  return (
    <>
        <h1>hello react router v6</h1>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
        <Routes>
          <Route path="/" element={<Home />}></Route>
          <Route path="about" element={<About />}></Route>
        </Routes>
</>
  );
}

const Home = () => {
  return <h1>🏠 Home Page</h1>;
}

const About = () => {
  return <h1>👤 About Page</h1>;
}


ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);


■ hello-react-router-v6 test07

最後に自分独自のレイアウトなど作れないか試したけれど失敗したコードです（ロクに思い通りのレイアウトに変更できませんでしたｗ　今は動かないコードとなっていますｗ）。　後で見るかも、または今後の実験用に残しています。　とりあえず React Router を CodePen 上で esm.sh で動かした、React Router の超基礎を完全に理解したｗ気がするので次の作業に進めることにしましたｗ。


参考にさせていただいたサイト・コード

コードに残っていたコメントより、以下、参考にさせていただいたサイト・コードとなります。

・React Router v6 はじめでもわかるルーティングの設定方法の基礎

・[WIP] ver. React - ポケモン名前当てゲーム (Name guessing game)

・Learn React Router V6

・Learn React Router Dom V6（fork元のコードでもあります）

継続作業


この記事が気に入ったらサポートをしてみませんか？