React

React Router

概要

「React Router」とは、Reactを用いて作成したSPA(※)に対して、UIとURLを対応付けるためのライブラリである。

※SPA・・・Single Page Application

ライブラリ

ライブラリ名	説明
react-router	ナビゲーションするためのコアライブラリ
react-router-dom	DOMベースアプリのナビゲーションを行う
react-router-native	ネイティブアプリのナビゲーションを行う

「react-router-dom」は「react-router」の上位互換のようなものであるため、

基本的には「react-router-dom」を使用すればよい。

Routerの種類

種類	説明	URL例
BrouwerRouter	TLD(※)やportの後の部分をすべてパスとして使用する	localhost:3000/foo
HashRouter	#以降の全てをパスとして使用する	localhost:3000/#/foo
MemoryRouter	ナビゲートにURLを使用しない	localhost:3000

環境構築

npm start のポート番号を変更

２種類の方法で変更できる。

1.環境変数PORTを設定する

たとえば、4000番を指定する場合は下記のように実行する。

$ PORT=4000 npm start

2.プロジェクトルートに.envファイルを作ってPORTを設定する

.envファイルに以下のように記載して、npm startを実行する

PORT=4000

参考サイト：create-react-app の npm start のポート番号を変える - Qiita

react プロジェクト作成

下記のコマンドを実行する。

$ npx create-react-app <project name> --template=typescript

バージョンを指定することも可能である。

$ npx create-react-app@<version> <project name> --template=typescript

指定できるバージョンは下記コマンドを実行。

$ npm info create-react-app versions

参考：https://qiita.com/hayato94087/items/5c586e80bfa18b1c537a

関数コンポーネントの型定義

引数(props)を受け取る場合の型定義は下記の２種類がある。

引数に直接型注釈を指定するパターン
ジェネリック型

// props に直接型注釈を指定するパターン
const SampleComponent3 = (props: Foge) => {
  return <div>Hello {props.text}!</div>;
};

// React.FC<P>のジェネリック型<P>として型を指定するパターン
const SampleComponent4: FC<Foge> = (props) => {
  return <div>Hello {props.text}!</div>;
};


const Parent: FC = () => {
  return (
    <>
      <SampleComponent3 text="TypeScript" />
      <SampleComponent4 text="TypeScript" />
    </>
  );
};

参考：【初心者】React × TypeScript 基本の型定義

目次