#408 — November 27, 2024
Together with
React Status
React Router v7 Released — Michael explains it best: “v7 brings everything you love about Remix back into React Router proper. We encourage all Remix v2 users to upgrade […] For the majority of the React ecosystem […] we believe React Router v7 will be the smoothest way to bridge the gap between React 18 and 19.” The project has a nifty new homepage too.
Michael Jackson
💡 Alem Tuzlak has ▶️ a take on whether you should upgrade immediately or not.
Vite 6.0 Released — Despite coming from the creator of Vue.js, the Vite build tool has rapidly found itself at the heart of the React ecosystem with its enviable combo of speed, simplicity and extensibility. v6 doubles down on each of these and introduces an experimental ‘Environment API’ for framework authors to use Vite in more powerful ways.
Evan You et al.
A Lightweight Model Is Just the Right Size — Gemini 1.5 Flash-8B is production ready and faster than ever. Optimized for speed and efficiency, Gemini now offers Grounding with Google Search, enabling JavaScript developers to get more accurate responses. Try it on for size via Google AI Studio.
Google Gemini sponsor
IN BRIEF:
-
📉 Last week we featured Aiden Bai’s React Scan tool that can detect performance issues in React apps. Aiden’s been busy and used it to find a cause of slow renders on GitHub (which GitHub has already fixed). It’s now also available as a CLI app too.
-
The latest State of JavaScript survey is open to take now.
-
The TanStack Start full-stack React framework is now in beta. Dev Leonardo ▶️ has a 10-minute video tour.
-
Deno is taking the JavaScript trademark fight with Oracle to the USPTO.
-
TypeScript 5.7 has been released.
Feature-Based React Architecture — “In a feature-based architecture, each feature is decoupled from the others as much as possible. This way we can keep the components and their data fetching functions focused on their domain.”
Robin Wieruch
▶ Building a Teleprompter App in 30 Minutes with AI — Building apps with AI powered tools isn’t that unusual nowadays, but if you’ve never seen the process, this is a good look at the process all the way through to deployment. He uses Vercel’s v0, Replit and Cursor.
Kilian Ekamp
📄 From Gatsby to Eleventy – Moving from a React framework to a Node.js static site generation approach. Matt Steele
📄 Dynamic Terrain Deformations with React Three Fiber – Getting an animated 3D model to leave footprints in the snow. Oguzhan Tufenk
📄 7 Challenges to Try Before a React Interview Corina Udrescu
🛠 Code, Tools & Libraries
Tremor: React Component Suite for Dashboards and Charts — Built with React, Tailwind CSS, and Radix UI, you can use Tremor by either copy and pasting the components or via their npm package. You get all the typical dashboard UI elements like charts, progress indicators, activity trackers, accordions, tables, etc.
Tremor Labs
Spoiled: A Realistic ‘Spoiler’ Component — The homepage is a live demo. A neat way to keep things hidden until a user wants to see them. Powered by the CSS Painting API with a static image fallback. GitHub repo.
Alexey Taktarov
TinyBase v5.4: A Reactive Data Store for Local-First Apps — A powerful reactive data store you could essentially use as the entire backend of your app. v5.4 ups the ante with a WebSocket synchronization server that runs on Cloudflare Durable Objects.
James Pearce
≡ React Burger Menu 3.1: Off-Canvas Sidebar Component — Has a variety of effects and styles powered by CSS transitions and SVG path animations. GitHub repo.
Imogen Wentworth
📰 Classifieds
Meticulous automatically creates & maintains E2E UI tests. Zero flakes. Used by Lattice, Bilt Rewards and others.
🐘 PostgreSQL user? Check out the latest issue of Postgres Weekly, one of our sister newsletters.
React Swipeable: Swipe Event Handler Hook — Customizable, lightweight hook that provides all the information needed to manage swipe interactions. GitHub repo.
Nearform
🩻 dwv-react: A React DICOM-Format Medical Image Viewer — DICOM is a standard for distributing medical images, such as from CT or MRI scans.
ivmartel
-
Relay 18.2 – Facebook’s reactive GraphQL-based React framework. (Homepage.)
-
React Native Share 12.0 – Share simple data between apps.
-
lowlight 3.2 – Virtual syntax highlighting for virtual DOMs and non-HTML things.
-
React Admin 5.4 – Framework for building B2B frontend interfaces.
-
🗓️ React DayPicker 9.4 – Customizable date picker.
-
Fortune Sheet 0.20 – Drop-in Excel-like spreadsheet control.
-
Preact 10.25 – The 3KB React-compatible alternative.
-
Ink 5.1 – Use React to build CLI apps.
Curated by Peter Cooper and Terence C. Gannon.
A Cooperpress publication.
#408 — 2024 年 11 月 27 日
连同
[](https://react. statuscode.com/link/162802/5d0bbb4a61)
反应状态
[](https://react.statuscode.com/link/162803/5d0bbb4a61 ）
React Router v7 已发布 — Michael 对此做了最好的解释：*“v7 将您喜爱的 Remix 的所有内容带回了 React Router 中。我们鼓励所有 Remix v2 用户升级 […] 对于 React 生态系统的大多数 […] 我们相信 React Router v7 将是弥合 React 18 和 19 之间差距的最顺畅方式。”*项目也有一个漂亮的新主页。
迈克尔·杰克逊
💡 Alem Tuzlak ▶️ 关于是否应该立即升级的看法。
Vite 6.0 发布 — 尽管来自 Vue.js 的创建者，Vite 构建工具很快就发现自己成为了核心React 生态系统具有令人羡慕的速度、简单性和可扩展性组合。 v6 在每一个方面都加倍努力，并引入了一个实验性的“环境 API”，供框架作者以更强大的方式使用 Vite。
埃文·尤等人。
[](https://react.statuscode.com/link/162802 /5d0bbb4a61)
轻量级模型尺寸恰到好处 — Gemini 1.5 Flash-8B 已做好生产准备，速度比以往任何时候都快。 Gemini 针对速度和效率进行了优化，现在提供 Grounding with Google Search，使 JavaScript 开发人员能够获得更准确的响应。通过 Google AI Studio 试穿尺码。
谷歌双子座赞助商
简而言之：
-
📉 上周我们推荐了 Aiden Bai 的 React Scan 工具，它可以检测 React 应用程序中的性能问题。 Aiden 一直很忙，并用它来在 GitHub 上查找渲染缓慢的原因（GitHub 已[已修复](https://react.statuscode .com/link/162809/5d0bbb4a61))。现在它也可以作为 CLI 应用 提供。
-
最新的 JavaScript 现状调查 现已开放接受。
-
TanStack Start 全栈 React 框架现已处于测试阶段。 Dev Leonardo ▶️ 有一个 10 分钟的视频导览。
-
TypeScript 5.7 已发布。
基于功能的 React 架构 — “在基于功能的架构中，每个功能都与其他功能解耦尽可能。这样我们就可以让组件及其数据获取功能专注于其领域。”
罗宾·维鲁奇
▶ 使用 AI 在 30 分钟内构建提词器应用程序 — 使用 AI 支持的工具构建应用程序如今并不罕见，但如果您从未见过该流程，那么这可以很好地了解整个部署过程。他使用 Vercel 的 v0、Replit 和 Cursor。
基利安·埃坎普
📄 从 Gatsby 到 Eleventy – 从 React 框架转向 Node.js 静态站点生成方法。马特·斯蒂尔
📄 React Three Fiber 的动态地形变形 – 获取动画 3D 模型在雪地里留下脚印。奥古詹·图芬克
📄 React 面试前要尝试的 7 个挑战 Corina Udrescu
🛠 代码、工具和库
[](https://react.statuscode.com/link/162821/5d0bbb4a61 ）
Tremor：用于仪表板和图表的 React 组件套件 — 使用 React、Tailwind CSS 和 Radix UI 构建，您可以通过以下方式使用 Tremor：复制并粘贴组件或通过其 npm 包。您可以获得所有典型的仪表板 UI 元素，例如 图表、进度指示器、活动跟踪器、手风琴、表格等。
震颤实验室
Spoiled：现实的“剧透”组件 - 主页是一个现场演示。这是一种巧妙的方法，可以将内容隐藏起来，直到用户想要查看它们为止。由具有静态图像回退功能的 CSS Painting API 提供支持。 GitHub 存储库。
阿列克谢·塔克塔罗夫
TinyBase v5.4：本地优先应用程序的反应式数据存储 - 一个强大的反应式数据存储，您基本上可以用作您应用程序的整个后端。 v5.4 通过在 Cloudflare Durable 对象上运行的 WebSocket 同步服务器提高了赌注。
詹姆斯·皮尔斯
React Burger Menu 3.1：Off-Canvas Sidebar Component — 具有由 CSS 过渡和支持的各种效果和样式SVG 路径动画。 GitHub 存储库。
伊莫金·温特沃斯
📰 分类广告
Meticulous 自动创建和维护 E2E UI 测试。零片。由 Lattice、Bilt Rewards 等公司使用。
🐘 PostgreSQL 用户？请查看最新一期的 Postgres Weekly 我们的姊妹通讯之一。
React Swipeable: Swipe Event Handler Hook — 可定制的轻量级钩子，提供管理滑动交互所需的所有信息。 GitHub 存储库。
近形式
🩻 dwv-react：React DICOM 格式的医学图像查看器 — DICOM 是分发医学图像的标准，例如如 CT 或 MRI 扫描。
伊夫马特尔
-
Relay 18.2 – Facebook 的基于 GraphQL 的反应式 React 框架。 （主页。)
-
React Native Share 12.0 – 在应用之间共享简单数据。
-
lowlight 3.2 – 虚拟 DOM 和非 HTML 内容的虚拟语法突出显示。
-
React Admin 5.4 – 用于构建 B2B 前端界面的框架。
-
🗓️ React DayPicker 9.4 – 可自定义的日期选择器。
-
Fortune Sheet 0.20 – 类似 Excel 的电子表格控件。
-
Preact 10.25 – 3KB React 兼容替代方案。
-
Ink 5.1 – 使用 React 构建 CLI 应用程序。
由彼得·库珀和特伦斯·C·甘农策划。
Cooperpress 出版物。
发布者