５分で始めるReact

Reactが何たるかはこの記事では省略します。
VSCodeを利用して、手短に動作環境を作るとこまでが記事の範囲です。

## 事前準備
- Windows10環境で実施してます。
- [Visual Studio Codeのインストール](https://code.visualstudio.com/download)
- [Node.jsのインストール](https://nodejs.org/ja/) 


## Reactアプリを起動
``` terminal
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/319315/5066df21-cc42-6e63-9f92-986ecb9272f5.png)

`Learn React`を`Hello World`に変更して保存
Chromeの場合は、ブラウザのリロードは不要です。

``` src/App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Hello World
          </a>
        </header>
      </div>
    );
  }
}

export default App;
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/319315/a9bd5df8-4228-00bf-2944-c175d33d0d46.png)

まだ３分残ってるので、ESLintの設定もしておきましょう。

## ESLintの設定
```
npm install -g eslint
npm install eslint-plugin-react -g
eslint --init
```
いろいろと質問されるので回答しましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/319315/41fe3930-8a81-1ac6-eafe-63dc65cb4311.png)

ルートに以下のファイルが生成されます。

``` .eslintrc.json
{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "jest": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}
```

VSCodeにESLintのExtensionsをインストール
![image.png](https://qiita-image-store.s3.amazonaws.com/0/319315/56f1d1f4-1a4e-f381-9646-9efb034847b3.png)

無事にEslintが動作すると以下のような感じでエラーが表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/319315/8cbb29a1-5c24-b6a3-4ce0-5c253988dd0d.png)

create-react-appで生成するファイルは、改行コードが`LF`、インデントのスペースの数が`2`つなので
一旦、eslintの設定を変更します。
またReact(+JSX)の記法をエラーにしないために、`env`と`rules`に設定を追加します。

``` .eslintrc.json
{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            2
        ],
        "react/jsx-uses-react": 1,
        "react/jsx-uses-vars": 1,
        "react/react-in-jsx-scope": 1,
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}
```

あと１分残っているので、VSCodeでChromeのデバッグができるようにしておしまいにします。


## Debugger for Chromeのインストール
![image.png](https://qiita-image-store.s3.amazonaws.com/0/319315/a5c8e10f-0cb0-fec0-e641-3a607991d1f3.png)

こんな感じでブレークポイントが設定できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/319315/8d5c1518-16c6-e6e3-de9f-e93b3646f374.png)

Debugを最初に開始すると、`launch.json`が開くので、ポート番号を`8080`から`3000`に変更します。

```
{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}
```

以上です。


## 番外 Proxy環境でこの記事の内容を実施する場合
Proxy環境下でエラーになった場合は、以下の設定をするとたぶん大丈夫です。

```
npm -g config set registry https://registry.npmjs.org/
npm -g config set strict-ssl false
```
何となく気になる方は作業終了後に戻してもよいです。

```
npm -g config delete registry
npm -g config delete strict-ssl
```