Add section documenting babel-plugin-react-pug usage

[ForbesLindesay]

This page should look along the lines of:

react-pug

You can use pug to generate react templates. This is supported via a babel-plugin. To use it, you need the following two plugins in your .babelrc:

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

You can install them via:

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

Usage

To use react-pug, you just declare a tagged template literal:

import React from 'react';
import ReactDOM from 'react-dom';

function HomePage() {
  return pug`
    div
      h1 Home Page
      p Some content
  `;
}

ReactDOM.render(
  pug`HomePage`,
  document.getElementById('container'),
);

babel-plugin-transform-react-pug will convert the pug code in template literals into JSX.

Editor Support

In brackets you just install the pug plugin. In atom, install language-babel and the pug plugin, then configure the template literal tag in langauge-pug (this needs documenting properly).