How to use Pug with React?

Question

Something like:

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

Comitative

Why the downvotes? I hate pug too, but come on .. – Exposure

I continue to develop it. Even made the syntax highlighting. Check out github.com/askucher/lsxc. It does not matter you upvote or downvote you will not be able to change the progress. – Comitative

@Exposure why do you hate it? – Oren

For the record, I love pug. I love all these MD style template languages that make HTML just easier. – Agnate

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.

Pulley

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

Parfleche

This is a good example. I like it but in lsx you can mix sass, livescript and pug. it is quite different thing. – Comitative

These templates gets interpreted as JSX. and using the HOC, you can use css modules and probably any other styling approach you use with JSX. – Parfleche

Answer 3

It's bad idea to use html preprocessor with templating library, which DOM is building in real time, JSX fits better for that. Anyway, after compilation of pug into HTML, you can render it with dangerouslySetInnerHTML property.

Urge

It is not about use html preprocessor with templating. It is about to have same semantic of pug in coffeescript or livescript. – Comitative

The pug would be transformed to js before it reaches the browser. – Disseminule