~reactstatus | Bookmarks (156)

Learn Advanced JavaScript Performance Optimization — Garbage collection, memory profiling, data structures like sets and arrays, and event loop management. Learn performance-driven programming, preparing you to write blazingly fast and efficient code!

MDXEditor 2: A Rich Markdown Editor Component — Perhaps best known for React Virtuoso, Petyo unveiled a Lexical-powered Markdown editor for React apps last year, and it’s reached v2.0, which makes plugins easier to build and upgrades several dependencies. The live demo shows off what you need to see.

Wasp: A Rails-Like Framework for React, Node and Prisma — Presents itself as what you might call an everything included framework – thought has been given to auth, deployment, background jobs, and more. There’s a lot to like, especially with the release of the ‘Open SaaS’ SaaS starter app that gets you a few steps down the road to building an app in mere minutes.

React Datepicker 6.0: A Simple Date Picker Component — Can you ever recall seeing so many examples on a homepage? More libraries should do this!

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!

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.

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!)

😋 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.

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.

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.

🌈 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.

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.

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.

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).

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.

Prop Drilling and Component Composition — A visual demonstration of how a little restructuring can help you avoid prop drilling (or at least tidy it up). This is from 2023, but we overlooked it at the time.

Updating Public Next.js Environment Variables Without Rebuilds — A practical approach to updating public environment variables without rebuilding your app.

React Email 2.0: Build Better Emails with React — React Email is a collection of unstyled components for creating emails using JSX and React (this example shows you the basic idea). v2 extends the tooling side of things somewhat and introduces two new components focused on displaying source code in emails.

rc-table: A Useful React Table Component — A straightforward, lightweight table component for modest data presentation use cases (demo). GitHub repo.

A Comprehensive Guide to React and OpenLayers Integration — How to add and work with interactive maps in your React app by integrating with the established OpenLayers JavaScript mapping library.

Clerk Is the Easiest Way to Set Up Auth for Your React App — Get drop-in authentication for your React app using Clerk. Their quickstart guide streamlines integration with ready-to-use components, hooks, and helpers, ensuring a smooth authentication and user management experience that just works.

▶  How React Server Components Change Everything — “Server components completely alter how you write React code and in this video I will talk about all the difference between client and server components, what the pros and cons are, as well as when to use each one.”

Lessons Learned Upgrading to React 18 — If you get the feeling everyone upgrades to using the newest React version and features ASAP, it’s not true. Most teams take a while to do big upgrades (if they even do so at all) so it’s interesting to see the SonarQube team’s story and some issues they ran into.

▶  Gateway to React: The React.dev Story — One of the main participants in the reengineering of React's docs — now available at React.dev — provides an informative and entertaining backstory to the project.