4 ms·
Another trick I like is to import the React functions you want all at once {div, ol, li} = React.DOM # global exports div null, ol null,
by tel 13y ago
Another trick I like is to import the React functions you want all at once
{div, ol, li} = React.DOM # global exports
div null,
ol null,
for result, index in @results
{a, span} = React.DOM # local exports
key = doSomeLookup( result, index )
href = otherLookup( key )
li {key}, [span(null, "Hello "), a({href}, "world")]
- weeksie 13y agoExactly what we do and it's eminently readable. Compnents as well end up looking good. div null, RadComponent onClick: @handleClick, model: @props.thing and so forth.
- ssorallen 13y agoI still have to do a mental mapping between this and what will ultimately be generated: HTML. Since JSX is XHTML, the mapping is minimal. This also moves in the direction of web components, which is getting a lot of attention from the Chrome team lately. <div> <RadComponent onClick={this.handleClick} model={this.props.thing} /> </div>
- emn13 13y agoI'm pretty sure that's mostly fairly simple habituation. This is something that's unfamiliar at first - though not hard - and that slows you down. But you'll get used to it really quickly. Syntax like this tends not to matter very much in my experience. What does matter is syntax changes that affect order dependence, and particularly nesting. Those really require changing the way you think - replacing one symbol with another is just a matter of plain & simple practice.
- smrtinsert 13y agoI love destructuring in coffeescript, it's one of the best additions ever made to js.
- jbeja 13y agoIMHO, that looks a little bit confusing, javascript or coffeescript are not lisp. But still i will give it a shot.
- pygy_ 13y agoIf you miss the parens, we can fix it: ({div, ol, li} = React.DOM) # global exports (div null, (ol null, (for result, index in @results ({a, span} = React.DOM) # local exports (key = (doSomeLookup result, index)) (href = (otherLookup key)) (li {key}, [span(null, "Hello "), a({href}, "world")]))) However, assignments and binary operators are still infix, and comas are needed. =^_^=
- pselbert 13y agoThat changes the "feel" of composing without JSX more than anything I've seen so far. Trying to work JSX into my compiling pipeline was an uncomfortable hassle. I'm going to give this a try.
- lowboy 13y agoIf you're looking for a more flexible compilation/build pipeline, I'd suggest gulp[0]. I have a project that uses gulp-react (among other things) and it's blazing fast. Here's my gulpfile[1]. [0]: http://gulpjs.com http://gulpjs.com [1]: https://github.com/jjt/LUXTRUBUK/blob/master/gulpfile.js https://github.com/jjt/LUXTRUBUK/blob/master/gulpfile.js
- mikewhy 13y agoThere's also brunch[1] and react-brunch[2] [1]: http://brunch.io http://brunch.io [2]: https://github.com/darthapo/react-brunch https://github.com/darthapo/react-brunch
- phaedryx 13y agoYup, I like that much better: https://github.com/phaedryx/react-tutorial/blob/master/app/assets/javascripts/components/CommentBox.js.coffee https://github.com/phaedryx/react-tutorial/blob/master/app/a...