create-react-appからpugまで(その2)

その１
https://qiita.com/DaisukeNishi/items/dae74d5dcf5ddb171b3d
その３
https://qiita.com/DaisukeNishi/items/697fb3579d7dd69324b3
その４
https://qiita.com/DaisukeNishi/items/801e1b1e02487e26e905
その5
https://qiita.com/DaisukeNishi/items/ca7d80c104ca7a792f9d
その6
https://qiita.com/DaisukeNishi/items/c8982546c803d2c5dc99

おなじような事を何回も書いてます。

##pugで書きたい。
`create-react-app`で、めちゃ簡単に`React`で書けるようになってる。
しかし`jsx`を覚えるなら最初から`pug`で覚えたいと思ったが、
いきなりハードルが上がったので、忘れないように反芻して書いておく。

※最初に書いたやり方だと、微妙だったので書き変えます。

##1.create-react-appする
```
$ npm install -g create-react-app
$ create-react-app example
$ cd example
$ yarn start
```
これで`localhost:3000`ができちゃう。
しかし、フォルダの中を見ても`.babelrc`と`.eslintrc`が見当たらない。
`babel`の設定などは、最初の段階では`react-scripts`の中に良い感じに書いてあるようです。

##２．yarn eject しない

```
$ yarn eject //← しない
```
package.jsonの中身を少し変えます。

```package.json
{
  //省略
  "eslintConfig": { //←この項目は消す。
    "extends": "react-app"
  },
  //省略
  "babel": {     //←これは「yarn eject」しなければ出ない。
      "presets": [
      "react-app"
    ]
  }
}
```
色々考え直して、やっぱり`.babelrc`を作ります。

```
$ touch .babelrc
```

`.bashrc`の中身は、同じです。

```
{
  "babel": {
    "presets": [
      "react-app"
    ]
  }
}
```

#####設定を変更する
`react-scripts`は、`.babelrc`を読み込む設定になっていないので、
`/node_modules/react-scripts/config/webpack.config.js`
の中の、
`baberc: false` を `babelrc: true`に編集したい。
#####しかし
`/node_modules/`の値を直接書き換えてしまうと、
あとで色々と困る事になってしまう。

#####なので複製して使う
なので、`react-scripts`をコピーして、
一旦ホームディレクトリ（プロジェクトの外）にペーストします。
`react-scripts-turn-on-babelrc`という名前にし、
`react-scripts-turn-on-babelrc/config/webpack.js`
を開いて`babelrc: false`→`babelrc: true`に書き換えて保存します。

#####Githubに置く
ローカルに保存したままではみんなで使えないので、
自分の`Github`にリポジトリを作ってプッシュします。
https://github.com/daisuke240000/react-scripts-turn-on-babelrc
これを「公開」の状態にしておきます。

`package.json`の中にある
`"react-script": "^3.4.0"`は、削除します、
`"react-scripts-turn-on-babelrc":`を追加します。
右側はバージョンじゃなくて`Github`のリポジトリを書いておきます。

```package.json
"react-scripts-turn-on-babelrc": "https://github.com/daisuke240000/react-scripts-turn-on-babelrc"
```

```shell
$ yarn
```

これで設定変更した`react-scripts`が使えるようになります。
`"start": "react-scripts-turn-on-babelrc start",`に書き換えるのかなと思いきや
そこは書き換えなくても大丈夫のようです。

```package.json
"scripts": {
    "start": "react-scripts start", //←そのままで、動くっぽい
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
```

```
$ yarn start
```

動きます。当然バージョンが違ったら動かないので、
自分がインストールしたものを編集します。

##3.babel-plugin-transform-react-pug入れる

```
$ yarn add babel-plugin-transform-react-pug
$ yarn add babel-plugin-transform-react-jsx
```
依存ファイルを2個入れる。※多分`-D`を付ける。

```babelrc
{
  "babel": {
    "presets": [
      "react-app"
    ]
  }
}
```
↓こちらを下記のようにする。

