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

admin管理员组

文章数量:1278910

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 pile 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 ponent 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 {
   ponentDidMount() {
     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

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 pile 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 ponent 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 {
   ponentDidMount() {
     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

• javascript
• node.js
• reactjs
• pug

Share Improve this question Follow asked Jun 18, 2016 at 9:53 Nancy ValentinaNancy Valentina 17311 silver badge66 bronze badges 6

• Pug is piled server-side. – gcampbell Commented Jun 18, 2016 at 9:54
• i'm new in learning react and just trying to use pug, so whats that mean? @gcampbell – Nancy Valentina Commented Jun 18, 2016 at 10:02
• Well Pug is something you pile into HTML on the server. I guess you can use it client-side but it might be a bit slow. – gcampbell Commented Jun 18, 2016 at 10:05
• how to use the client-side? @gcampbell – Nancy Valentina Commented Jun 18, 2016 at 10:20
• See github./pugjs/pug#browser-support, then you can use Pug's API (currently documented at jade-lang./api, but they're gradually renaming stuff to "pug" so the link might change). – gcampbell Commented Jun 18, 2016 at 10:37

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 7

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

I like it because it lets me write my dumb (presentational) react ponents 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 ponents.

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 ponent

import myTemplate from './myponent.pug'

4. Return piled template from render function

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

5. Define a pug to render ponent

#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./p/7610967954a

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 pile 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 piled 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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./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-piler and babel-plugin-transform-pug-to-react. It seems they solved including further react ponents inside the pug template, which might be a desirable tradeoff for them possibly having quirks.

本文标签： javascriptcan i use pug (exjade) with react frameworkStack Overflow