Zelda, Watering your Lawn with React, and a new react-query release
From now on, React Newsletter will be coming at you every Tuesday instead of Thursday. If you’re interested in a weekly breakdown on other frontend technologies, be sure to check out our other newsletters.
This article gives some good ideas for React projects that are a little more unique than most project ideas. It also gives some instructions and resources for getting started with each one.
Lazy-loading images (like those in Medium or those created by gatsby-image) can sometimes add an extra touch of style to a page. To create such an effect, one will need A) a tiny version of the image for preview, ideally inlined as data URL, and B) the aspect ratio of the image to create a placeholder to prevent reflows. In this article, Jason will share how he created a lazy-loading image component with React Hooks.
This intermediate-level tutorial demonstrates how to use React, Tailwind CSS, and Framer Motion to replicate the Zelda BOTW pause screen. Not totally realistic because there aren’t 250+ apples in the inventory, but other than that it’s great.
This tutorial walks through setting up a workflow that will be responsible for automatically testing the source code, generating a test coverage report and uploading it on Codecov, and building and deploying the project on GitHub Pages.
Some people make bread during quarantine, Patrick made an open-source irrigation system and app using React, Node, and some Raspberry Pi’s.
A nice Hooks abstraction over the Web Animations API.
This release updates Immer to v7.x, adds new options for defining "matcher" and "default case" reducers, and adds a new option for adding middleware to the store.
react-query v2.0.0
This new release from Tanner Linsley includes better query invalidation & re-fetching, less over-fetching, simplified dependent query syntax and new idle query state, multi-instance polling and more
This video was created by the creators of React Hook Form and shares some of the new features and changes coming soon to the library, which include better TypeScript support, reducing the weight of the library, and introducing a few new features.