--- title: "The parallel evolution of React and Web Components" publication: "React Status" issue: 403 published_at: "2024-10-16" canonical_url: "https://react.statuscode.com/issues/403" --- Plus there's a new React framework, but is it the One? | #​403 — October 16, 2024 [Read on the Web](https://react.statuscode.com/issues/403) ✏️ We're back! Though only for a single week, as we're taking _next_ week off too. So we're back again on October 30 but will then be going all the way through to Christmas :-) __ _Your editor, Peter Cooper_ Together with [![Sentry logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_350,h_100/e_make_transparent/co_white,e_outline:7/xdmchdxkka938lxfr86f.png)](https://sentry.io/resources/clean-architecture-nextjs/?utm_medium=paid-community&utm_source=reactstatus&utm_campaign=fy25q4-cleanarchitectureworkshop&utm_content=newsletter-cleanarchitectureworkshop-register) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/rp7wfwitzyxvheibo94s.jpg)](https://www.robinwieruch.de/react-folder-structure/) [React Folder Structure in Five Steps, 2024 Edition](https://www.robinwieruch.de/react-folder-structure/) — 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](https://github.com/alan2207/bulletproof-react) is also worth a look if you need something broader. Robin Wieruch [Liskov's Gun: The Parallel Evolution of React and Web Components](https://www.baldurbjarnason.com/2024/liskovs-gun/) — An opinion piece (by an author who’s certainly no stranger to them) that’s so long there’s [an EPUB version!](https://store.baldurbjarnason.com/buy/734bccc8-d82d-4506-a743-40341e17c8e9) Baldur tackles [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components), their growing pains, why frameworks like React took a different path, and why this whole topic remains a difficult circle to square. Baldur Bjarnason [![\](https://copm.s3.amazonaws.com/70a068dc.png)](https://sentry.io/resources/clean-architecture-nextjs/?utm_medium=paid-community&utm_source=reactstatus&utm_campaign=fy25q4-cleanarchitectureworkshop&utm_content=newsletter-cleanarchitectureworkshop-register) [Implementing Clean Architecture in Next.js](https://sentry.io/resources/clean-architecture-nextjs/?utm_medium=paid-community&utm_source=reactstatus&utm_campaign=fy25q4-cleanarchitectureworkshop&utm_content=newsletter-cleanarchitectureworkshop-register) — 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. Sentry sponsor [How to Implement a 'Drag to Select' Mechanism](https://www.joshuawootonn.com/react-drag-to-select) — 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. Josh Wootonn [How Microsoft Edge is Replacing React with Web Components](https://thenewstack.io/how-microsoft-edge-is-replacing-react-with-web-components/) — As part of their [WebUI 2.0 project](https://thenewstack.io/from-react-to-html-first-microsoft-edge-debuts-webui-2-0/), the _Edge_ browser team is on a mission to swap out React UI components with native web platform components, largely for performance reasons. Richard MacManus (The New Stack) **IN BRIEF:** - 1️⃣ [One](https://onestack.dev/) is a new React framework, from the creator of [Tamagui](https://tamagui.dev/), that uses Vite, provides universal, typed routing, and unifies React and React Native in an interesting way. - 🤖 [v0](https://v0.dev/) is Vercel's front-end code generator that focuses on, but is no longer exclusive to, React components. Now Vercel is taking v0 _to the enterprise_ with a [variety of new plans targeting team use cases.](https://vercel.com/blog/v0-plans-for-teams) - 🕶️ [Meta Connect](https://www.meta.com/en-gb/connect/) was an event held by Meta last month focused on its various VR/AR/wearable experiments and they explained [how React and React Native are at the heart](https://engineering.fb.com/2024/10/02/android/react-at-meta-connect-2024/) of their work. - 🎉 [Next.js 15 Release Candidate 2](https://nextjs.org/blog/next-15-rc2) has just landed. ▶[How React Router v7 Became Type-Safe](https://www.youtube.com/watch?v=ferLCqcLcGU) — 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. Alem Tuzlak [How to Drag and Drop in React](https://www.robinwieruch.de/react-drag-and-drop/) — 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. Robin Wieruch 🛠 Code, Tools & Libraries [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/dzbjrzhvm18mxvxndvug.jpg)](https://stur86.github.io/nine-patch-react/) [Nine Patch: Put Content Inside a Component Rendered with Nine Slice Scaling](https://stur86.github.io/nine-patch-react/) — 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](https://en.wikipedia.org/wiki/9-slice_scaling)). Simone Sturniolo [Zustand 5.0: Small, Fast React State Management](https://github.com/pmndrs/zustand/releases/tag/v5.0.0) — 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.](https://github.com/pmndrs/zustand/blob/main/docs/migrations/migrating-to-v5.md) Paul Henschel [Introducing Storybook for React Native 8.3](https://storybook.js.org/blog/react-native-storybook-8/) — [Storybook](https://storybook.js.org/) 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. Michael Shilman [Jeasx: A Lightweight SSR Framework That Uses JSX](https://www.jeasx.dev/) — 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](https://www.npmjs.com/package/jsx-async-runtime) package. Maik Jablonski [Tauri 2.0: Build Small, Fast Desktop Apps with Web Tech](https://v2.tauri.app/blog/tauri-20/) — A popular Rust-based alternative to [Electron](https://www.electronjs.org/) 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. Tillmann Weidinger 📰 Classifieds ✨ [Gitpod Flex automates your full dev environment](https://shortclick.link/yw7d4q)—including tools and secrets. Secure your code & ship faster on any OS. --- [Automatically creates & maintains E2E UI tests](https://www.meticulous.ai?utm_source=react_status&utm_campaign=october11th). Zero flakes. Used by Lattice, Bilt Rewards and others. Backed by YC, CTO GitHub and others. --- 🚀 [React Day Berlin is back Dec 13 & 16!](https://ti.to/gitnation/react-day-berlin-2024/discount/React15?utm_source=Newsletter&utm_medium=reactstatus) Connect with 800+ devs, enjoy 45+ talks, & party in Europe's tech hub. Use code [React15](https://ti.to/gitnation/react-day-berlin-2024/discount/React15?utm_source=Newsletter&utm_medium=reactstatus)for 15% off! - [Wasp 0.15](https://github.com/wasp-lang/wasp/releases/tag/v0.15.0) – [Wasp](https://wasp-lang.dev/) is a Rails-like framework for Node, React & Prisma. - [react-native-permissions 5.0](https://github.com/zoontek/react-native-permissions/releases/tag/5.0.0) – Unified cross-platform permissions API. - [React-Grid-Layout 1.5](https://github.com/react-grid-layout/react-grid-layout) – Draggable/resizable grid layouts for React apps. - [React Easy Crop 5.1](https://github.com/ValentinH/react-easy-crop) – Component for cropping images and videos. ([Demo.](https://valentinh.github.io/react-easy-crop/)) - [React Suite 5.72](https://github.com/rsuite/rsuite) – A suite of React components. ([Examples.](https://rsuitejs.com/components/overview/)) - [Vaul 1.1](https://github.com/emilkowalski/vaul/releases/tag/v1.1.0) – Unstyled drawer component. ([Demo](https://vaul.emilkowal.ski/).) - [MUI X 7.20](https://github.com/mui/mui-x/releases/tag/v7.20.0) – Popular React component suite. - [Redwood 8.4](https://github.com/redwoodjs/redwood/releases/tag/v8.4.0) – Popular React app framework. - [TypeScript 5.7 Beta](https://devblogs.microsoft.com/typescript/announcing-typescript-5-7-beta/) Curated by Peter Cooper and Terence C. Gannon. A **[Cooperpress](https://cooperpress.com/)** publication. [Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom