~reactstatus | Bookmarks (131)

Accessibility Essentials Every React Developer Should Know — If you’re an experienced frontend developer, these might be second nature to you by now, but this is a good roundup of the entry level ‘table stakes’ for frontend accessibility.

Write CSS Like a Pro — Kevin Powell shares how to create a responsive website from scratch using modern CSS features (such as nesting, utility classes, custom properties, and more). This detailed video course also dives into adding additional polish via animations, view transitions, and more.

Superglue 1.0: A Way for React to ❤️ Ruby on Rails — Superglue is a library for bringing Ruby on Rails and React closer together in a way that feels as natural as Rails’ default Hotwire and Stimulus-based approach to the frontend.

Protect Against Bots, Fraud, and Abuse in Real Time — WorkOS Radar protects your app with advanced device fingerprinting — stop fake signups, free tier abuse, bot attacks and brute force attempts today.

react-nil 2.0: A React 'Null Renderer' — An interesting experiment to use React in situations where you don’t need it to render anything, but you want to use hooks, suspense, context, and other bits of the React lifecycle. Like in, say, a Node app. Maybe this CodeSandbox example will provoke some ideas.

An Early Look at React's Experimental Animations API — <ViewTransition /> is based on the powerful browser-based View Transition API (unsupported in Firefox for now). It’s only in pre-release versions of React so far, but Matt comes armed with examples and demos for you to get an early feel for the potential.

Five Years of React Native at Shopify — Five years ago, Shopify said React Native was the future for mobile development at their company and they really meant it with every mobile app moving to RN over time. Here’s what they learnt along the way and why they’re sticking with it.

Docusaurus 3.7: The Docs-Oriented Static Site Generator — The big update for the popular React-powered site generator is React 19 compatibility and all new Docusaurus sites will use React 19 out of the box. And, if you’re using SVGR to seamlessly import and use SVG files as components, you can now more easily configure SVGR to your needs.

react-error-boundary 5.0: A Reusable Error Boundary Component — Supporting all React renderers (including React DOM and React Native), you can use this to wrap components and then ‘catch’ errors and render a fallback UI as appropriate.

React-Leaflet 5.0: React Components for Leaflet Maps — Leaflet is a popular JavaScript library for creating interactive maps. This library brings support direct to React 19.

Introducing TanStack Start — Imagine if the folks behind TanStack Router, Query, etc. realized they had all the pieces to create a full-stack React framework: that’s TanStack Start. You get full-document SSR, streaming, server functions, and more, out of the box. Could 2025 be TanStack Start's year? Maybe!

You Don't Need Next.js — As much as Next.js is considered the React meta-framework of choice, if your requirements are modest, simply going with plain React has numerous benefits in terms of simplicity and speed. This post looks at a real example and the tradeoffs made.

Building a React Login Page Template — Discover how to create a seamless React login page template with session-based authentication. Enhance your app's security and user experience using react-router-dom for efficient route protection.

Five Tips to Effectively Optimize INP in React Apps — Experience-informed recommendations for optimization techniques to improving performance with specific focus on the Interaction to Next Paint (INP) metric.

Smarter Tools and Best Practices for Mobile Debugging — Join our hands-on workshop to explore practical strategies and tools for React Native debugging.

React-Toastify 11: In-Page Notifications Made Easy — There’s an elaborate demo page here but essentially it’s a flexible, easy to style and customize ‘toast’ style notifications system. GitHub repo.

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.

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.

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!