How to use Pug with React?

Question

Something like:

btn = ({click, text})->
    a.pug.btn(target='blank' on-click=click) #{text}

Answer 1

I see this question is quite old, but if you are still looking for the answer, then there is an official plugin for babel, which transpiles pug into jsx: https://github.com/pugjs/babel-plugin-transform-react-pug

For example:

export default const ReactComponent = props => pug`
  .wrapper
    if props.shouldShowGreeting
      p.greeting Hello World!

    button(onClick=props.notify) Click Me
`

Will provide similar to this:

export default const ReactComponent = props => (
  <div className="wrapper">
    {props.shouldShowGreeting && (
      <p className="greeting">Hello World</p>
    )}
    <button onClick={props.notify}>Click Me</button>
  </div>
)

There are more examples in repository.

Answer 2

You can use pug-as-jsx : https://github.com/bluewings/pug-as-jsx-loader

You will find steps to do it here : can i use pug (ex-jade) with react framework?

A blog about this : https://medium.com/nishantsblog/pug-templates-for-react-presentation-components-7610967954a