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']")
])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.
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.
This can be avoided by just not using JSX. The React DOM API is not really that hard to use.
Its not hard, but it is rather verbose :(
It's pretty concise using Coffeescript: http://blog.vjeux.com/2013/javascript/react-coffeescript.htm...
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.
There is a jsx-mode on elpa that seems to work pretty well. At least it does for me.
This also causes quite a bit of trouble with linting.
https://www.npmjs.org/package/jsxhint is a drop-in replacement for jshint that supports jsx syntax.
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.