Getting a grip on React server components
#273 — January 26, 2022
React Server Components: A Primer — The co-founder of the Plasmic visual page builder app takes us on an exploration of React server components (currently an experimental feature in React 18) and how they tick under the hood.
Chung Wu (Plasmic)
Mastering the Art of Forms in React — The author asserts that most React developers are making forms much harder than they need to be. Through a series of progressively more complex examples—each of which is accompanied by its own CodeSandbox demo—the article explains how to achieve a high level of form capability without resorting to labor-intensive controlled inputs.
Get Started with React and Contentful’s Headless CMS — Contentful is a cloud-native API-first content platform that lets you define content structures in the way that best matches your components’ requirements. Start building for free.
▶ Learn the Remix Framework with Kent C. Dodds — Have you been wondering whether to take a spin with Remix? The hosts get Kent C. Dodds— Remix’s director of Developer Experience—to walk through why he thinks you’d want to use the full stack web framework. (1 hour.)
TJ Van Toll and Paige Niedringhaus
Building a Real App with React Query — React Query is intended to simplify your app’s interaction with asynchronous data sources. This detailed tutorial takes us through the full cycle of development of an appointment app which uses it.
Announcing React Native 0.67 — The recently-promised shorter release cycles means some React Native releases will consist of fixes and incremental improvements such as appears to be the case here. Review the changelog to see the fine-grained details of what has been addressed.
Lorenzo Sciandra (Microsoft) and Luna Wei (Meta)
React Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.
Frontend Software Engineer — Come build the future Hub for collaboration with our passionate, friendly, and experienced team. React, TS, GQL, Design Systems.
Find React Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.
Choosing the Right Component Library for Your Design System: MUI vs Chakra — Some thoughts from an engineer at Udacity from when they were comparing the two.
Tree Lists with Indeterminate Checkboxes in React — “Semi-checked checkboxes”—which represent underlying conditions which are not entirely ‘checked’ or ‘unchecked’—can be tricky to represent in a tree list. Here’s one way to do it.
Gerard van der Put
🛠 Code and Tools
Flags: Feature Flags for Next.js with One Hook — Selectively enabling capablities—as illustrated in their brief video demo—has never been easier. They provide a detailed tutorial to walk you through their implementation.
reaselct: A Select Component for React — Currently in single- and multi-select versions, the latter of which could work well in tagging scenarios. Comes from the same team as the REAVIZ chart library.
Rockpack 2.0: An Alternative React App Builder — Like Create React App the goal is to get project setup time as low as possible, but Rockpack holds some different opinions around how far to take things and packs in a lot of ideas including, now, server side rendering.
Semi-UI: A Design System and UI Library from the TikTok Team — A complete design system and UI from the folks who brought you TikTok, or Douyin as it is known in China.
⚡️ Quick Bits:
React Scroll Parallax — Animation synced to scrolling behavior.
react-inner-image-zoom — Take a closer look at an image within its rendered frame.
transition-hook — Simple transition animations in about 1KB.
React Native Loading Spinner Overlay — Display a spinner in a modal-like overlay which enhances the user experience.