How to use Pug in ReactJS

babel-plugin-transform-react-pug

The official means by which you can use pug in your react components, replaces the use of react-jade when moving to pug.

This plugin transforms the pug inside of your react components.

Installation

npm install babel-plugin-transform-react-pug --save-dev
npm install babel-plugin-transform-react-jsx --save-dev

Usage

.babelrc

{
  "plugins": [
    "transform-react-pug",
    "transform-react-jsx"
  ]
}

Eslint integration

Install eslint-plugin-react-pug to be compatible with eslint-plugin-react.

Syntax Highlighting in Atom

1. Install language-babel and language-pug-jade

   I suggest language-pug-jade because it works better for me. But there are more approaches for building pugjs grammar: language-pug and atom-pug, and you can try them too.

2. Open settings of language-babel in atom

3. Find the field under "JavaScript Tagged Template Literal Grammar Extensions"

4. Enter: pug:source.pug

   More details: gandm/language-babel#javascript-tagged-template-literal-grammar-extensions

5. Restart the atom

Examples

Example 1 - Basic Example

You can now create a react component with your pug inside it.

import React from 'react';

class MyComponent extends React.Component {

  render() {
    return pug`
      div
        h1 My Component
        p This is my component using pug.
    `;
  }
}

Example 2 - Re-using a Pug Component

You can use a pug component in another component.

import React from 'react';
import MyComponent from './my-component'

class MyNewComponent extends React.Component {

  render() {

    const prop1 = 'This is something to pass to another component';

    return pug`
      div
        h1 MyNewComponent
        p This component imports my other component.
        p It could import several of these within the pug.
        MyComponent

        p If I had created a component with props I could pass them from this component.
        AComponentExpectingProps(
          prop1 = prop1
        )
    `
  }
}