create-react-app をして作ったプロジェクトで、pug を使う方法。
基本的なことなのだが、日本の記事があまりないようなので書くことにする。
pug の書き方
pugという関数でタグ付けされたテンプレートリテラルを使う書き方になる。
変数 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