React-dnd: Please add plain ES5 examples

Created on 19 Jun 2015  ·  32Comments  ·  Source: react-dnd/react-dnd

Not all of us have the luxury of using newfangled ES7 syntax, it would be a lot of help for newcomer information overload if there could be a couple working examples that didn't introduce all these new language features (especially experimental features like ES7 decorators) in the examples. The usefulness of examples is diluted when cluttered with experimental language features.

Edit from maintainer: please track them here:

Most helpful comment

Forcing people to learn ES6 (and worse, ES7) syntax just to understand your example code is _hostile_ at _best_. This looks like an amazing module. Why not at least export the ES5 version of _one_ of your examples into an ES5-example folder for the uninitiated. Saying you'll accept a PR isn't helpful, as the people asking for the examples are likely unfamiliar with ES6 and ES7 to begin with!

Le sigh.

All 32 comments

I'm happy to accept such contribution.

The tutorial examples are all offered in ES5, ES6 and ES7:

Every doc page also has examples in ES5, ES6 and ES7:

Unfortunately I didn't have the time to port all the example code, but this should help you get started.

There are ES5 examples on the documentation site.


I'm referring to the complete, functional examples in the github repo.

I agree ES5 examples with optional ES6/7 would be preferable until ES6/7 is mainstream. It will be easier to learn react-dnd if you don't have to learn a new programming language at the same time + transpiling to ES5 to make the code run.

I'd argue ES6 is already mainstream with the language being finalized and Babel used in tons of projects.

Forcing people to learn ES6 (and worse, ES7) syntax just to understand your example code is _hostile_ at _best_. This looks like an amazing module. Why not at least export the ES5 version of _one_ of your examples into an ES5-example folder for the uninitiated. Saying you'll accept a PR isn't helpful, as the people asking for the examples are likely unfamiliar with ES6 and ES7 to begin with!

Le sigh.

