概要
Reactプロジェクトで使っているパッケージをまとめました。
気まぐれで随時更新していきます。
プロジェクトテンプレート
TypeScript
新しくプロジェクトをつくるならTypeScriptで！
npx create-react-app . --template typescript
※ .は、プロジェクト名の省略です
w/ Redux Toolkit
状態管理をする必要のあるプロジェクト（認証だったり、APIでデータを取得するプロジェクト）に使います。
npx create-react-app . --template redux-typescript
w/ PWA
PWA対応のアプリケーションを作成したい場合に使います。
npx create-react-app . --template cra-template-pwa-typescript
※ PWAってなんじゃらほい？：【React】PWA対応のアプリを作成する
状態管理など
Redux Toolkit
既存のプロジェクトにRedux Toolkitを導入したい場合に使います。
新規プロジェクトなら、テンプレートを使ったほうが実装例が付いてくるので楽だと思います。
npm i @reduxjs/toolkit react-redux @types/react-redux
Redux 永続化
Reduxで管理している状態を、localStorageやミドルウェアに保存するのに使います。（例えば、ダークモード）
npm i redux-persist @types/redux-persist
Recoil
npm i recoil @types/recoil
Cookie
npm i js-cookie @types/js-cookie
JavaScript クッキー操作できるjs-cookie使ってみた
画面まわり
Router
ルーティングするのに使います。
npm i react-router-dom @types/react-router-dom
Emotion（CSS）
CSSをComponentファイル（.tsx .jsx）内に書く場合に使います。Componentを細分化する場合によく使います。
npm i @emotion/css
Material UI
規格化されたデザインのComponentを使用したい場合に使います。神です。
簡単にダークモードに切り替えられたりと、利便性が高いです。
npm i @material-ui/core @material-ui/icons
Chakra UI
Componentセットです。
npm i @chakra-ui/react @chakra-ui/icons @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
React Icons
アイコン色々セットです。
npm i react-icons
React CountUp
カウントの増減を滑らかに表現するときに使います。タイトルリンクにデモあり。
npm i react-countup
Chart.js
グラフを描画するときに使います。
npm i react-chartjs-2 chart.js
デモ （こちらで使われてるコードは古いバージョンです）
サンプル
p5.js
2Dの描画をするときに使います。
npm i p5 @types/p5
React+TypeScriptではじめるp5.jsチュートリアル
three.js
3Dの描画をするときに使います。
npm i three @types/three @react-three/fiber @react-three/drei
@react-three/fiber は、React用のラッパー
@react-three/drei は、カメラコントロール用のパッケージ