5 ms·

Has anyone tried to use a different template engine with React? I was just wondering, since I didn't want to use JSX inline, and writing out html with React.DOM

by iamwil 12y ago

Has anyone tried to use a different template engine with React? I was just wondering, since I didn't want to use JSX inline, and writing out html with React.DOM isn't appealing either. I just wanted a way to put templates in <script> tags that get loaded by React Components. That way, I won't be mixing templates and the behavior of the components. Has anyone done this before?

cnp 12y ago
There's this: https://github.com/mereskin/jsxify https://github.com/mereskin/jsxify But really, once you get used to keeping everything together it really does feel better. You just have to try it out. Personally, since I use CoffeeScript, I like this lib: https://github.com/atom/reactionary https://github.com/atom/reactionary which, since it strips out the required `null` or `{}` first parameter, feels very much like haml or jade.
- iamwil 12y ago
  I use coffeescript too, so I should be able to use reactionary to write the dom helpers it exposes in my JSX. So then the coffeescript -> jsx on server side, then jsx -> javascript browser side, is how it works, right? I think I'm slowly being convinced putting it together in the same file makes sense, since it's a single component, and the what's being displayed is coupled with what you'd do with it, so I guess it should belong in the same place?
  - cnp 12y ago
    Well, the way you should do it is abandon .jsx completely, and just stick to .coffee. Something like this: React.createClass render: -> {div, h1, span} = require 'reactionary' div class: 'home', h1 "Hows it going!" Clean and simple, particularly with CoffeeScripts default return. As far as templates go -- and this is what I always tell people -- structure your code in a clean way which makes the render function pop out and you might as well be working with a separate file! It really does make more sense after a while.
    - iamwil 12y ago
      Cool, I'll give it a shot. I checked out reactionary, why couldn't I just do: {div, h1, span} = React.DOM?
mikewhy 12y ago
There are some conference videos of Peter Hunt where he talks about why this isn't a good idea. - Placing markup and logic in separate places separates languages, not concerns - React/JSX has the full power of JavaScript, not some intentionally crippled lookalike

by iamwil 12y ago

cnp 12y ago

There's this: https://github.com/mereskin/jsxify https://github.com/mereskin/jsxify But really, once you get used to keeping everything together it really does feel better. You just have to try it out. Personally, since I use CoffeeScript, I like this lib: https://github.com/atom/reactionary https://github.com/atom/reactionary which, since it strips out the required `null` or `{}` first parameter, feels very much like haml or jade.

iamwil 12y ago
I use coffeescript too, so I should be able to use reactionary to write the dom helpers it exposes in my JSX. So then the coffeescript -> jsx on server side, then jsx -> javascript browser side, is how it works, right? I think I'm slowly being convinced putting it together in the same file makes sense, since it's a single component, and the what's being displayed is coupled with what you'd do with it, so I guess it should belong in the same place?
- cnp 12y ago
  Well, the way you should do it is abandon .jsx completely, and just stick to .coffee. Something like this: React.createClass render: -> {div, h1, span} = require 'reactionary' div class: 'home', h1 "Hows it going!" Clean and simple, particularly with CoffeeScripts default return. As far as templates go -- and this is what I always tell people -- structure your code in a clean way which makes the render function pop out and you might as well be working with a separate file! It really does make more sense after a while.
  - iamwil 12y ago
    Cool, I'll give it a shot. I checked out reactionary, why couldn't I just do: {div, h1, span} = React.DOM?

mikewhy 12y ago

There are some conference videos of Peter Hunt where he talks about why this isn't a good idea. - Placing markup and logic in separate places separates languages, not concerns - React/JSX has the full power of JavaScript, not some intentionally crippled lookalike