#233 — April 7, 2021 |
React Hook Form 7.0 — After two years of work, the latest version of this mature form library has dropped. It features strict typing, reduced package size and improved performance. Already a user? There's a v6 to v7 migration guide aimed specifically at you. React Hook Form |
▶ React Labs: A New Series of Deep Dives into React Core Team Research — A new video series which—for the first time—provides first-hand insight into the React Core Team’s research projects. The series kicks off with discussion of React Server Components which we first covered in-depth in 220 earlier this year. If, for some reason, you can't navigate the tweets in the main link, ▶️ here's a direct link to the YouTube playlist. React Core Team |
New Course: Production-Grade Next.js with Scott Moss — No matter if you’re making a blog, marketing page, or a full-stack app, Next.js has the tools you need. This detailed course runs through everything you need to build a production-ready, full-stack app. Frontend Masters sponsor |
How to Read React Errors — A practical tutorial on how to make sense out of some of the more obscure React error messages. Dave Ceddia |
Recoil 0.2 Released — Recoil is an alternative state management system being worked on at Facebook (though a different team to the React team itself). More info here. Facebook Experimental |
React Hooks for RxJS — Use hooks to interface with RxJS observables for managing sequences of events. LeetCode Open Source |
💻 Jobs |
Wynter Is Looking for Developers to Join Its Research Panel — Give feedback on digital products and landing pages, get paid $15-$50 per survey. Low-key commitment, 10-15 mins per survey. Wynter Research Panels |
Find React Jobs with Hired — Take 5 minutes to build your free profile & start getting interviews for your next job. Companies on Hired are actively hiring right now. Hired |
📘 Tutorials and Stories |
Making a React To-Do List with Redux Toolkit in TypeScript — We like it when a potentially abstract subject like state management is clearly illustrated with a concrete example. In this case, a tutorial which covers the use of Redux to implement a to-do list. Brian Francis |
The React Native Guide I Wish I Had: Environment and Stateless Components — This nicely complements the previous article as it takes many of the same ideas and adapts them to the React Native environment. Benjamin Gowers |
The Ultimate Guide to Building a UI Component Library (Blog Series) — TJ VanToll shares tips learned from 10+ years of working with web UI components to help you create a component library. Progress KendoReact sponsor |
▶ React Finland – Vodcast 2 – Accessibility — A super in-depth (~two hour) discussion of a11y issues with some surprising observations about how pervasive the need for more accessible applications has become. React Finland |
Setting Up Chakra UI in a Next.js Project — If the conversation above has inspired you to incorporate more a11y into your next app, Chakra UI can be a wise choice compared to the alternatives as Chakra had accessibility designed in from the beginning. Nikit Singh |
React Native Authentication Flow, the Simplest and Most Efficient Way — Everything you need to know to implement authenticated access including connection to an authentication API, persisting that data and a mechanism for notifying your app of authentication state changes. Lucas Garcez |
▶ React.js TypeScript Conditional Props — A benefit of TypeScript is the ability to catch errors before you get to runtime using the notion of Conditional Props—they are only set when another property has a specific, pre-determined value. Bruno Antunes |
|
Figma to React — If you have been taking advantage of Figma’s collaborative design capabilities, you may want use this online tool to automatically convert that into React code. Vercel |
react-gsap: Components for the GreenSock Animation Platform (GSAP) — GSAP is a popular animation system for the Web and this abstracts away its tween and timeline functions for use from React. Jan Fischer |
React Tinder Card: A Component for Swipeable 'Tinder' Style Elements — Of course, you don’t have to use this to create your own dating app, but for anything where you have a lot of ‘cards’ you want people to sort by swiping one way or the other. Jakob Unnebäck |
Observability Won’t Replace Monitoring (Because It Shouldn’t) Lightstep sponsor |
Split Grid: The Spiritual Successor to the Split.js Library — One of the better ways of optimizing the use of screen real estate is to split it into easily-resizable regions that can be adjusted on-the fly by the app’s users. Nathan Cahill |
superplate: A Comprehensive Front-End Boilerplate — It claims it’s the “front-end boilerplate with superpowers”. Even if that’s a stretch, at the very least it brings together a comprehensive suite of tools for your Next.js project. Pankod |
react-native-mmkv: WeChat's Key-Value Storage Framework for React Native — With a billion (that’s with a ‘b’) users, WeChat’s requirements for efficiency and bulletproof reliablity are self-evident. Now you can take advantage of that battle-tested capability in your React Native apps. Boasts being "~30x faster than AsyncStorage." Marc Rousavy |
|