web-dev-qa-db-fra.com

Comment utiliser pug avec react?

Comment utiliser le pug et réagir ensemble?

Quelque chose comme

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

Vous pouvez utiliser pug-as-jsx: https://github.com/bluewings/pug-as-jsx-loader

Vous trouverez les étapes pour le faire ici: puis-je utiliser pug (ex-jade) avec framework framework?

Un blog à ce sujet: https://medium.com/nishantsblog/pug-templates-for-react-presentation-components-7610967954a

1
Nishant

Je vois que cette question est assez ancienne, mais si vous cherchez toujours la réponse, il existe un plugin officiel pour babel, qui transpile le pug en jsx: https://github.com/pugjs/babel-plugin -transform-react-pug

Par exemple:

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

    button(onClick=props.notify) Click Me
`

Fournira similaire à ceci:

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

Il y a plus d'exemples dans le référentiel.

0
ezhlobo