Reactプロジェクト作成から画面遷移まで

本記事の目標

1. TypeScriptでReactを構築
2. react-routerで画面遷移を実装

パッケージのインストールの話はしません。
必要なパッケージが入っている前提で話します。

プロジェクト作成

以下のコマンドをうち、my-appというプロジェクトを作成します。
（my-appのところには好きなアプリ名に変更してください。）

npx create-react-app my-app --template typescript

プロジェクトの作成が終わったら,以下の二つのコマンドを順番に打ちます。

cd my-app
yarn start 

以下の画面が出ればOKです。

rootフォルダの設定

tsconfig.josnの "compilerOptions"の中に以下を書き込む。
こうすることで、rootフォルダをsrcに設定でき、import文が綺麗になる。

"baseUrl": "src" 

react-routerの導入

以下のコマンドをうち、react-routerを導入する。

yarn add react-router-dom
yarn add @types/react-router-dom

ページ作成

表示させたいページを作成していく。
今回はHomeとAboutというページを作成する。

Homeページ

srcフォルダの中にpagesフォルダを作成する。
pagesフォルダの中にHome.tsxを作成する。

Home.tsx

import React from "react";
import { Link } from "react-router-dom";

class Home extends React.Component {
  render() {
    return (
      <div>
        <div
          style={{
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-between",
            width: 110,
          }}
        >
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
        </div>
        <h1>Home</h1>
      </div>
    );
  }
}

export default Home;

Aboutページ

pagesフォルダの中にAbout.tsxを作成する。

About.tsx

class About extends React.Component {
  render() {
    return (
      <div>
        <div
          style={{
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-between",
            width: 110,
          }}
        >
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
        </div>
        <h1>About</h1>
      </div>
    );
  }
}

export default About;

routerの設定

作成した画面を表示する設定を行う。

routerの設定

srcフォルダにRouter.tsxを作成する。
イメージ的にはここで表示するページのパスを設定する。

Router.tsx

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Home from "pages/Home";
import About from "pages/About";

export default class Router extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
        </Switch>
      </BrowserRouter>
    );
  }
}

indexの設定

index.tsxを以下のように変更する。
Routerタグのところにrouter.tsxで設定したページが切り替わって表示される。

index.tsx

import React from "react";
import ReactDOM from "react-dom";
import * as serviceWorker from "./serviceWorker";
import Router from "Router";

ReactDOM.render(
  <React.StrictMode>
    <Router />
  </React.StrictMode>,
  document.getElementById("root")
);

serviceWorker.unregister();

ページの確認

yarn startをすると以下の画面が表示される。
リンクを押すとHome画面とAbout画面を切り替えられる。

削除していいデフォルトファイル

以下に書かれたデフォルトファイは使わないので、削除してもOKです。
- App.css
- App.test.tsx
- App.tsx
- index.css
- logo.svg