#​383 — May 1, 2024

Read on the Web

Together with  Frontend Masters logo
React Status

The React 19 Beta — The React team can say this beta is designed to get library developers prepared for an eventual React 19 release, but that hasn’t stopped everyone digging into all the new features anyway ;-) If you want to upgrade immediately, there’s a thorough upgrade guide, but otherwise, here are the highlights:

If you'd prefer to hear / see someone walking through the release post, I think ▶️ Theo did a pretty good job in 39 minutes.

React Web App Accessibility — Join Marcy Sutton Todd for this extensive video course covering the most common accessibility issues seen in React apps. You'll gain knowledge on how to make your web apps more compliant with WCAG standards, creating more inclusive experiences.

Frontend Masters sponsor

React 18.3 Was Released Too — Following on almost two years after 18.2, React 18.3 is the first true production release of React in a long time. It is, however, identical to 18.2 but adds warnings for deprecations, so if you’re not going to leap straight into 19, this is the more responsible path to take.

Rick Hanlon

IN BRIEF:

Migrate to React 19 with ast-grep? — It’s hard to tell if this is doing things on easy or hard mode, but semi-automating the changes needed to get an app ready for React 19 is certainly interesting.

Herrington Darkholme

HTML Attributes vs DOM Properties — They’re different, but often coupled. Jake outlines the difference, and why it matters. He also touches on how frameworks deal with the contrast and how it has affected React’s support for custom elements so far (cough, cough.. React 19..).

Jake Archibald

📄 React 19 Beta: Major Updates to Async Transactions are Here CoderOasis

📄 Path to a Clean(er) React Architecture: API Layer and Fetch Functions Johannes Kettmann

📺 A Look at Using TC39 / ES Built-In Signals in React and Svelte Today Jack Herrington

📄 Ways to Integrate React with Ruby on Rails 7 Dave Iverson

📺 Learn Next.js and Cloudinary by Building a Cloud Photo App Colby Fayock

🛠  Code, Tools & Libraries

extension.js: Zero-Config, Cross Browser Extension Dev Starter — The goal is to make it as simple as a npx extension create my-extension to get started with building your own React-powered browser extension. GitHub repo.

Cezar Augusto

Divz: A Component to Scroll, Swipe & Zoom Elements on the 3D Z‑Axis — Wrapped around a variety of DIVs containing various things (images, say), Divz makes it easy to flick through them in a visually striking way. Check out the homepage to enjoy some live demos.

Lewis Hunt

📰 Classifieds

😎 5 easy ways to implement “dark mode” in React Native. Appearance, React navigation, Styled components, Emotion native & React paper.


🗣️"Compared to our previous experiences in the security/auth space, Userfront is an order of magnitude simpler to use."

uikit: Bringing User Interfaces to React-Three-Fiber — Build 3D user interfaces for Three.js using @react-three/fiber with support for numerous common UI controls. Ideal for games, XR/AR, and spatial scenarios. GitHub repo.

Bela Bohlender

React Spaces: Divide a Page or Container into Scrollable and Resizable 'Spaces' — It’s not quite 1990s style ‘frames’ but.. it’s not miles away either. GitHub repo.

Allan Eagle

🎁  And one for fun..

React-Spring VisualizerReact Spring is a popular spring-physics based animation library for animating components and this is an interesting way to see how different settings affect the.. springiness?

Joost Kiens