1
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-07-19

#本記事の目標

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

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

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

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

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

cd my-app
yarn start 

以下の画面が出ればOKです。
reactデフォルト画面

#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画面を切り替えられる。

Home画面

#削除していいデフォルトファイル
以下に書かれたデフォルトファイは使わないので、削除してもOKです。

  • App.css
  • App.test.tsx
  • App.tsx
  • index.css
  • logo.svg
1
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?