手順を忘れないように、忘却の空とその彼方へ花束を

パッケージ管理はYarnを使う。
CSSフレームワークにはTailwind CSSを利用。

大まかな流れ↓

create react appコマンドでReact+Typescriptプロジェクトを作成する。
Tailwind CSS導入する
Eslint,Prettierの設定

create react appコマンドでReact+Typescriptプロジェクトを作成する。

❯ node -v
v16.13.0

~
❯ yarn -v
1.22.17

~
❯ npx create-react-app --version
5.0.0

~
❯ npx create-react-app realtime-db-react --template typescript

memo:
yarnがローカルにインストールされているときはパッケージマネージャーにYarnが使われる。
https://zenn.dev/ryuu/articles/force-npm-with-cra

Eslint,Prettierの設定

→https://zenn.dev/jpnasane/articles/d7f44682b74fdc

~/Project/React/react-chatapp master* 22s
❯ yarn run eslint --init

設定はこんな感じ。

Typescript用のパッケージインストール

yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

Airbnbの細かい設定をしてくれるやつをインストール

~/Project/React/react-chatapp master* 22s
❯ npx install-peerdeps --dev eslint-config-airbnb

...(略)
SUCCESS eslint-config-airbnb
  and its peerDeps were installed successfully.

Prettierのパッケージをインストール。

yarn add -D prettier eslint-config-prettier

Tailwind CSS導入する

~
❯ yarn add tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

これやると、

zsh: no matches found: postcss@^7

が出た。
→
解決方法

create react appコマンドで作成したプロジェクトはwebpackの設定をオーバーライドできない。つまり、PostCSSの設定を上書きできない。
→cracoをインストールする。

yarn add @craco/craco

package.jsonファイル内のスクリプトでcracoを利用するように変更

{
    // ...
    "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
     "eject": "react-scripts eject"
    },
  }

これでyarn startしてみると、、

UnhandledPromiseRejectionWarning: TypeError: match.loader.options.plugins is not a function

的なエラーが出る。
→
解決方法

craco.config.js内にある

postcssの記述をpostcssOptionsに変える。

これで
yarn startでプロジェクト立ち上がる。

次はtailwind CSSの設定

~
❯ npx tailwindcss init

して、tailwind.config.jsで

purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],

とする。

index.cssに

@tailwind base;
@tailwind components;
@tailwind utilities;

を追加。

firebase関連

firebase login

~
❯ firebase login
Already logged in as amahaya0831@gmail.com

すでにログイン済み。

コンソールでプロジェクト作って、webアプリを作成。
Realtime Databaseを作成。


プロジェクト配下で

firebase init

とりま、Realtime Datebase....

のところだけチェックすればok。

database.rules.jsonで全部trueにしておく。
→ のちfirebase deployで設定を反映させる必要あり

firebaseのsdkを利用するため、

yarn add firebase
yarn add @types/firebase

で、envファイル作成して設定値を埋める。

Redux導入

~/Project/React/react-chatapp main
❯ yarn add redux react-redux @types/react-redux redux-thunk @types/redux-thunk reselect @types/reselect