~reactstatus | Bookmarks (138)

How Josh W. Comeau Rebuilt His Blog, App Router Style — Like many folks, we’re huge fans of Josh’s blog (particularly its wealth of React articles). He’s just rebuilt the entire site using Next.js, MDX, Sandpack, and an array of other technologies, and goes into fantastic depth about everything involved. A good look behind the scenes of a modern React-driven project.

React Loading Skeleton: Skeleton Screens that Adapt to Your App — Use the ‘skeleton’ component directly in your components in place of content that is still loading and it’ll adapt to the right size while the real data is on the way.

React Chrono: Dynamic, Interactive Timeline Component — Supports horizontal, vertical, and vertical alternating timelines, complete with keyboard accessibility, support for nested timelines, auto-playing timelines slideshow-style, and more.

A Milestone for TypeScript Performance in TanStack Router — Complex route definitions have historically resulted in sluggish in-editor performance. Luckily, the TanStack team has been doing a lot to improve this.

Introducing TanStack Router — TanStack Router is a powerful and mature type-safe React router aimed at client-side use (though a full-stack option is beginning to appear with TanStack Start). Adam shows off the essentials with the hope of getting you on board the TanStack train too.

How Infinite Queries Work — Infinite queries are React Query’s way to make “those doom-scrolling pages we all hate so much” as this author describes them.

How to Create a Chrome Extension with React, TypeScript, Tailwind CSS and Vite — Covers everything you need to know right through to publishing in the Chrome Web Store.

SPA Lazy Loading Pitfalls — A concise set of recommendations to address common problems with this widely used pattern.

DECK.GL: GPU-Powered Large-Scale Data Visualization Framework — Particularly well suited to geospatial data visualization use cases that go beyond typical 2D views. There are plenty of examples to show you what it can do. Can be used through both vanilla JS and React interfaces.

Conform: A Type-Safe Form Validation Library — Gives you control over the form submission lifecycle from client to the server and exposes the form state through the useForm() hook. v1.2.0 improves how field values are automatically updated, meaning less code for you to write.

hono-remix-adapter: A Hono / Remix Adapter — A Vite plugin to enable you to build a Hono-based app and integrate it within a Remix app.

Simple-Keyboard 3.8: A Modern Virtual Keyboard for React — If you need to render a working virtual keyboard within your app, this is for you.

A React 19 Cheat Sheet — From Kent C Dodds, of Epic React fame, comes this part cheat sheet, part succinct reminder of some of the new things you can do in React 19, along with (very) brief code examples.

Next.js SaaS Starter: A Next.js Template for Webapps — A starter template for building a SaaS-style webapp using Next.js with authentication, Stripe integration, and a dashboard for users. It uses Postgres and Drizzle for the database and UI elements based on shadcn/ui and Tailwind.

An SSR Performance Showdown — Fastify’s Matteo Collina set out to find out the current state of server-side rendering performance across today’s most popular libraries – yes, including React.

react-call: Call Your React Components — Gives you a call(props) function as an imperative way to call a component, even from outside React and with no context providers needed. GitHub repo.

Valtio 2.0: Proxy State Made Simple — Turns objects into self-aware proxies so you can access state and subscribe to changes outside of components, add computed properties and more. Designed for React and compatible with Suspense, but also possible to use with vanilla JS. – GitHub repo.

🐈  React Kitten: Make Desktop-Like Environments for the Web — A quirky, but interestingly presented, project that lets you create a sort of in-browser ‘desktop environment’ with React. The live demo in the docs shows off the idea quite well.

react-native-compressor: Compress Media Before Uploading It — Many chat apps compress media locally before uploading them to a server, and now your React Native app can too.

The Frontend Masters Knowledge Quest Sale Is Going on All Week! — The Frontend Masters Knowledge Quest sale is now on! There's four new learning paths (including JS performance and code architecture) with more epic courses on the way throughout 2024 and beyond.

What’s New in React 19 — A thorough roundup of what’s coming in React 19, which has been in release candidate status for several months now, covering both headline features like Server Components and Actions, as well as many smaller enhancements like easier preloading of resources and control over stylesheet loading precedence.

React and FormData — FormData is ironically both the ‘newest and yet oldest’ standard for accessing form data. Here are some practical ways for using it with TypeScript.

Create Interactive Tutorials in the Browser — TutorialKit enables you to create interactive tutorials instantly without building or managing any backend infrastructure.