up until now ive only being using node express pug directly but i have just discovered pugjs/babel-plugin-transform-react-pug which effectively pre transpiles your pug into jsx then react
node pug ssr
node -> express -> pug => browser
https://pugjs.org/api/reference.html
node react pug ssr squared
node -> babel -> pug -> jsx -> react -> bundle => browser
pugjs
/
babel-plugin-transform-react-pug
A plugin for transpiling pug templates to jsx
babel-plugin-transform-react-pug
Use Pug templates to write react components.
babel-plugin-transform-react-pug is a plugin for babel which transpiles pug syntax within template literals to jsx.
Write your components this way:
export const ReactComponent = props => pug`
.wrapper
if props.shouldShowGreeting
p.greeting Hello World!
button(onClick=props.notify) Click Me
`And it will be transpiled into:
export const ReactComponent = props => (
<div className="wrapper">
{props.shouldShowGreeting ? (
<p className="greeting">Hello World!</p>
) : null}
<button onClick={props.notify}>Click Me</button>
</div>
)Usage
Syntax
Full information of the syntax you can find in…
Top comments (0)