ES5 examples about react-dnd

[gaearon]

Hi,

I'm sorry if this causes frustration. When I just started this library, I assumed it's no big deal to add harmony flag to the JSX transform you're probably already using. I'm happy to lose you an hour but get you to use ES6 instead, because frankly it's a better language, but I'm sorry if this causes you more trouble than it's worth.

I don't really plan on rewriting examples to ES5 (it's time to move on, we've been stuck with ES5 for far too long!) but I only use a few language features anyway, and all of them are just syntactic sugar:

// destructuring
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring
var { something } = obj; // ES6
var something = obj.something; // ES5


// concise method definition syntax
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_6
var Something = {
  doSomething() { } // ES6
}

var Something = {
  doSomething: function () { } // ES5
}


// fat arrows (lambas)
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
var card = this.state.cards.filter(c => c.id === id)[0] // ES6
var card = this.state.cards.filter(function (c) { return c.id === id; })[0] // ES5


// template strings
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings
var transform = `translate3d(${this.props.left}px, ${this.props.top}px, 0)` // ES6
transform = 'translate3d(' + this.props.left + 'px, ' + this.props.top + 'px, 0)' // ES5

I don't think I'm using any other ES6 features, please correct me if I'm wrong. It takes less than an hour to get used to them, but in my opinion they give you more concise code in a lot of cases.

Is there a reason you can't enable Harmony transforms in your JSX?

[gaearon]

I'll close the issue for now. Let me know if you have more questions!

[gabssnake]

(Really late)

Thanks for taking the time to answer with examples and some quality explanation, it actually helped me make the move to ES6.

With the project at hand, I wasn’t ready to enable ES6 (people weren’t open to changing settled parts of the software at that point in time), so I couldn’t test the examples with the workflow we were using.

Anyway, things went well.

I’ll be happy to make a PR with the examples in ES5 if there is interest in that.

[gaearon]

I'm currently doing a big rewrite and it's all ES6, so there's no point in going back to ES5. You can always look at the compiled code to see how to write the same in ES5 though.

ES6 is not destructive; you can enable the transformation and nobody will notice. Keeping using ES5 at this point is just unnecessary stagnation.