I agree with the guys here, @gaearon you should not force people to learn ES6/ES7 just to understand how the library works.. This could lead people to use another library instead.
This library is amazing, the only thing I have to argue against it is this topic. I'm not a JS expert (I'm a Ruby dev) so it's hard to me to understand the examples, just because you're using another syntax (I'm not against the new syntax, but when developing a library you should adopt mainstream standards), which is ridiculous..
If you want this library to be the standard DnD library for React, you must correct this. Otherwise I'm afraid people will use another "easier" solution no matter whether it is better or worse than yours..

just because you're using another syntax

FYI, this is not another syntax, It's ES6, which is JavaScript. And if you have problem with ES6 syntax then you must also have problem with react, because it is actually another syntax.

but when developing a library you should adopt mainstream standards

ES6 is becoming mainstream. io.js and react itself has support for ES6

You're mistaken.

  1. Check out Wikipedia:

In computer science, the syntax of a computer language is the set of rules that defines the combinations of symbols that are considered to be a correctly structured document or fragment in that language


ECMAScript 2015 (6th Edition) is the current version of the ECMAScript Language Specification standard

Yes both ES5 and ES6 are JS, but the syntax is different.

ES6 is becoming mainstream. io.js and react itself has support for ES6

"Becoming" and "support for" denotes you know ES6 is not mainstream yet.. It will, eventually, but in the meantime you should give examples in ES5.

If you want ES5 examples so badly why don't you guys make an effort of contributing it yourself. @gaearon is very busy person and works on this library in his spare time. So instead of demanding try to contribute, so that others also can benefit from it.

Guys, project owner, gaearon, is not forcing anyone to anything.

gaearon has already done a tremendous work on this lib. Project is open source, and offered for free. Accusing him of being hostile, or like he owns the users anything is kinda hostile IMHO.

He stated he doesn't have time to port the examples to es5, and he is open to contributions. There are already examples in es5/6/7. And to be honest, syntax is not that different.

Also, you can use a transpiler, like babel, to transform the es6/7 code to es5, and use it, examine it or learn from it.

Nobody is forcing people to use react-dnd, nor it's the purpose of this library to be the 'one and only' solution.

@hakanderyal exactly my point!

@hakanderyal we're not discussing that.. you're right, we all thank @gaearon for the tremendous work in this project.

We know there was no malicious intention to write the examples in ES6. Personally I'm not accusing anybody of this. Nevertheless I believe this issue shows us there is a need of ES5 examples.

Yes, we could use Babel, but in some cases you don't want to add more complexity to your project adding more libs just because the examples you have require them. I'm using React and ReactDnD in a Rails project and honestly I don't want to deal with more transpilers and stuff just to run my code..

Also, some people (myself included) are not JS experts, so I think it'd be nice to keep things as simple as posible.

Any existing contributor or a new one could take the lead on this issue and start adding some examples, not only @gaearon

@bismark64 @jeffreywescott @emergentcypher See #214

:+1: Outstanding @vkbansal! Thank you!

Thanks, @vkbansal -- you rock!

Hey folks.

I spent weeks and nights of my personal time working on this project and its docs website which is the only JS library website I'm aware of that shows ES5, ES6 and ES7 code examples on every doc page that contains some code. I'm sorry I didn't quite live up to your expectations with the examples themselves!

When I get some free time after spending weeks and nights of my personal unpaid time working on my React Europe talk, I might consider your request. In the meantime please use another library or ask somebody to help you out with ES5 examples.

Here's a few things I suggest you do when you get some free time:


PS Huge thanks to @vkbansal.

Hi Gaearon,

Releasing your code for public use is very much appreciated by the majority of people using it.

You're pushing things 'forward' and doing it in a public way .. neither of which is 'easy'.

I'm totally surprised (and I think most people will be) by the accusations you've received
e.g 'forcing' people.. and being 'hostile'
...especially when you've invited contributions

Your response to these attacks is much more restrained than mine would be given the same provocation.

Please do not be put off by this negative minority

many thanks for the code and the ideas


Please respect my wish to _not_ continue this discussion. I don't want to spam people watching this repo any further.

I'm not locking the issue, but if another comment is posted, I'd expect this to be a useful comment linking to more PRs or something of the sort, not a “discussion” comment. We can twist each other's words forever and “hear both sides” but I don't see the point.

I understand your concern: you need ES5 examples and don't want to learn ES6/7 at the moment. A totally valid position to have. My position at the moment is that I'm _physically unable_ to work on these examples. I might be able to in the future. Right now there is nothing I can do to help you except to point out this great ES6 learning resource (which is how I learned it myself).

Moreover, if I were to focus on these examples I would not have shipped 1.0 at all. It was a necessary cut to get 1.0 out because I had to start working on my talk right after that. You can use React DnD 0.9.2 which is the latest version to have ES5 examples. Note that it differs significantly from 1.0.

Finally, there is a certain open source etiquette, and some of the phrases in above comments violate it. If you don't see that, this is your problem, not mine. Breaking this etiquette is one of the reasons maintainers burn out and desert their popular projects. You might think _your_ complaint was valid and you _meant well_ but it's totally irrelevant. It's really hard to truly understand this until you put sweat and blood into your own project and have a similar problem.

To sum up, if this is a productive thread further on, I'm happy. If it's “who's at fault” I'll lock it.

You're totally right @stooboo and @gaearon. I apologize if my above comments broke this etiquette, and you felt accused or I've been disrespectful to you. I know maintaining such a project involves a lot of effort and time, and you're doing great so far, so I'm grateful for that. My intention was only point out this concern.
Said that, we should pass over this and let this thread evolve as usual..

I feel ashamed and embarrassed. I'm really sorry for my comments, @gaearon. It's no excuse, but this week has been a hard one for me, and in a moment of frustration, I lashed out. Truly sorry, and thank you so much for this amazing library.

Let me also provide some context. The reason examples are not written in ES5 is because the main _reason_ I wrote 1.0 was people having troubles using 0.x from ES6 classes: #109.

It would be silly to release 1.0 “solving” ES6 class problem with no ES6 classes in the examples. Therefore I made a decision to use ES6 further on.

If you are using React, the odds are high that you _already_ have a build step. You need to compile JSX right? (Most people use it.) If you already have a build step, it costs you literally nothing to replace JSX build step with Babel build step. In fact that's what Facebook is going to do too.

I expected I'd have to leave this library “to hang” for a while because I knew I needed to work on my talk. Therefore, I chose to build it _looking ahead, rather than behind_, so it can live some time on its own without my interference.

@jeffreywescott No problem, and you are welcome. Thanks for saying sorry. I really appreciate and I know it can be hard to admit being wrong.


@gaearon @emergentcypher @awarberg @jeffreywescott @bismark64

I followed along with the Tutorial mostly ES5 (because I too am slow to learn ES6, but I will eventually, I'm using JSX, obviously, and destructuring):

Please track the ES5 examples here:

Big thanks to @vkbansal.

Finally got some time to finish it:

It was not my intention to raise people's emotions, I only want to help the library become accessible and I was mostly concerned about the examples containing experimental ES7 features that, even if I'm switching to ES6, still won't be using. I do think it's important to continue pushing the dev community towards ES6 now that it's been finalized and I certainly think @gearon made the right choice in treating ES6 code as his priority, and I apologize if I worded my original comment badly.

To comment on the build steps, my build environment does have a JSX build step, but since my build environment is not Node.js but handled in another language, it's not necessarily as simple as "plugging in" Babel instead of JSX, especially if you're working on a team where you aren't necessarily responsible for the build.

Thank you @vkbansal and thank you @gaearon for all your work in the first place.

  • Whereas the majority of everyone involved is barely coming into ES6,
  • Whereas transpiling from ES7 to ES5 often results in code unpleasant to decipher,
  • Whereas all ES7 functions are still considered experimental,

Please remove all utilizations of ES7

Utilizing ES7 for syntactical simplicity/succinctness only works if everyone involved is cognizant of the historical variants in syntax.

@vkbansal thanks for putting those examples together.

Example of the second item:

Clean Code:

var DragSourceDecorator = DragSource(ItemTypes.CARD, cardSource,
    function(connect, monitor) {
        return {
            connectDragSource: connect.dragSource(),
            isDragging: monitor.isDragging()

var DropTargetDecorator = DropTarget(ItemTypes.CARD, cardTarget,
    function(connect) {
        return {
            connectDropTarget: connect.dropTarget()

module.exports = DropTargetDecorator(DragSourceDecorator(Card));

Transpiled Output (from the example):

Card = (0, _reactDnd.DragSource)(_ItemTypes2['default'].CARD, cardSource, function (connect, monitor) {
    return {
      connectDragSource: connect.dragSource(),
      isDragging: monitor.isDragging()
  })(Card) || Card;
  Card = (0, _reactDnd.DropTarget)(_ItemTypes2['default'].CARD, cardTarget, function (connect) {
    return {
      connectDropTarget: connect.dropTarget()
  })(Card) || Card;
  return Card;

edit: mistakenly referenced @emergentcypher as the es5 example author.

Are you drunk?
Sorry! commented at wrong place!

@adamellsworth Nobody is forcing you to use ES7. If you do not want to use it then don't, but you have no right to tell the author to what to do.

People have every right to make comments! That's the great thing about open source. I don't think saying "please remove" is bossing the author around. If the author didn't want to receive comments and requests, then he shouldn't be publishing work on github.

Since we now have ES5 examples, I'll just close this myself :)

People have every right to make comments! That's the great thing about open source.

@emergentcypher you are right.

@gaearon is fully aware that not all the people are comfortable using ES7, that is why he took the time to put in ES6 and ES5 examples on the website.

If the author didn't want to receive comments and requests, then he shouldn't be publishing work on github.

Yes, author wants to receive comments and feedback but which are constructive.

Asking author to remove something completely just because you don't use it, is equivalent of walking up to your boss and asking him to fire one of your colleagues just because you don't like his/her face.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jacobp100 picture jacobp100  ·  43Comments

playpauseandstop picture playpauseandstop  ·  17Comments

kesne picture kesne  ·  6Comments

dshorowitz picture dshorowitz  ·  15Comments

delijah picture delijah  ·  5Comments