React.js + TypeScriptを使ったWebアプリケーション開発の環境構築と簡単なページ遷移方法を紹介する。

準備

準備としてHomebrewを使ってNode.js, npmをインストールしておく。

# Homebrewでnodebrewをインストール
brew install nodebrew

# nodebrewで任意のバージョンのNode.js, npmをインストール
nodebrew install-binary v19.3.0
nodebrew install-binary latest

# インストールしたバージョンを有効化する
nodebrew use v19.3.0

# 確認
nodebrew ls

プロジェクト作成とデバッグ起動

Reactのプロジェクトを作成したいディレクトリに移動して、Create React Appを使ってプロジェクトを作成する。TypeScriptを使う場合は—template typescriptを指定すればよい（こちらを参照）。

# プロジェクト作成（下記のどちらでもOK）
npx create-react-app <プロジェクト名>　--template typescript
npm init react-app <プロジェクト名>　--template typescript

プロジェクトができたら、そのディレクトリに移動して、npm startでプロジェクトをコンパイルしてローカルサーバーを起動する。初期設定ではhttp://localhost:3000でアクセスでき、Reactのロゴが表示されればOK。

# デバッグ起動
cd <プロジェクト名>
npm start

ルーティング設定

ルーティング（画面遷移）を行うためにreact-router-domをインストールするが、TypeScriptを使う場合は@types/react-router-domもインストールする必要がある。

npm install react-router-dom @types/react-router-dom

次にホームページや遷移先ページのコンポーネントを作成する。src/pages配下にHome.tsx, PageA.tsx, PageB.tsx, Page404.tsxを作成して、サンプルのためh1タグのみを記載する。

// src/pages/Home.tsx
export const Home = () => {
    return (
        <div>
            <h1>Home</h1>
        </div>
    );
}

// src/pages/Page1.tsx
export const Page1 = () => {
    return (
        <div>
            <h1>Page1</h1>
        </div>
    );
}

// src/pages/Page1Child.tsx
export const Page1Child = () => {
    return (
        <div>
            <h1>Child of Page1</h1>
        </div>
    );
}

// src/pages/Page2.tsx
export const Page2 = () => {
    return (
        <div>
            <h1>Page2</h1>
        </div>
    );
}

// src/pages/Page404.tsx
export const Page404 = () => {
    return (
        <div>
            <h1>404 Page</h1>
        </div>
    );
}

そして、Router.tsを作成して、react-router-domからRoutes, Routeをインポートする。ルーティングを設定するには、<Routes>で囲って、<Route>のpathに遷移先パスを、elementに対象コンポーネントを指定すればよい。
また、階層的にルーティングしたい場合は、<Route>を入れ子にして、親Routeのelementには<Outlet>を定義したレイアウトコンポーネントを指定し、子Routeにindexや相対pathを指定する。
※下記コードはReact Router v6でのルーティング方法を記載している。v6とそれ以前でやり方が異なるので要注意。

import { Route, Routes } from "react-router-dom";
import { Layout } from "./pages/Layout";
import { Home } from "./pages/Home";
import { Page1 } from "./pages/Page1";
import { Page1Child } from "./pages/Paga1Child";
import { Page2 } from "./pages/Page2";
import { Page404 } from "./pages/Page404";

export const Router = () => {
    return (
        <Routes>
            <Route path="/" element={<Home/>}/>

            {/* 階層的なルーティング */}
            <Route path="/page1" element={<Layout/>}>
                {/* /page1にアクセスすると、indexが指定されたコンポーネントが表示される */}
                <Route index element={<Page1/>}/>
                {/* /page1の相対パスを指定 */}
                <Route path="child" element={<Page1Child/>}/>
            </Route>

            <Route path="/page2" element={<Page2/>}/>

            {/* 上記のどれにも一致しなかった場合 */}
            <Route path="*" element={<Page404/>}/>
        </Routes>
    );
}

最後にApp.tsxで<BrowserRouter>で上記のRouterコンポーネントを囲めば、それぞれのパスで対象ページが表示される。

import './App.css';
import { BrowserRouter } from 'react-router-dom';
import { Router } from './Router';

function App() {
  return (
    <BrowserRouter>
      <Router/>
    </BrowserRouter>
  );
}

export default App;

参考