Bookmarks (155)

3. MistCSS: Build Components with Just CSS — Forget about CSS-in-JS, what about JS-from-CSS? This approach provided a way to compile CSS-only React components into a TypeScript equivalent, but as of the recent v1.0 release it went a step further and doesn't generate or require any JavaScript at all.. A neat idea.

2. Functional UI Kit: A Unified Figma and React UI Component Kit — Despite many attempts, it doesn’t feel like anyone has really perfected the Figma - React connection yet, but this was a good attempt to bridge the design/code gap, funded by Figma’s Community Creators Fund. No updates in several months, however..

6. Bulletproof React: A Scalable Architecture for Production Apps — A popular opinionated guide to how you can structure a large scale React app. It’s had a few major updates over the years, but notably now includes a Next.js version, with both app router and page router approaches.

4. Enhancing The New York Times' Web Performance with React 18 — Late in 2023, the team at The New York Times set out to take full advantage of React 18 on its flagship news site. This was an interesting case study looking at the challenges faced in upgrading, and the significant benefits they managed to take advantage of.

3. Why Use Redux Today? — The maintainer of the popular Redux state management library gave a talk at React Summit 2024 where he gave a thorough introduction to the history of Redux, how it grew, and the benefits it continues to provide. There are detailed slides if you’d prefer not to watch the video.

1. How to Start a React Project in 2024 — It seems appropriate we started out 2024 with a look at the pros and cons of a few approaches to kicking off a React app. I bet we'll be getting a 2025 edition soon too!

Introducing Authentication Support for React Router — Clerk announces beta support for React Router, including pre-built UI components, server utilities, and low level utilities for any of your custom flows. You can use React Router both as a framework or library with Clerk.

5. Puck: A Self-Hosted Drag-and-Drop Editor for React — Sitting somewhere between an old-school WYSIWYG-powered CMS and a headless one, Puck enables content teams to author content using real React components. Want to see a demo? Of course.

My React Tech Stack for 2025 — After a year of research, building React apps, and creating a full-stack course, Robin shares what he’s settled on as his broader stack going forward for React apps into the new year. There’s little that's surprising here, but it’s good to see all these suggestions come together in one place.

React v19 Released (For Real This Time) — An early Christmas present! First teased in the React Labs February 2024 post, React 19 has been cooking for long enough (and in beta for 8 months) there’s already a wealth of content out there, like the React 19 upgrade guide, an explanation of the compiler, cheat sheets, and a roundup of what’s new in React...

Complete Intro to React v9: New Project, Modern Stack — Join Brian Holt in building a pizza delivery app from scratch. Master hooks, TanStack Router, testing, and React 19 features in this comprehensive guide to modern React development. No prior React experience needed.

React Spinners: A Collection of 'Loading Spinner' Components — A simple approach for loading, progress, and similar indicators in a wide variety of formats. GitHub repo.

Uniffi for React Native: Rust-Powered Turbo Modules — Mozilla and Filament have released a new tool for building React Native Turbo Modules (a way to interact with native platform APIs) using Rust.

Rockpack 5.0: An Alternative React App Starter — A tool aiming to get React project setup time as low as possible, complete with server side rendering support, bundling, linting and testing. Think Create React App, but more. GitHub repo.

Ref Callbacks, React 19 and the Compiler — Two years since his first article on callback refs, it turns out, in hindsight, some of the things included in that piece “were not 100% correct”. It’s time to revisit the subject.

Why We Switched to Astro (and Why It Might Interest You) — Why did Dato CMS take their old Next 13-powered site and rebuild it with Astro? It’s interesting to see the thought process and considerations they went through.

How React Compiler Performs on Real Code — Based on her talk at React Advanced this piece summarizes the problem the React Compiler is trying to solve, how that problem is solved in its absence, and how the compiler works on real code.

Next.js 15.1: Now Officially Supporting React 19 — As (almost) the de facto React framework, it’s no surprise a Next.js release quickly followed the React 19 announcement. As well as React 19 support, there are improvements for debugging errors (shown in this post), after() is now stable, and forbidden() and unauthorized() are two new experimental ways to trigger 403 and 401 errors.

🦋 react-bluesky-embed: Embed Bluesky Functionality in Your App — A lot of folks think social microblogging site Bluesky is ‘having its moment’. If you’re one of them, you can now embed that functionality right into your own app.

Onlook: An Open-Source 'Figma'-Style Design App for React — A new open source, local-first Figma style design app (for Windows, Linux and macOS) that targets React use cases. You can design layouts directly on a live page and instantly write your changes to code. Early days but looks very promising. GitHub repo.

📉 How To Improve 'Interaction to Next Paint' in React — Interaction to Next Paint (INP) is a common Web performance metric based on the latency and responsiveness of an app to user interactions, and Google even uses it as part of its ranking mechanism. Jacob offers up lots of advice and resources for improving your INP situation in React apps.

Introducing <Waitlist/> Mode - A Virtual Queue for Your App — Waitlist is a new sign-up mode and component that lets users register interest and join a waitlist for early access to your product. Manage user access and onboarding all within your Clerk Dashboard. Read our changelog announcement for more details.

React Data Fetching Patterns — Not about how to fetch data in React apps, but some common patterns to structure said fetching.

Component Testing RSCs with Storybook — Testing server components can be tricky because they span the frontend/backend divide, but Storybook offers a way and here’s how.

MUI X 7.23.0: Advanced React Components for Complex Use Cases — We’ve diligently linked to each new release of this popular suite of React components, but never featured it “properly”, so it’s about time we did! MUI X is a well rounded suite of professionally designed and MIT-licensed components. v7.23.0 improves the data grid component and adds full React 19 support.

