~reactstatus | Issue 403 - The parallel evolution of React and Web Components (12)

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.

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.

Implementing Clean Architecture in Next.js — Learn how to make projects testable and debuggable, independent of UI, framework, database, and external dependencies with the concept of Clean Architecture. Join us live on November 4th.

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.

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.