【React】Reactプロジェクトで使うパッケージ（暫定）

<!-- ========================================================= -->
# 概要
<!-- ========================================================= -->
Reactプロジェクトで使っているパッケージをまとめました。
気まぐれで随時更新していきます。

<!-- ========================================================= -->
# プロジェクトテンプレート
<!-- ========================================================= -->
#### [TypeScript](https://create-react-app.dev/docs/adding-typescript/)
新しくプロジェクトをつくるならTypeScriptで！

```
npx create-react-app . --template typescript
```
※ `.`は、プロジェクト名の省略です

#### [w/ Redux Toolkit](https://github.com/reduxjs/cra-template-redux-typescript)
状態管理をする必要のあるプロジェクト（認証だったり、APIでデータを取得するプロジェクト）に使います。

```
npx create-react-app . --template redux-typescript
```

#### [w/ PWA](https://create-react-app.dev/docs/making-a-progressive-web-app/)
PWA対応のアプリケーションを作成したい場合に使います。

```
npx create-react-app . --template cra-template-pwa-typescript
```
※ PWAってなんじゃらほい？：[【React】PWA対応のアプリを作成する](https://qiita.com/nemutas/items/8b7d22d4e44d659ef4eb)

<!-- ========================================================= -->
# 状態管理など
<!-- ========================================================= -->
#### [Redux Toolkit](https://www.npmjs.com/package/@reduxjs/toolkit)
既存のプロジェクトに`Redux Toolkit`を導入したい場合に使います。
新規プロジェクトなら、テンプレートを使ったほうが実装例が付いてくるので楽だと思います。

```
npm i @reduxjs/toolkit react-redux @types/react-redux
```

#### [Redux 永続化](https://redux-toolkit.js.org/usage/usage-guide#use-with-redux-persist)
Reduxで管理している状態を、localStorageやミドルウェアに保存するのに使います。（例えば、ダークモード）

```
npm i redux-persist @types/redux-persist
```

#### [Recoil](https://recoiljs.org/)
[Reduxに代わる状態管理の方法](https://ics.media/entry/210224/)です。

```
npm i recoil @types/recoil
```

#### [Cookie](https://www.npmjs.com/package/js-cookie)

```
npm i js-cookie @types/js-cookie
```
[JavaScript クッキー操作できるjs-cookie使ってみた](https://chaika.hatenablog.com/entry/2019/02/05/083000)

<!-- ========================================================= -->
# 画面まわり
<!-- ========================================================= -->
#### [Router](https://www.npmjs.com/package/react-router-dom)
ルーティングするのに使います。

```
npm i react-router-dom @types/react-router-dom
```
[react-router-domのSwitchは必要？](https://qiita.com/koja1234/items/a20d7ce81d9c2d927af5)

#### [Emotion（CSS）](https://emotion.sh/docs/@emotion/css)
CSSをComponentファイル（.tsx .jsx）内に書く場合に使います。Componentを細分化する場合によく使います。

```
npm i @emotion/css
```

#### [Material UI](https://material-ui.com/)
規格化されたデザインのComponentを使用したい場合に使います。神です。
簡単にダークモードに切り替えられたりと、利便性が高いです。

```
npm i @material-ui/core @material-ui/icons
```
[@material-ui/icons](https://material-ui.com/components/material-icons/)

#### [Chakra UI](https://chakra-ui.com/docs/getting-started)
Componentセットです。

```
npm i @chakra-ui/react @chakra-ui/icons @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
```

#### [React Icons](https://react-icons.github.io/react-icons/)
アイコン色々セットです。

```
npm i react-icons
```

#### [React CountUp](https://www.npmjs.com/package/react-countup)
カウントの増減を滑らかに表現するときに使います。タイトルリンクにデモあり。

```
npm i react-countup
```

#### [Chart.js](https://www.chartjs.org/docs/latest/)
グラフを描画するときに使います。

```
npm i react-chartjs-2 chart.js
```
[デモ](https://reactchartjs.github.io/react-chartjs-2/#/) （こちらで使われてるコードは古いバージョンです）
[サンプル](https://www.chartjs.org/docs/latest/samples/bar/vertical.html)

#### [p5.js](https://p5js.org/)
2Dの描画をするときに使います。

```
npm i p5 @types/p5
```
[React+TypeScriptではじめるp5.jsチュートリアル](https://qiita.com/shunp/items/05fe060fa37ae6f4b217)

#### [three.js](https://threejs.org/)
3Dの描画をするときに使います。

```
npm i three @types/three @react-three/fiber @react-three/drei
```
[@react-three/fiber](https://docs.pmnd.rs/react-spring/introduction) は、React用のラッパー
[@react-three/drei](https://github.com/pmndrs/drei) は、カメラコントロール用のパッケージ


<!-- ========================================================= -->
# Tips
<!-- ========================================================= -->
#### [sessionとcookieとWeb Storageの違い](https://qiita.com/cobachan/items/05fa537a4ffcb189d001)