Getting a grip on React server components

#​273 — January 26, 2022

Read on the Web

React Status
⚛️ Your weekly React news digest, every Wednesday.

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.

Kolby Sisk

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.

Contentful sponsor

▶  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 QueryReact 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.

Georgii Perepecho

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)

Jobs

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.

X-Team

Frontend Software Engineer — Come build the future Hub for collaboration with our passionate, friendly, and experienced team. React, TS, GQL, Design Systems.

Qatalog

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.

Hired

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.

Kolby Sisk

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

How to Create a Full-Stack App with AWS Amplify Studio

Ali Spittel

Five Tips to Solve Common Pitfalls with React Native

Dan Neciu

🛠 Code and Tools

React Google Charts 4.0: An Unofficial Wrapper — The fourth major release of the React component which wraps Google Charts. Comes with a comprehensive set of live demos each accompanied by code.

Rakan Nimer

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.

HappyKit

Build a Mobile-Responsive Telehealth Pager App Using Stream’s Chat API

Stream sponsor

react-markdown: Render Markdown in React — Takes a string of Markdown and renders it to React elements. Now in its eighth major release.

Unified

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.

REAVIZ

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.

Alex Sergey

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.

DouyinFE

⚡️ 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.

React Modal Sheet — A bottom sheet component with animation powered by Framer Motion.

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.

Leave a Reply

Your email address will not be published.