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など、お馴染みの設定ファイルを作る必要はないです。

{
  //省略
  "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を付ける。

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

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

"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をまた開きます。

"eslintConfig": {
  "extends": "react-app"
},

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

"eslintConfig": {
  "plugins": [
    "react-pug"
  ],
  "extends": [
    "react-app",
    "plugin:react-pug/all"
  ]
},

[と{がややこしい上に、babelと設定が似ていて、混乱しやすいです。
eslint-plugin-react-pugが、設定の中ではreact-pugと省略されています。

5.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に打ち替えてみて、動くか確認します。

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

ちゃんと表示されました。

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/