```babelrc
{
  "babel": { 
    "presets": [
      "react-app"
    ],
    "plugins": [
      "transform-react-pug",
      "transform-react-jsx" 
    ] 
  }
}
```
これは`pug`を`jsx`に変換してくれる書き方です。
必ず`pug`の方が上に来ないとダメみたいです。

##4.ESLintを入れる。

```
$ yarn add eslint
$ yarn add eslint-plugin-react-pug
```
`eslint`本体はejectする時に自動で入るかもしれません。※多分`-D`を付ける。
もし`eslint`をグローバルにインストールしている場合は、
プラグインもグローバルに入れろ、と書いてある。

```
$ sudo yarn add -g eslint
$ sudo yarn add -g eslint-plugin-react-pug
```
環境によってはパーミッションエラーが出る時があるので、`sudo`いれてあります。
もし「鍵マーク」が表示されたら、自分のパスワードをいれます。
そして、インストールが終わったら
`.eslintrc`を作って、そこに`package.json`にあった`eslintConfig`を移します。

```
$ touch .eslintrc
```

```package.json
"eslintConfig": {
  "extends": "react-app"
},
```

↓こちらを下記のように`.eslintrc`に書きます。

```.eslintrc
 {
  "plugins": [
    "react-pug"
  ],
  "extends": [
    "react-app",
    "plugin:react-pug/all"
  ]
},
```
`[`と`{`がややこしい上に、`babel`と設定が似ていて、混乱しやすいです。
`eslint-plugin-react-pug`が、設定の中では`react-pug`と省略されています。

#####webpack.config.jsを書き換える

`eslintConfig`を消しただけでは、向き先が変わらないっぽいので、
先程作ってプッシュした、`react-scripts-turn-on-babelrc`の
中にある`webpack.config.js`をまた書き換えます。

```webpack.config.je
useEslintrc: true
```

これをプッシュして、また入れ直します。

```
$ yarn upgrade
```


##5.App.jsを書き換える。
今更ですが初期表示のロゴマークくるくるは、`App.js`に書いてあります。

```App.js
function App() {
  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"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
```

↓`pug`に打ち替えてみて、動くか確認します。

```App.js
function App() {
  return pug`
    div(className="App")
    header(className="App-header")
      img(src=logo className="App-logo" alt="logo")
      p
        | Edit 
        code src/App.js
        |  and save to reload.

      a(className="App-link" href="https://reactjs.org" target="_blank" rel="noOpener noReferrer")
        | Learn React
  `;
}

export default App;
```

`return pug`の所が、`return (pug`なのか `return pug(` なのか、
どう書けば良いんだろうかと試行錯誤したんですが、結論`(`要らなかったです。
上記のように、シンタックスのハイライトが消えてしまうので、VSCodeなら`vscode-react-pug`
を入れておくとキレイな表示になります。

##6.もう一回ブラウザで確認する
```
$ yarn start
```

ちゃんと表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216132/4b183c45-838b-593d-6732-524d14c8c684.png)

##7.調べてて思った事
これを書いた後に外人はどんなヤリカタしてるんだと思ったら、
どうやら`react-app-rewired`というToolを使っているらしい。

以上です。

###参考記事
http://www.beguru.work/2019/01/06/create-react-app-%E3%81%A7-babelrc%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B/
https://kic-yuuki.hatenablog.com/entry/2019/09/08/111817
https://github.com/facebook/create-react-app

https://stackoverflow.com/questions/56513346/how-to-use-pug-templating-engine-with-reactjs
https://qiita.com/TakuyaHara/items/f560d34aaa7857b32c82
https://www.npmjs.com/package/babel-plugin-transform-react-pug
https://github.com/pugjs/babel-plugin-transform-react-pug#eslint-integration
https://github.com/ezhlobo/eslint-plugin-react-pug
https://html2pug.now.sh/