Radon IDE 1.0: An IDE for React Native Development — Formerly known as React Native IDE, Radon is an extension that significantly extends either VS Code or Cursor into a fully fledged IDE for React Native (and Expo) development. It is a paid product, however, but all the money is funneled back into open source React Native development and the feature set might convince...

Verification Input: Customizable, Masked Input Component — Check out the demos on the homepage, but this is well suited for entering OTP codes, certain types of password, and the like. GitHub repo.

React Router v7 Released — Michael explains it best: “v7 brings everything you love about Remix back into React Router proper. We encourage all Remix v2 users to upgrade [...] For the majority of the React ecosystem [...] we believe React Router v7 will be the smoothest way to bridge the gap between React 18 and 19.” The project has a nifty new homepage too.

🩻 dwv-react: A React DICOM-Format Medical Image Viewer — DICOM is a standard for distributing medical images, such as from CT or MRI scans.

Spoiled: A Realistic 'Spoiler' Component — The homepage is a live demo. A neat way to keep things hidden until a user wants to see them. Powered by the CSS Painting API with a static image fallback. GitHub repo.

Tremor: React Component Suite for Dashboards and Charts — Built with React, Tailwind CSS, and Radix UI, you can use Tremor by either copy and pasting the components or via their npm package. You get all the typical dashboard UI elements like charts, progress indicators, activity trackers, accordions, tables, etc.

TinyBase v5.4: A Reactive Data Store for Local-First Apps — A powerful reactive data store you could essentially use as the entire backend of your app. v5.4 ups the ante with a WebSocket synchronization server that runs on Cloudflare Durable Objects.

≡ React Burger Menu 3.1: Off-Canvas Sidebar Component — Has a variety of effects and styles powered by CSS transitions and SVG path animations. GitHub repo.

React Swipeable: Swipe Event Handler Hook — Customizable, lightweight hook that provides all the information needed to manage swipe interactions. GitHub repo.

▶  Building a Teleprompter App in 30 Minutes with AI — Building apps with AI powered tools isn’t that unusual nowadays, but if you’ve never seen the process, this is a good look at the process all the way through to deployment. He uses Vercel’s v0, Replit and Cursor.

Feature-Based React Architecture — “In a feature-based architecture, each feature is decoupled from the others as much as possible. This way we can keep the components and their data fetching functions focused on their domain.”

A Lightweight Model Is Just the Right Size — Gemini 1.5 Flash-8B is production ready and faster than ever. Optimized for speed and efficiency, Gemini now offers Grounding with Google Search, enabling JavaScript developers to get more accurate responses. Try it on for size via Google AI Studio.

Vite 6.0 Released — Despite coming from the creator of Vue.js, the Vite build tool has rapidly found itself at the heart of the React ecosystem with its enviable combo of speed, simplicity and extensibility. v6 doubles down on each of these and introduces an experimental ‘Environment API’ for framework authors to use Vite in more powerful ways.

Building React Forms with Ease Using React Hook Form, Zod and Shadcn — I exaggerate, but it seems there are almost as many ways to create forms in React as there React developers, but here’s one developer’s clean, modern approach.

Introducing @clerk/nextjs V6, with Support for Next.js 15 — With v6, the auth() helper is now asynchronous, <ClerkProvider> defaults to static rendering instead of dynamic, and support for partial pre-rendering has been introduced. Learn more about v6 updates and follow our guide to upgrade.

Payload 3.0: A Headless Next.js-Native CMS Platform — An open source, headless CMS with a customizable React-based admin system, GraphQL and REST APIs, flexible auth, file uploads, etc. “Payload is the only Next.js CMS—in a way that no other CMS can come close to,” they claim. GitHub repo.

React Scan: Detect Performance Issues in Your App — A pure JavaScript tool you can drop into your app to automatically ‘scan’ for problematic renders without doing lots of integration work. There’s a simple demo on the homepage or you can see Aiden’s view of Twitter/X being scanned. GitHub repo.

Solito 4.3: A Way to Use React Native with Next.js — A wrapper around React Navigation and Next.js that lets you share navigation code when building cross-platform apps. v4.3 now supports React Navigation v7.

Satori 0.12.0: Convert HTML and CSS to SVG — Designed to be used with React and JSX. It doesn’t support all HTML but is designed to provide a familiar way to generate images from code (such as for Open Graph graphics, say).

react-svg 16.2: Component to Inject SVG into the DOM — Rather than embedding SVG with img or an iframe or even CSS, you can get more control by putting SVG directly into the DOM.

Uncontrolled or Controlled: A Matter of Perspective? — Controlled components have state managed by React, while uncontrolled components store their state in the DOM, but sometimes it’s a bit more complicated than that, as Sam demonstrates here.

🤖 Vercel's AI Chatbot Starter Template — An open source AI chatbot app template built using Next.js. It uses Vercel’s AI SDK and other Vercel APIs for the heavy lifting.

Minimal Pie Chart: Versatile, Lightweight SVG Pie and Donut Charts — Pass in your data and colors via props, and you’re done. Demos here. Could be handy if you don’t want to pull in an entire full-scale charting library as it comes in at under 2KB gzipped.

▶  A Look At “use cache”, Next.js's Latest Take on Data Caching — Explained in Jack’s usual tight, expertful fashion. (17 minutes.)

🗓️ Schedule-X 2.5: Material Design Calendar and Date Picker — Available in the form of React/Preact, Vue, Svelte, Angular, or plain JS components. Open source but with a premium version with extra features. GitHub repo.