3 ms·

So what is JSX if not DSL? (Yeah, you can use React without JSX, but still.)

• kentor 10y ago
  You can think of it as sugar for `React.createElement()`, and some other stuff (like spread) but that's it. It's really easy to translate into javascript in your head. Why is this good? 1. Let's say I want to stick a debugger in my template or render function. How would you do it in Vue? Angular? I don't know, gotta look it up, not even sure if possible. How would you do it in React? I don't have to look anything up, I just have to think (use an iife): <div> <SomeComponent debug={(() => { this.state; debugger; })()} someProp="prop" /> </div> 2. Let's say I want to use Immutable.JS instead of plain js arrays. How would I iterate over an immutable list in Vue. In Angular? I don't know, probably have to download some third party directive. React: <ul> {immutable.toSeq().map(x => <li>x</li>)} </ul>
  • swsieber 10y ago
    You can totally use JSX with Vue.
  • nailer 10y ago
    I use ractive, which uses a virtual DOM and simple mustache templates. I'd use a ractive expression to do the debugging. People seem to think using a familiar templating language excludes using the full power of JavaScript. It doesn't.
  • deleted 10y ago
    [deleted]
  • randomnumber314 10y ago
    >How would you do it in Vue? {{ data | json }} will give you formatted json output of the data object (i.e. state/props) In reality you can put anything that's in the Vue object's scope between curly braces, pipe it through the json filter. >immutable list in Vue <li class="for-example" v-repeat="item in list">{{item}}</li>
    • masklinn 10y ago
      > {{ data | json }} So neither debugger support nor printf-debugging, you just have to hope you'll be dumping garbage in a place where it can be seen and doesn't break the page entirely? > <li class="for-example" v-repeat="item in list">{{item}}</li> Ignoring that vue changed the name of the directive a while ago[0] that doesn't even remotely work, according to its documentation v-for (née v-repeat) works on native arrays, it's not going to work in any sensible manner on immutable.js structures. [0] https://github.com/vuejs/vue/issues/1200 https://github.com/vuejs/vue/issues/1200
• rakoo 10y ago
  JSX is a DSL for creating HTML, a "language" that has very little custom logic. Vue.js and Angular.js are DSL for creating custom logic, which will always pale in comparison of an actual language designed for custom logic like javascript
• walterstucco 10y ago
  It's markup mixed with code. a DSL is a different thing
• brlewis 10y ago
  Technically it's a DSL, but the experience of learning and remembering it is not the same as your typical DSL because there's so little JSX-specific syntax.
• ufo 10y ago
  The nice thing about JSX is that it is an embedded DSL. When you use JSX you can take advantage of all of Javascript: variables, loops, conditionals, subroutines, closures, etc. The bad thing about most other template DSLs is that they recreate all of these features from scratch, often in buggy ways. For example, many template DSLs have dynamically scoped variables instead of lexically scoped ones.
• seangrogg 10y ago
  It's a sugar over React.createElement which is just a souped up document.createElement. JSX: <div className="classy" onClick={this.handleClick} /> No JSX: React.createElement('div', { className: 'classy', onClick: this.handleClick, }); Native (note this naive implementation lacks proper scoping): var el = document.createElement('div'); el.className = 'classy'; el.onclick = handleClick; This has been available on all major browsers for quite some time, React just provides some convenience around it and a sugar for those that prefer code that looks like HTML because people tend to (fairly, imo) associate their HTML with the state of the DOM.