Hacker News new | ask | show | jobs
by fforw 4545 days ago
There's quite a functional overlap between many uses of jQuery and what React does.

Ignoring animations and ajax, the core functionality of jQuery orients itself to the concept of progressive enhancement (http://en.wikipedia.org/wiki/Progressive_enhancement), you have a basic functionality of a page in HTML and you enhance that with scripts for better user experience. Hence most of jQuery methods follow the operations required for progressive enhancement: finding DOM stuff and changing it, registering events etc.

This is what in the end conflicts with the design of React. React is (again ignoring server-side-js prerendering) an all-or-nothing approach. The whole dynamic part of the DOM is constructed out of the virtual DOM. There is no no need to find DOM elements, because the React way would just relink your component to the real DOM result of its previous rendering or you find DOM elements of child components via React refs. To follow React design, you only change the real DOM directly if you need to step outside of React to e.g. integrate another library. The normal modus operandi is to just render new new virtual DOM based on your props / state.

You can do some meaningful things with combination of React and jQuery, e.g. just use jQuery's focusin/focusout to make up for the lack of bubbling focus support in React. Mostly though you shouldn't need to -- by design.

1 comments

> just use jQuery's focusin/focusout to make up for the lack of bubbling focus support in React

I believe the focus event bubbles just fine in React. If not, please file a bug.

It's not really a bug for the same reasons that jQuery implements focus/blur independently from focusin/focusout. focus events just don't bubble out natively so you have to make your synthetic event system do that if you want / need it. jQuery implements it as a separate pair of events, React chose not to / only deviates from DOM behavior in very few instances (onchange). Using jQuery was just easier for my use case which seemed too exotic to claim any kind of general relevance.
See a working example: http://jsfiddle.net/spicyj/3tn45/
Might be a good idea to document stuff like that ;)
Yes, React's synthetic event system is supposed to bubble for focus.