~reactstatus | Bookmarks (140)

React GJS Renderer: A React Renderer for GNOME JavaScript — One for anyone developing desktop apps for Linux, as this lets you use React in the building of native Gnome GTK applications by way of the GJS (GNOME JavaScript) environment (think a runtime akin to Node.js but for GNOME desktop apps and powered by SpiderMonkey).

How Shopify Built its Black Friday 2023 Globe — Shopify’s busy getting ready for 2024’s Black Friday season, but takes the time to explain how they built last year’s striking sales visualization using Three.js and React Three Fiber. Admittedly, shaders did most of the heavy lifting, rather than React.

React Compiler Beta Release — Five months ago we got our first official introduction to React Compiler, a new approach to improving React app performance by optimizing code at build time. It’s now a step closer, and React 17+ users and library maintainers are encouraged to give it a spin.

React Native's New Architecture is Here — With the release of React Native 0.76, the so-called ‘New Architecture’ becomes the default. This opens up numerous modern React features like useLayoutEffect and Suspense, as well as better ways to work with native interfaces without a bridge (in short, working with the native runtime is faster and more direct).

Master Performance and Speed Up Your Site — This detailed video course shares the fundamentals of web performance, covering key Core Web Vitals metrics such as Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). You'll learn how to best use Lighthouse, WebPageTest and other tools in order to make your site lightning.

Next.js 15 Released — Last week was a big week for the popular (some may even argue default?) React framework with Next.js Conf taking place (more on that later) and this major release. It includes a codemod CLI for easier upgrading, async request APIs, alignment with React 19, and more.

Using shadcn/ui with Next.js 15 and React 19 — Fresh, valuable documentation from the shadcn/ui project on the specifics of using the popular component library with React 19 generally, though with a slight emphasis on Next.js 15.

Next.js' Journey with Caching — A description of a new experimental (aimed at those who are “feeling adventurous” for now) mode that builds on just two concepts: Suspense and use cache.

Building an Image Search App with OpenAI CLIP, Postgres & React — A tutorial that brings together a lot of ideas in one place. CLIP is used to turn images into text descriptions. Postgres is used as a vector database. JavaScript provides the glue for both the frontend (with React) and backend (Node.js).

Recharts 2.13: Chart Library Built with React and D3 — Easy to deploy with declarative components, and native SVG support. Line, bar, scatter, composed, pie, and radar charts are offered. There are lots of examples, complete with code. GitHub repo.

Chakra UI v3: The Comprehensive React Component Suite — Chakra is a popular suite of accessible, reusable, and composable React components and v3 is essentially a complete rewrite to modern standards. GitHub repo.

shadcn/ui Sidebars — The popular shadcn/ui component library has unveiled a new suite of components for building sidebars.

Non-Opinionated TypeScript Starter Project for Next.js — A long standing template gets numerous upgrades to modern versions with support for Next.js 15 (using the app router), React 19, ESLint 9, and more.

Liskov's Gun: The Parallel Evolution of React and Web Components — An opinion piece (by an author who’s certainly no stranger to them) that’s so long there’s an EPUB version! Baldur tackles Web Components, their growing pains, why frameworks like React took a different path, and why this whole topic remains a difficult circle to square.

How Microsoft Edge is Replacing React with Web Components — As part of their WebUI 2.0 project, the Edge browser team is on a mission to swap out React UI components with native web platform components, largely for performance reasons.

▶  How React Router v7 Became Type-Safe — An overview of the soon-to-be-released React Router 7, why recent type-safety improvements are both exciting and useful, as well as some live demos.

How to Drag and Drop in React — Drag and drop is a basic UI expectation in many scenarios. Robin, always a well-regarded instructor, walks though the creation of a drag and drop capable component, step-by-step.

Nine Patch: Put Content Inside a Component Rendered with Nine Slice Scaling — Imagine you have an image that represents a frame and you chop it into a 3x3 grid with 4 corners, 4 sides and the middle. You then use those pieces to create a dynamically sized bordered space (ie. 9-slice scaling).

Zustand 5.0: Small, Fast React State Management — You can’t beat a release announcement that says “No new features” but there are some changes. Luckily, it's very easy to upgrade from v4.

Introducing Storybook for React Native 8.3 — Storybook is a popular frontend component workshop, most commonly used with React, but it’s had a React Native variant for a while now, which is finally fully up to speed with the features of the standard Storybook.

Jeasx: A Lightweight SSR Framework That Uses JSX — A new server-side rendering framework built on top of JSX and Fastify. It doesn’t use React, but if you want to keep using JSX while keeping your server side lightweight, it’s an option. The JSX functionality is provided by the author’s jsx-async-runtime package.

Tauri 2.0: Build Small, Fast Desktop Apps with Web Tech — A popular Rust-based alternative to Electron for bundling together HTML, JavaScript and CSS code into cross-platform desktop apps. Rather than using V8, it uses the natively available webview which yields big space benefits.

How to Implement a 'Drag to Select' Mechanism — Josh wanted to implement drag based selection to make bulk operations easier for end users. It was harder than he thought, but he’s done a great job explaining every step of his approach.

React Folder Structure in Five Steps, 2024 Edition — The latest result of Robin’s efforts at updating his popular posts to 2024 standards. Articles about structuring React apps are always popular; this one breaks the idea down to five steps going from the simplest of apps to more complex ones. Bulletproof React is also worth a look if you need something broader.