React 開発環境構築手順

React開発環境構築

久しぶりに Reactの開発環境を構築したら色々と文明開化が起こっていたのでメモっておきます。

必要なコマンド類

まずは create-react-app を入れるところから始めます。
CSSにSCSS使いたいのでnode-sassもインストール。

npm install -g create-react-app
npm i -D node-sass

プロジェクト作成

create-react-app コマンドでプロジェクトを作成
コマンドの使い方はこちら

create-react-app react-app

ライブラリの追加

プロジェクト作成が終わったら必要なライブラリを追加していきます。
これだけあれば充分な気がします。
--devをつけるとdevDependenciesに追加されます。

yarn add [package-name] [--dev]

1. bulma （CSSライブラリ）
2. sanitize.css （ブラウザのCSSのギャップを埋める）
3. redux （データフロー制御用）
4. react-redux （ReactとReduxの橋渡し）
5. axios （通信用のライブラリ）
6. redux-actions （アクション制御）
7. redux-logger （ロガー）
8. react-router-dom （フロントエンドのルーティング）

インストールするとpackage.jsonはこんな感じになりました。

{
  "name": "react-app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "bulma": "^0.8.0",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "redux": "^4.0.4",
    "redux-actions": "^2.6.5",
    "redux-logger": "^3.0.6",
    "sanitize.css": "^11.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">1% in JP",
      "not dead"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "node-sass": "^4.13.0"
  }
}  

Debug用のブラウザ拡張を入れる

ブラウザに拡張機能を入れておくとデバックが捗るのでいれておきます。
chrome用の拡張はこちら

ブラウザの検証機能が拡張されてReactのデータを確認できるようになります。

ステップ実行の環境整える

vscodeやIntelliJでステップ実行できるようにしておきます。

IntelliJ

上記の画面（Run Configrations）にて画像のように設定します。これでnodeのプロセスを立ち上げることができます。

次にJavascriptのデバッグ実行情報を設定します。これで立ち上げたnodeのプロセスにアタッチしてJavascriptを実行することができます。

vscode

vscodeでは上記のプラグインをインストールすることでChromeブラウザを使ってステップ実行することができます。

プラグインをインストールした後にターミナルを開いてyarn startを実行するとnodeのプロセスが立ち上がります。同時にブラウザも立ち上がるので、ブレークポイントを付けておくと実行を止めることができます。

その他開発に必要な情報

React開発に知っていると便利な情報を以下に書いておきます。

ちょっとした確認

環境構築に時間をかけたくない場合は以下の方法でサクッと確認したりできます。
Reactは、jsfiddleやcodepenで確認することができます。

Reduxのデータフロー

複数人で開発する時にはReduxを導入した方が良い場合があります。
Reduxのデータフローは慣れるまで時間がかかります。
元ネタどこか忘れてしまいましたが、データフローとしては以下の図がとてもわかりやすいです。
肝はReducerがstateを更新するところだと思います。
その他は他のフレームワークやあるいはjQueryとかでも馴染みがあると思います。