search

OpenSourceCTF / website

MIT License
7 stars 3 forks source link

Experiment with Pug in React #3

Closed samhh closed 7 years ago

samhh commented 7 years ago

See: https://github.com/pugjs/babel-plugin-transform-react-pug

samhh commented 7 years ago

Gave it a shot, pretty painful. Unlike Vue, React isn't really designed for use with anything other than JSX. Shame as I really miss Pug... oh well.

sallaben commented 7 years ago

Didn't work out? What were the main issues here? On Wed, Aug 30, 2017 at 10:52 AM Sam A. Horvath-Hunt < notifications@github.com> wrote:

Gave it a shot, pretty painful. Unlike Vue, React isn't really designed for use with anything other than JSX. Shame as I really miss Pug... oh well.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/OpenSourceCTF/website/issues/3#issuecomment-326015690, or mute the thread https://github.com/notifications/unsubscribe-auth/AHV7I7ywIkHr7waJwP_qw9WVM64rKF5wks5sdXccgaJpZM4O1slC .

samhh commented 7 years ago

It did functionally work in my limited local test, but it was just an unpleasant dev experience. With React it feels... hacky.

In React, JSX vs Pug:

JSX:

<h1 className={styles.example}>{this.state.example}</h1>

Pug:

pug`h1(className=${styles.example}) ${this.state.example}`

What Pug should look like (e.g. in Vue):

h1(class=styles.example)= this.state.example

Using it with React, what you gain in dropping closing tags you lose twice over in the lack of syntax highlighting in your editor and the non-standard variable interpolation.

Further, with Vue you just require pug and pug-loader. It works fairly natively via Webpack for want of a better word. With this, it is converted to JSX via Babel leaving a big maintainability concern regards the plugin.

This is the one reason why every time I use React my eye is caught wandering over to Vue... haha.