# React

- [[.React:ReactにおけるCSS|ReactにおけるCSS]]
- [[.React:create-react-appの制約|create-react-appの制約]]
- [[.React:emotionにおける動的なCSS|emotionにおける動的なCSS]]
- [[.React:カスタムフック|カスタムフック]]

### React Router

参考サイト：[[https://qiita.com/jima-r20/items/c7d636262a9ebf0bedbd|React Routerでルーティングを実装しよう - Qiita]]

##### 概要
「**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番を指定する場合は下記のように実行する。

<code>
$ PORT=4000 npm start
</code>

---

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

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

<code conf>
PORT=4000
</code>
---
参考サイト：[[https://qiita.com/urouro_net/items/dd7166f9728d08bc933b|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" />
    </>
  );
};
```


参考：[[https://zenn.dev/ogakuzuko/articles/react-typescript-for-beginner#2.-%E9%96%A2%E6%95%B0%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E5%9E%8B%E5%AE%9A%E7%BE%A9|【初心者】React × TypeScript 基本の型定義]]