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…