React 開発環境構築手順

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

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

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

## プロジェクト作成
create-react-app コマンドでプロジェクトを作成
[コマンドの使い方はこちら](https://ja.reactjs.org/docs/create-a-new-react-app.html)

```
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用の拡張はこちら](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
![SS6](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3342/8d05e0b7-dcf8-25ab-d728-637594d736a0.png)
ブラウザの検証機能が拡張されてReactのデータを確認できるようになります。

## ステップ実行の環境整える
vscodeやIntelliJでステップ実行できるようにしておきます。
### IntelliJ
![SS1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3342/4097473b-52ab-55e8-2f80-e58adf0646b9.png)
上記の画面（Run Configrations）にて画像のように設定します。これでnodeのプロセスを立ち上げることができます。
![SS2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3342/36d91c99-bd87-95a6-9585-4b0c8bf1757e.png)
次にJavascriptのデバッグ実行情報を設定します。これで立ち上げたnodeのプロセスにアタッチしてJavascriptを実行することができます。

### vscode
![SS4](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3342/00f8e70f-854e-db67-8a52-d3a575014108.png)
vscodeでは上記のプラグインをインストールすることでChromeブラウザを使ってステップ実行することができます。
![SS5](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3342/2924c71a-7067-1380-80c4-90e01d682518.png)
プラグインをインストールした後にターミナルを開いて`yarn start`を実行するとnodeのプロセスが立ち上がります。同時にブラウザも立ち上がるので、ブレークポイントを付けておくと実行を止めることができます。

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

### ちょっとした確認
環境構築に時間をかけたくない場合は以下の方法でサクッと確認したりできます。
Reactは、[jsfiddle](https://jsfiddle.net/)や[codepen](https://codepen.io)で確認することができます。

### Reduxのデータフロー
複数人で開発する時にはReduxを導入した方が良い場合があります。
Reduxのデータフローは慣れるまで時間がかかります。
元ネタどこか忘れてしまいましたが、データフローとしては以下の図がとてもわかりやすいです。
肝はReducerがstateを更新するところだと思います。
その他は他のフレームワークやあるいはjQueryとかでも馴染みがあると思います。
![download.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3342/9e1a816d-b3f8-6084-aefb-3fc47f49647f.png)