Reactの開発環境構築はこれをやってればいいと思う(2019)

Reactの雛形を作成

npx create-react-app my-app --typescript
cd my-app

git add時にprettierで自動フォーマットする設定

prettierはtypescriptのフォーマットを行うライブラリです。
後からコードを読む際に視認性が高まるため設定しておくことをおすすめします。

yarn add --dev husky lint-staged prettier

package.jsonの末尾に追加

package.json

  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write",
      "git add"
    ]
  },
  "prettier": {
    "singleQuote": true
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }

Chromeで動かす際にvs codeでデバッグできるようにする

vs codeでDebugger for Chromeの拡張をインストールする

インストール後、launch.jsonを作成

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

F5で実行時にChromeが起動し、vs codeで張ったブレークポイントで止まってくれる

styled-componentsのセットアップ

昔はjsx(tsx)ファイルとcssを分けて記載するCSS Modulesが流行ってましたが、
現在(2019)はjsx内にまとめて書いてしまえるCSS in JSが流行っているようです
Reactでコンポーネントを作らないことはないと思うので、必須環境としてセットアップしましょう

styled-componentsは現在(2019)最も人気のあるCSS in JSのライブラリです

yarn add styled-components @types/styled-components

vs codeでvscode-styled-componentsの拡張をインストールする
シンタックスハイライトや補完ができるようになります

プロジェクト毎に設定するか選択

銀の弾丸ではないので用法用量を守ってお使いください

• Atomic Design
  • コンポーネントの分割単位や粒度で悩んでる人
  • Containerがファットなんだけどって人
• css-modules
  • javascriptの中にcss書くのヤダって人
  • 使ってるCSS フレームワーク(UI コンポーネント)の都合で仕方なく使う人
• Redux
  • React標準のHooksだけでは制御できない複雑なステートを抱えてる人
• React コンポーネントセット
  • カッコいいデザインのサービスを早く作りたい人
  • material-components-web-react
  • Material-UI
  • React Toolbox
  • React Bootstrap
• Router
  • ページ遷移のあるサービスを開発している人
  • React Router (昔使ってた人はv4から結構変わったよ)
  • Reach Router

さぁ開発だ！！