create-react-app で始めたプロジェクトで、pug を使う

create-react-app をして作ったプロジェクトで、pug を使う方法。
基本的なことなのだが、日本の記事があまりないようなので書くことにする。

pug の書き方

pugという関数でタグ付けされたテンプレートリテラルを使う書き方になる。

テンプレート文字列 - JavaScript | MDN

変数 logo には、{} をつけない。
テンプレートの終了が、.App と同じ位置にないと、
'pug' is not defined no-undef と関係ないエラーが出るのはとても厄介。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (pug`
    .App
      header.App-header
        img.App-logo(src=logo alt="logo")
    `);
}

export default App;

必要なパッケージ追加

$ npm i -D babel-plugin-transform-react-pug babel-plugin-transform-react-jsx

package.json へ設定を書けるようにする

$ npm run eject

babel の設定を追加

package.json

  "babel": {
    "presets": [
      "react-app"
 +    ],
 +    "plugins": [
 +      "transform-react-pug",
 +      "transform-react-jsx"
    ]
  }

万が一エラーが出た場合、こちらが参考になるかもしれない

javascript - how to use pug templating engine with reactjs - Stack Overflow