I just started my second Meteor app, and I (somewhat regrettably) decided to “front-end” it with React because I loved the idea of jsx component based architecture for my app. I suppose I should have researched the frameworks better before I started, but now I’m trying to add some basic JQueryUI like behaviors, and holy crap, there just isn’t anything available. Specifically, I’m looking for a native React calendar, like FullCalendar (by native, I mean written purely in/for React, not the mobile thingy), and support for Drag and Drop similar to JQueryUI Sortable, that works both on mobile and web clients (even mobile web clients, why the hell not?). I’m dramatically underwhelmed by the number of components written that “just work” on React with Meteor. When I look at Atmosphere or even Angular, I see a deluge of packaged components that do these things. Why isn’t anyone posting these things written for React if it’s so awesome? And the ones that do, why do they depend on webpack, which afaict, pukes in Meteor. What is the right way to go about this, because I’m super frustrated and really confused by all the React-is-awesome fanboi stuff right now. Thoughts/Help?
Similar situation here… Specifically, I’ve been stuck trying to find a good Drag and Drop for complex React components. So far I’ve found a lot of options out there, but they mainly range from half-baked to almost-but-not-quite-good-enough.
I’m going back to jQueryUI Sortable for D-n-D now. My plan is to catch the update from it and cancel it, then just update the state and let React take over from there, e.g.: http://www.sawyerh.com/writing/using-jquery-ui-sortable-with-react/
Post back if you find good components or work-arounds.
I tried that one (React DnD), but it worked poorly for my high order components; the default drag preview normally provided by the browser wouldn’t show at all with my HOC’s (even when wrapped with plain div’s as suggested by the author).
Another close-but-not-quite for me was: http://cheton.github.io/react-sortable/ This definitely looks like one of the most promising React sortable implementations, but it failed to work for my use case.
React-Sortable is based on https://github.com/RubaXa/Sortable which is also pretty promising. I think this one might work for me, but in my testing I wasn’t able to figure out the magic combination to get it all the way there. It seemed like it would eventually perform as well as jQueryUI Sortable, but it was going to take a lot of work to make it happen.
Which brought me full circle back to jQueryUI Sortable. It works great (outside of React), it’s well documented, extremely easy to use, and it’s been around long enough to have polished out the corner cases that a lot of other options fail on (scrolling at screen edge, complex components, previews, etc). It’s one failing is that it mutates the DOM… and that’s actually a pretty easy issue to fix (at least at first glance).
I have to agree with the OP’s sentiment: It seems that basic stuff like this should be a no brainer in React by now. For whatever reason though, React seems to have a long way to go to catching up with what was previously regarded as basic functionality in the “old world.”
In spite of that, I love the philosophy under pinning React. Your data is the source of truth and the view is just a visual representation of the state. Working with React (and it’s problems) as altered my way of thinking about applications for the better. Even if my next project uses Blaze, I’ll definitely carry forward many of the React concepts.
Ok, instead of a general observation/complaint, I think it may be more productive to reframe this as a direct question:
Is React, and specifically, React in Meteor, a mature enough platform to create a rich, interactive user experience with basic functionality like drag and drop, sortable lists, real-time communication, mobile-first “reactive” layout, account management, calendar/scheduling, etc.? Or would we be better served by building directly in Blaze with JQueryUI or in Angular, which seems to have a robust set of mature components to build from?