javascript - 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

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