5 ms·

I really enjoy React's concepts. I have but one nit to pick with it and it's meta: mixing grammars in a single buffer really hoses syntax highlighting & indenta

I really enjoy React's concepts. I have but one nit to pick with it and it's meta: mixing grammars in a single buffer really hoses syntax highlighting & indentation in emacs. I'd much prefer to be able to "require" the JSX where I need it and have the right context passed to it. That way all the editor-specific nonsense can just be avoided.

machty 12y ago
The problem with this is that whatever you require() won't close over other variables/imports unless your preprocessor is straight up compiling JSX into JS and inserting into another JS file, which is kinda gross and eval-y.
arnemart 12y ago
This can be avoided by just not using JSX. The React DOM API is not really that hard to use.
- kansface 12y ago
  Its not hard, but it is rather verbose :(
  - dugmartin 12y ago
    It's pretty concise using Coffeescript: http://blog.vjeux.com/2013/javascript/react-coffeescript.html http://blog.vjeux.com/2013/javascript/react-coffeescript.htm...
  - pselbert 12y ago
    As @dugmartin mentioned, it's really quite nice if you are using coffeescript. It ends up resembling templating in a lisp, something akin to hiccup for example. I imagine a similar effect can be had with ES6 destructuring assignment, just with more commas and mandatory array brackets.
kansface 12y ago
This also causes quite a bit of trouble with linting.
- jergason 12y ago
  https://www.npmjs.org/package/jsxhint https://www.npmjs.org/package/jsxhint is a drop-in replacement for jshint that supports jsx syntax.
lhorie 12y ago
You could look into Mithril (a smaller React-like framework). It mixes JS and CSS syntax to achieve terseness, and it does so within the rules of valid javascript: m(".form-group", [ m("input.form-control[placeholder='Name']") ])
- k__ 12y ago
  I think using m() with CoffeeScript or LiveScript results in much more concise code than React.DOM. with JSX. Well, you got to like semantically significant whitespace for this. On the other hand, Mithril offers something like JSX, so the <> and ; crowd should be happy.
kaonashi 12y ago
There is a jsx-mode on elpa that seems to work pretty well. At least it does for me.

machty 12y ago

The problem with this is that whatever you require() won't close over other variables/imports unless your preprocessor is straight up compiling JSX into JS and inserting into another JS file, which is kinda gross and eval-y.

arnemart 12y ago

This can be avoided by just not using JSX. The React DOM API is not really that hard to use.

kansface 12y ago
Its not hard, but it is rather verbose :(
- dugmartin 12y ago
  It's pretty concise using Coffeescript: http://blog.vjeux.com/2013/javascript/react-coffeescript.html http://blog.vjeux.com/2013/javascript/react-coffeescript.htm...
- pselbert 12y ago
  As @dugmartin mentioned, it's really quite nice if you are using coffeescript. It ends up resembling templating in a lisp, something akin to hiccup for example. I imagine a similar effect can be had with ES6 destructuring assignment, just with more commas and mandatory array brackets.

kansface 12y ago

This also causes quite a bit of trouble with linting.

jergason 12y ago
https://www.npmjs.org/package/jsxhint https://www.npmjs.org/package/jsxhint is a drop-in replacement for jshint that supports jsx syntax.

lhorie 12y ago

You could look into Mithril (a smaller React-like framework). It mixes JS and CSS syntax to achieve terseness, and it does so within the rules of valid javascript: m(".form-group", [ m("input.form-control[placeholder='Name']") ])

k__ 12y ago
I think using m() with CoffeeScript or LiveScript results in much more concise code than React.DOM. with JSX. Well, you got to like semantically significant whitespace for this. On the other hand, Mithril offers something like JSX, so the <> and ; crowd should be happy.

kaonashi 12y ago

There is a jsx-mode on elpa that seems to work pretty well. At least it does for me.