#​372 — January 31, 2024

Read on the Web

Together with  SurveyJS logo
React Status

A Next.js App Router Migration: The Good, Bad, and Ugly — A team rebuilt their main dashboard from scratch using a modern Next.js approach and here’s some of what they encountered, good and bad, before concluding that they wish they’d considered Remix instead.

Brandon Bayer (Flightcontrol)

👍 On the flip side, Jack Herrington took a look to see ▶️ if RSCs and the Next.js app router approach are 'really that bad' and concluded that the DX is just fine.

React Form Libraries for Seamless Form Creation Right in Your App — Simplify data collection in your React app with SurveyJS UI components. Create and style dynamic JSON-based forms using a self-hosted form builder that features a CSS theme editor and GUI for conditional rules. Maintain full control over your respondents' data.

SurveyJS sponsor

React Interview Questions and Answers — If you’re looking for a job and preparing for interviews, or if you just want to revise your overall knowledge, you might find this long standing resource useful, even if it just gives you some areas to research (or, better, inspires you to contribute some fixes!)

Sudheer Jonna

IN BRIEF:

Shining a Light on Caustics with Shaders and React Three Fiber — A step-by-step guide on building a caustic light effect (like the light rays you might see refracting/reflecting off a surface) in a React Three Fiber project using shaders, render targets, normal maps, and custom materials. Beautiful!

Maxime Heckel

😋 Delicious 'Donut' Components — Donuts, in this case, aren’t merely a tasty snack, but a pattern for interleaving client and server components. Presented complete with some fantastic diagrams.

Maxi Ferreira

How to Add an AI-Powered WYSIWYG Editor with Novel — Colby always puts together fun tutorials. Here, Colby demonstrates how to integrate Novel, a WYSIWYG editor with AI-powered autocomplete, into a React + Astro app.

Colby Fayock

It Feels Like React is Getting a Bit of a Kicking Recently..
Andy Bell

🛠  Code, Tools & Libraries

React Resizable Panels: Components for Resizable Panels — If you’ve got various panels and want users to be able to resize them with dividers, try this. The site is full of examples, complete with code, showing off the various features. As of v2, it supports resizing multiple intersecting panels at once. GitHub repo.

Brian Vaughn

🌈 React Curved Text — A way to, unsurprisingly, render circular / curved text in a React app. The page includes an interactive demo so you can play with the effect to your heart’s content and then copy the JSX needed.

Open Business Software Solutions

Mantine 7.5: The Full Featured Component Suite — The ever popular suite of React components and hooks gains new donut and pie chart components, improved formatting options for other charts, CSS text-wrap support on its Title component, and more.

Mantine Developers

📰 Classifieds

Omlet gives you analytics on where your components are used. Increase design system adoption and make data-driven improvements. Start for free.

Payload 2.9: A Headless CMS Platform Built on Node.js and React — A Node.js-based headless CMS with a customizable React-based admin system, GraphQL and REST APIs, flexible auth, file uploads, etc. Enough features to “feel more like an app framework akin to Laravel,” they say. GitHub repo.

Payload CMS, LLC

react-native-fast-trie: A Fast C++-Powered Trie — A fast, memory-efficient trie data structure implementation for React Native implemented in C++ and made available via JSI (RN's JavaScript interface for native code).

Zachary Marion