create-react-appからpugまで（その1）

その2
https://qiita.com/DaisukeNishi/items/e93a3448668f65df7a91
その３
https://qiita.com/DaisukeNishi/items/697fb3579d7dd69324b3
その4
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`の中に良い感じに書いてあるようです。

##2.yarn ejectする

```
$ yarn eject
```
片道切符で「初心者モード」が終わってしまう`yarn eject`です。
これをやる前後で、変更などはコミットしておくと、ejectが失敗しないです。

プロジェクトのフォルダの中に`webpack.config.js`などの
ファイルが沢山出てくるのですが、今回あんまりそれは関係なくて、
`package.json`に色々な設定が出てきます。

なので、ほとんど`package.json`だけ触ればよくて、
新たに`.eslintrc`とか`.babelrc`など、お馴染みの設定ファイルを作る必要はないです。

```package.json
{
  //省略
  "eslintConfig": {
    "extends": "react-app"
  },
  //省略
  "babel": {
      "presets": [
      "react-app"
    ]
  }
}
```
関係ない部分は、エディタの左の▽で畳んでおくと分かりやすいです。

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

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

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

```package.json
"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`いれてあります。
もし「鍵マーク」が表示されたら、自分のパスワードをいれます。
そして、インストールが終わったら`package.json`をまた開きます。

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

↓こちらを下記のようにする。

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

##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.調べてて思った事
エラー内容で検索して調べていくと、`Typescript`の質問と回答が圧倒的に多いので、
「そのエラーは型宣言が・・」みたいなのが多い。多分`React`使う人はデフォルトで`ts`を使うっぽいので
`ES6`で書く初心者にとっては、なかなかツラいものがありそうだと感じました。

あと`babel`が最近`@babel`になって、欲しいのと違うプラグインの方が検索上位に来たりします。
`React`に関しては`Qiita`と`Teratail`より外国のオッサンの方がズバリ解決策を示している事が多いので、
英語のページを頑張って読む方が、逆に速いかもしれないです。

Youtubeで日本語でReact入門を解説している人の動画がありました。
お金払って`Udemy`とか見たほうが良いのかもですが、
最初のとっかかりとしては無料の`Youtube`も結構良いなと思いました。
https://www.youtube.com/watch?v=xJAqa0U_X50&list=PLh6V6_7fbbo9HNwl5htJOIV48JUgwWQVS&index=1

以上です。

###参考記事
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/