#403 — October 16, 2024
✏️ 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
React Status
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.
Robin Wieruch
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.
Baldur Bjarnason
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.
Sentry sponsor
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.
Josh Wootonn
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.
Richard MacManus (The New Stack)
IN BRIEF:
-
1️⃣ One is a new React framework, from the creator of Tamagui, that uses Vite, provides universal, typed routing, and unifies React and React Native in an interesting way.
-
🤖 v0 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.
-
🕶️ Meta 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 of their work.
-
🎉 Next.js 15 Release Candidate 2 has just landed.
▶ 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.
Alem Tuzlak
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.
Robin Wieruch
🛠 Code, Tools & Libraries
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).
Simone Sturniolo
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.
Paul Henschel
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.
Michael Shilman
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.
Maik Jablonski
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.
Tillmann Weidinger
📰 Classifieds
✨ Gitpod Flex automates your full dev environment—including tools and secrets. Secure your code & ship faster on any OS.
Automatically creates & maintains E2E UI tests. Zero flakes. Used by Lattice, Bilt Rewards and others. Backed by YC, CTO GitHub and others.
🚀 React Day Berlin is back Dec 13 & 16! Connect with 800+ devs, enjoy 45+ talks, & party in Europe’s tech hub. Use code React15 for 15% off!
-
Wasp 0.15 – Wasp is a Rails-like framework for Node, React & Prisma.
-
react-native-permissions 5.0 – Unified cross-platform permissions API.
-
React-Grid-Layout 1.5 – Draggable/resizable grid layouts for React apps.
-
React Easy Crop 5.1 – Component for cropping images and videos. (Demo.)
-
React Suite 5.72 – A suite of React components. (Examples.)
-
MUI X 7.20 – Popular React component suite.
-
Redwood 8.4 – Popular React app framework.
Curated by Peter Cooper and Terence C. Gannon.
A Cooperpress publication.
#403 — 2024 年 10 月 16 日
✏️我们回来了！虽然只有一周，因为我们“下”周也要休息。所以我们会在 10 月 30 日再次回来，但之后会一直持续到圣诞节:-)
__
您的编辑彼得·库珀
连同
[](https:// /react.statuscode.com/link/161116/5d0bbb4a61)
反应状态
[](https://react.statuscode.com/link/161118/5d0bbb4a61 ）
React 文件夹结构五步走，2024 年版 — Robin 努力将其热门帖子更新为 2024 年标准的最新成果。关于构建 React 应用程序的文章总是很受欢迎；这个将这个想法分解为五个步骤，从最简单的应用程序到更复杂的应用程序。如果您需要更广泛的东西，Bulletproof React也值得一看。
罗宾·维鲁奇
Liskov’s Gun: The Parallel Evolution of React and Web Components — 一篇观点文章（作者对 React 和 Web 组件并不陌生）他们）已经有 EPUB 版本！ Baldur 解决了 [Web 组件](https://react.statuscode.com/link/161122/ 5d0bbb4a61），他们成长的烦恼，为什么像 React 这样的框架走了不同的道路，以及为什么整个主题仍然是一个困难的圆。
巴尔杜尔·比亚纳森
在 Next.js 中实现简洁架构 — 了解如何使项目可测试和可调试，独立于 UI、框架、数据库和具有清洁架构概念的外部依赖关系。欢迎加入我们 11 月 4 日的直播。
哨兵赞助商
如何实现“拖动选择”机制 — Josh 希望实现基于拖动的选择，以使批量操作更容易最终用户。这比他想象的要困难，但他很好地解释了他方法的每一步。
乔什·伍顿
Microsoft Edge 如何用 Web 组件取代 React — 作为其 [WebUI 2.0 项目](https://react. statuscode.com/link/161126/5d0bbb4a61），Edge 浏览器团队的使命是用本机 Web 平台组件替换 React UI 组件，主要是出于性能原因。
理查德·麦克马纳斯（新堆栈）
简而言之：
-
1️⃣ One 是一个新的 React 框架，来自 [Tamagui](https://react.statuscode.com/link/161129/ 5d0bbb4a61），它使用 Vite，提供通用的类型化路由，并以一种有趣的方式统一 React 和 React Native。
-
🤖 v0 是 Vercel 的前端代码生成器，专注于但不再专属于 React 组件。现在，Vercel 正在通过[针对团队用例的各种新计划]将 v0 引入企业。](https://react.statuscode.com/link/161131/5d0bbb4a61)
-
🕶️ Meta Connect 是 Meta 上个月举办的一场活动，重点关注其各种 VR/AR/可穿戴设备实验，他们解释了 React 和 React Native 如何是他们工作的核心。
-
🎉 Next.js 15 候选版本 2 刚刚落地。
▶ React Router v7 如何成为类型安全的 — 即将发布的 React Router 7 概述，为什么最近的类型安全改进既令人兴奋又有用，以及一些现场演示。
阿莱姆·图兹拉克
如何在 React 中拖放 — 拖放是许多场景中基本的 UI 期望。 Robin 一直是一位备受推崇的讲师，他一步步介绍了具有拖放功能的组件的创建过程。
罗宾·维鲁奇
🛠 代码、工具和库
[](https://react.statuscode.com/link/161138/5d0bbb4a61 ）
九个补丁：将内容放入使用九切片缩放渲染的组件内 — 想象一下，您有一个代表框架的图像，并且你把它切成一个 3x3 的网格，有 4 个角、4 个边和中间。然后，您可以使用这些片段创建动态大小的边框空间（即 9 切片缩放）。
西蒙娜·斯图尼奥洛
Zustand 5.0：小型、快速的 React 状态管理 — 你无法击败发布公告，上面写着 *“没有新功能” *但是有一些变化。幸运的是，很容易从 v4 升级
保罗·亨舍尔
React Native 8.3 Storybook 简介 — [Storybook](https://react.statuscode.com/link/161143 /5d0bbb4a61）是一个流行的前端组件研讨会，最常与 React 一起使用，但它已经有一段时间有 React Native 变体了，它终于完全跟上了标准 Storybook 的功能。
迈克尔·希尔曼
Jeasx：使用 JSX 的轻量级 SSR 框架 — 一个基于 JSX 和 Fastify 构建的新服务器端渲染框架。它不使用 React，但如果您想继续使用 JSX，同时保持服务器端轻量级，这是一个选择。 JSX 功能由作者的 jsx-async-runtime 包提供。
迈克·雅布隆斯基
Tauri 2.0：使用 Web 技术构建小型、快速的桌面应用程序 — 一种流行的基于 Rust 的 [Electron]( https://react.statuscode.com/link/161147/5d0bbb4a61）用于将 HTML、JavaScript 和 CSS 代码捆绑到跨平台桌面应用程序中。它不使用 V8，而是使用本机可用的 Web 视图，从而产生巨大的空间优势。
蒂尔曼·魏丁格
📰 分类广告
✨ Gitpod Flex 自动化您的完整开发环境 - 包括工具和秘密。保护您的代码并在任何操作系统上更快地交付。
自动创建和维护E2E UI测试。零片。由 Lattice、Bilt Rewards 等公司使用。由 YC、GitHub 首席技术官和其他人支持。
🚀 React Day Berlin 将于 12 月 13 日至 16 日回归！ 与 800 多名开发人员联系，享受超过 45 场演讲，并在欧洲科技中心举办派对。使用代码 React15 可享受 15% 的折扣！
-
react-native-permissions 5.0 – 统一的跨平台权限 API。
-
React-Grid-Layout 1.5 – React 应用程序的可拖动/可调整大小的网格布局。
-
React Easy Crop 5.1 – 用于裁剪图像和视频的组件。 (演示。)
-
React Suite 5.72 – 一套 React 组件。 （示例。）
-
MUI X 7.20 – 流行的 React 组件套件。
-
Redwood 8.4 – 流行的 React 应用框架。
由彼得·库珀和特伦斯·C·甘农策划。
Cooperpress 出版物。
发布者