Guess what, I’m writing this blog post from my home in Delhi! I’ll be in India for full 2 weeks where apart from visiting my family, cousins and friends I’ll also be giving my visa interview - which is the main reason why I’ve taken a vacation.
As I had been traveling the progress this week has been rather minimal. Keeping the travel schedule in mind, I had kept the goal to be reasonable which was upgrading the react-surveyman project to use React-DnD’s latest 1.x version.
If you’ve been following the progress of the project closely then you’re probably aware the that React-DnD is the drag-and-drop library for React that I use in my projects. Authored by the super productive and super smart, Dan Abramov, React DND abstracts out the various HTML5 drag-and-drop events and gives you a nice way to customize the drag and drop behavior of your React components.
Earlier last month, Dan published the 1.0 release of the library where he made considerable changes in the API. Keeping in the mind the best practices in the React world, the most significant change was replacing mixins with decorators. To understand the motivation behind this change, you can read the blog post written by the man himself.
To be clear, mixins is an escape hatch to work around reusability limitations in the system. It’s not idiomatic React. Making composition easier is a higher priority than making arbitrary mixins work. I’ll focus on making composition easier so we can get rid of mixins. - Sebastian Markbage (React core team)
All in all, the change was quite straightforward, the credit for which goes to the excellent documentation on the website. Dan has worked really hard to make sure that his library is approachable and it clearly shows. The tutorial itself, is so well explained that I’d go to the extent to say that it’s one of the best React tutorials out there.
So after working through the tutorial and the browsing thorough the examples, I was able to successfully port both react-surveyman and the react-tags project to use the latest React-DnD library.