React に仕事で触れる機会があったので、勉強がてらにゼロから作って行こうと思います。

何がしたいの？

React で localPC にハロワまで実装してみたいと思います ❗

前提

• React が導入されている

では 作っていきましょう 👻

App を新規で作る

まずプロジェクトの雛形を作成します。

$ npx create-react-app react-i-learned --template typescript
# `react-i-learned`はアプリ名なので、好みで変更してください

※ 後日--template typescriptが抜けていたことが判明して書き換えました（泣）

結構時間がかかります！

プロジェクトが完成すると下記のコマンドで、local にサーバーを立てて実行することができます

# カレントディレクトリ移動
$ cd react-i-learned

# アプリ起動
$ npm start

この状態で

http://localhost:3000/

にアクセスするとこんな感じで起動してるアプリを見ることができます。

react-router-dom を導入して画面遷移できるようにする

さて、ハロワと少しずれますがreact-router-domを導入しておきます。

React は SPA なのでいわゆる URL のhttp://aaa.bbb.jp/xxxxxxxxxxxのxxxのパスの要素が切り替わることなく動作するものですが、

これによって React 上でパスの値によって画面遷移をしているように見せかけることができるようになります。

# インストール
$ npm install react-router-dom
$ npm install @types/react-router-dom

画面遷移するコードを書いてみる

次にApp.tsxの内容を全て消して下記のように書き換えてみます。

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/">
          <Hello />
        </Route>
      </Switch>
    </Router>
  );
}

function Hello() {
  return (
    <div>
      <h1>ハローワールド</h1>
    </div>
  );
}

export default App;

これで/のパスにHello()を割り当てることができました。

ブラウザでアプリを確認してみます。

Hello()の返り値通りの結果が表示されました。

次に画面遷移を作ってみます。

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/hoge">
          <Hoge />
        </Route>
        <Route path="/">
          <Hello />
        </Route>
      </Switch>
    </Router>
  );
}

function Hello() {
  return (
    <div>
      <h1>ハローワールド</h1>
      <Link to="/hoge">ほげページへ</Link>
    </div>
  );
}

function Hoge() {
  return (
    <div>
      <h1>ほげほげ</h1>
      <Link to="">トップページへ</Link>
    </div>
  );
}

export default App;

新たに hoge ページを作ってトップページと行ったり来たしできるようになりました！

はい、今回の実装はここまでにします。

手持ちのサーバーでこれを公開する場合はどうすればいいの？

最後にこれをサーバーで公開するにはどうすればいいの？という点に触れます。

ちなみに私は初めて触れたときに、

「これをサーバーでホストするためには、Linux なりのサーバーを持ってきて、その上で$ npm startして放置する必要があるのかな？」

とか割とマジで考えてました（笑）

実際にはそんな事はありません。

$ npm run build

で build ディレクトリが作られるので、それをどこかのサーバーに乗せて静的ホスティングすれば OK です ❗

手軽なところだと、下記な感じで S3 にアップロードして静的ホスティングするとかですかね

（amplify 使えという話しですが、それは気が付かなかった方針で）

静的ホスティングした S3 の endpoint を叩く

うん、S3 の上で元気に動いとる。

以上！

まとめ

React に触れてみました。

ゼロからアプリを作って、画面遷移するハローワールドを作りました。

また作ったアプリをビルドして静的ホスティングして動くことを確認してみました。

今回のリポジトリはこちら

https://github.com/sisi100/react-i-learned/releases/tag/20210710