can i use pug (ex-jade) with react framework?

Question

i have read some of pug documentation. its said that i have to install pug first and i'm already done that. then i have to require pug in my js file. but i don't know where to write the compile for pug file in my react files? what is the right steps to use pug in react framework? thanks! i really appreciated any help. here is one of my component in react that i would like to render it with pug.

 import React from 'react';
 import Sidebar from './Sidebar';
 import Header from './header/Header';
 import {tokenverify} from '../../utils/helpers';
 import pug from 'pug';

 class Home extends React.Component {
   componentDidMount() {
     const token = localStorage.getItem('token')
     tokenverify(token)
     .catch((res) => {
       this.props.history.push('/')
     })
   }

   render() {
     return(
       <div className="main-container">
         <div className="col-md-1">
           <Sidebar history={this.props.history} username={this.props.params.username}/>
         </div>
         <div className="col-md-11">
           <div className="row">
             <Header history={this.props.history} username={this.props.params.username} />
           </div>
           <div className="row">
             {this.props.children}
           </div>
         </div>
       </div>
     )
   }
 }

 export default Home

Quipu

Pug is compiled server-side. – Mullin

i'm new in learning react and just trying to use pug, so whats that mean? @Mullin – Quipu

Well Pug is something you compile into HTML on the server. I guess you can use it client-side but it might be a bit slow. – Mullin

how to use the client-side? @Mullin – Quipu

See github.com/pugjs/pug#browser-support, then you can use Pug's API (currently documented at jade-lang.com/api, but they're gradually renaming stuff to "pug" so the link might change). – Mullin

If I'm doing this pug react pairing at client side I would think of using Grunt or Gulp to pre-compile the pug code before inserting it in the react component. – Ocko

Answer 1

I found this project in very early phase of its development : https://github.com/bluewings/pug-as-jsx-loader.

I like it because it lets me write my dumb (presentational) react components as pug templates.

The only JSX functionality it currently supports are iterating and conditional if. Which seems good enough for writing most of the dumb components.

Here are the steps to use it

1. Install pug-as-jsx-loader

npm install pug-as-jsx-loader --save-dev

For next step you will have to eject if you are using create-react-app

2. Tell webpack how to handle pug templates.

In your webpack.config.dev.js,

{ test: /\.pug$/, use: [require.resolve('babel-loader'), require.resolve('pug-as-jsx-loader')] },

3. Import pug template in your component

import myTemplate from './mycomponent.pug'

4. Return compiled template from render function

const MyComponent = ({someProperty, someOtherProperty})=> {
  return myTemplate.call({}, {
    someProperty,
    someOtherProperty
  });
};

5. Define a pug to render component

#my-element
  ul.my-list
    li(key='{something.id}', @repeat='something as someProperty')
      div(className='planet')  {something.name}
      div(className='vehicle')   {something.type}
      div(className='overview') {something.cost} 
      div(className='cancel', onClick='{()=> someOtherProperty(something)}')
        div(className='no-mobile fa fa-remove')

A read about my experience : https://medium.com/p/7610967954a

Marjoram

Answer 2

With Pug, you have two options: render template to HTML string, passing the data object right away or render template to an efficient javascript function that outputs html when passed a data object.

When using pug(alone) with dynamic data, the choice is obviously to compile to function, so that data can be applied on the client.

However, React does not actually consume, or send to the client, html. If you read an explanation of JSX, you will see that it is just HTML-lookalike syntactic sugar that gets compiled to a javascript function that programmatically creates DOM nodes (essential for the way React handles diffing and updating the page). Pug at the moment, even on the client, outputs an HTML string. Hence, the only way we will be able to use it is dangerouslySetInnerHTML as following:

//from https://runkit.io/qm3ster/58a9039e0ef2940014a4425b/branches/master?name=test&pug=div%20Wow%3A%20%23%7Ba%7D%23%7Bb%7D
function pug_escape(e){var a=""+e,t=pug_match_html.exec(a);if(!t)return e;var r,c,n,s="";for(r=t.index,c=0;r<a.length;r++){switch(a.charCodeAt(r)){case 34:n="&quot;";break;case 38:n="&amp;";break;case 60:n="&lt;";break;case 62:n="&gt;";break;default:continue}c!==r&&(s+=a.substring(c,r)),c=r+1,s+=n}return c!==r?s+a.substring(c,r):s}
var pug_match_html=/["&<>]/;
function pug_rethrow(n,e,r,t){if(!(n instanceof Error))throw n;if(!("undefined"==typeof window&&e||t))throw n.message+=" on line "+r,n;try{t=t||require("fs").readFileSync(e,"utf8")}catch(e){pug_rethrow(n,null,r)}var i=3,a=t.split("\n"),o=Math.max(r-i,0),h=Math.min(a.length,r+i),i=a.slice(o,h).map(function(n,e){var t=e+o+1;return(t==r?"  > ":"    ")+t+"| "+n}).join("\n");throw n.path=e,n.message=(e||"Pug")+":"+r+"\n"+i+"\n\n"+n.message,n}function test(locals) {var pug_html = "", pug_mixins = {}, pug_interp;var pug_debug_filename, pug_debug_line;try {;var locals_for_with = (locals || {});(function (a, b) {;pug_debug_line = 1;
pug_html = pug_html + "\u003Cdiv\u003E";
;pug_debug_line = 1;
pug_html = pug_html + "Wow: ";
;pug_debug_line = 1;
pug_html = pug_html + (pug_escape(null == (pug_interp = a) ? "" : pug_interp));
;pug_debug_line = 1;
pug_html = pug_html + (pug_escape(null == (pug_interp = b) ? "" : pug_interp)) + "\u003C\u002Fdiv\u003E";}.call(this,"a" in locals_for_with?locals_for_with.a:typeof a!=="undefined"?a:undefined,"b" in locals_for_with?locals_for_with.b:typeof b!=="undefined"?b:undefined));} catch (err) {pug_rethrow(err, pug_debug_filename, pug_debug_line);};return pug_html;}
// pug source: "div Wow: #{a}#{b}"
// this would obviously be much shorter if you include pug-runtime globally in your application

function createMarkup(a,b) {
  return {__html: test({a:a,b:b})};
}

function MyComponent(props) {
  return <div dangerouslySetInnerHTML={createMarkup(props.a, props.b)}/>;
}

ReactDOM.render(
  <MyComponent a="banana" b="&patata"/>,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id=root />

Alternatively, there are attempts to translate jade or pug syntax into react directly, such as pug-react-compiler and babel-plugin-transform-pug-to-react. It seems they solved including further react components inside the pug template, which might be a desirable tradeoff for them possibly having quirks.

Rhumb