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
-
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.
-
Open settings of language-babel in atom
-
Find the field under "JavaScript Tagged Template Literal Grammar Extensions"
-
Enter:
pug:source.pugMore details: gandm/language-babel#javascript-tagged-template-literal-grammar-extensions
-
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
)
`
}
}Example 3 - Creating a Pug Constant
You can create a pug constant that you can simply re-use in your code.
import React from 'react';
class MyComponent extends React.Component {
_onDoOneThing = () => {
console.dir('Do one thing');
};
_onDoAnotherThing = () => {
console.dir('Do Another thing');
};
render() {
const myButtons = pug`
div
button(onClick=this._onDoOneThing) Do One Thing
= ' '
button(onClick=this._onDoAnotherThing) Do Another Thing
`;
return pug`
div
h1 MyComponent
p this component uses buttons from my constant.
div
= myButtons
`
}
}Example 4 - Using interpolation in your Pug Component
If you'd prefer to use interpolation, you can! This is possible by using ${ } within your template.
This lets you benefit from syntax highlighting and linting!
import React from 'react';
const List = (props) => {
return pug`
ul.list(className=${ props.modifier })
${ props.items.map((item, index) => pug`li.list__item(key=${ index }) ${ item }` ) }
`
}