Aug 25 - Top 3 React articles
Here are your curated resources for the week.
1. Animating list reordering with React Hooks by Tara Ojo
While it can be straightforward to do a whole load of animations and transitions with CSS, it’s not straightforward to find an example of animating the reordering of list items.
I found this difficult to do using React hooks because my component would automatically rerender, in its new order, when it got new data. I was trying to hook into the moment before rerendering to smoothly transition from one state to another. Without the componentWillReceiveProps function call from the class components, this was hard to do.
2. Build a simple FLIP animation in React by Travis Arnold
The FLIP (First Last Invert Play) technique allows for declarative and performant animations. In this article, we will look at a simple way to implement this method using React.
When building user interfaces, we should be able to do so declaratively, allowing us to easily express what we want, rather than how we get there. CSS is declarative by nature, but we can’t performantly animate layout without causing reflow and repaints, which in turn causes a laggy (also known as janky) experience. While this should be true for layout animations, they are inherently tricky and require some magic to make them performant.
3. Building a Button Part 1: Press Events by Devon Govett
While building components has become much easier with modern UI frameworks like React, handling interactions across devices and supporting proper accessibility and internationalization is still extraordinarily difficult. Building UIs has a very long tail: it’s fairly easy to get the basics for a given component working, but there are many details to consider, and these add up to a majority of the work.
Sponsor: Razorpay - Come help build the FinTech of the future
Ever thought about what it takes to build a friggin’ bank? How about building a checkout experience for someone sitting in Mattur - a village that only speaks Sanskrit? Yes? No? Doesn’t matter, we want to talk to you.
Want to share this with a friend? Use this link