星期三 03 下午 十二月 4o 2024
Improving your React app's responsiveness
#409 — December 4, 2024
Together with
React Status
Onlook: An Open-Source ‘Figma’-Style Design App for React — A new open source, local-first Figma style design app (for Windows, Linux and macOS) that targets React use cases. You can design layouts directly on a live page and instantly write your changes to code. Early days but looks very promising. GitHub repo.
On Off Inc.
📉 How To Improve ‘Interaction to Next Paint’ in React — Interaction to Next Paint (INP) is a common Web performance metric based on the latency and responsiveness of an app to user interactions, and Google even uses it as part of its ranking mechanism. Jacob offers up lots of advice and resources for improving your INP situation in React apps.
Jacob ‘Kurt’ Groß
Introducing <Waitlist/
> Mode - A Virtual Queue for Your App — Waitlist is a new sign-up mode and component that lets users register interest and join a waitlist for early access to your product. Manage user access and onboarding all within your Clerk Dashboard. Read our changelog announcement for more details.
Clerk sponsor
IN BRIEF:
Fancy building an immersive WebXR experience using React Three XR? The Meta Quest team has an extensive tutorial for you.
If you’re on X still, it’s well worth following Aiden Bai, the creator of React Scan. He’s been putting lots of major React-powered sites through their paces (such as Apple’s) and finding all sorts of rendering problems with it.
🔥 Astro 5.0 has been released.
React Data Fetching Patterns — Not about how to fetch data in React apps, but some common patterns to structure said fetching.
Robin Wieruch
Component Testing RSCs with Storybook — Testing server components can be tricky because they span the frontend/backend divide, but Storybook offers a way and here’s how.
Michael Shilman
📄 Why I Forever Ditched React for Go, HTMX and Templ – Always be sure to find a solution that works for you. Eduardo Rodriguez
📄 How to Code a Shader Based Reveal Effect with React Three Fiber and GLSL Colin Demouge
📄 Real-Time Font Management in Expo Mauro Garcia
🛠 Code, Tools & Libraries
MUI X 7.23.0: Advanced React Components for Complex Use Cases — We’ve diligently linked to each new release of this popular suite of React components, but never featured it “properly”, so it’s about time we did! MUI X is a well rounded suite of professionally designed and MIT-licensed components. v7.23.0 improves the data grid component and adds full React 19 support.
MUI
Radon IDE 1.0: An IDE for React Native Development — Formerly known as React Native IDE, Radon is an extension that significantly extends either VS Code or Cursor into a fully fledged IDE for React Native (and Expo) development. It is a paid product, however, but all the money is funneled back into open source React Native development and the feature set might convince you of its value.
Software Mansion
📰 Classifieds
Debugging faster with AI. Join our live demo about smarter alerts, issue summaries, and suggested fixes to get you back to building faster.
💚 We’ve just sent the latest issue of Node Weekly which includes some cool updates on a powerful server-side canvas library, Prisma 6, and a big update to Node’s Undici HTTP client.
Verification Input: Customizable, Masked Input Component — Check out the demos on the homepage, but this is well suited for entering OTP codes, certain types of password, and the like. GitHub repo.
Andreas Willi
🦋 react-bluesky-embed: Embed Bluesky Functionality in Your App — A lot of folks think social microblogging site Bluesky is ‘having its moment’. If you’re one of them, you can now embed that functionality right into your own app.
Hichem Fantar
📊 React JSX Highcharts 5.0.2 – Highcharts built with proper React components. Now supporting Highcharts v12.
🍩 Minimal Pie Chart 9.0 – Flexible, lightweight pie and donut chart component.
Yoga 3.2 – Meta’s portable layout engine used by React Native 0.77.
React Easy Crop 5.2 – Component for cropping images and videos. (Demo.)
React Native Skia 1.6 – High-performance 2D graphics for React Native.
React Native SVG 15.10 – Cross-platform SVG support for React Native.
TanStack Form 0.39 – Powerful, type-safe Web form state management.
React Icons 5.4 – Popular icon sets ready for use in React apps.
BlockNote 0.20 – ‘Notion-style’ block-based editor.
Curated by Peter Cooper and Terence C. Gannon.
A Cooperpress publication.
#409 — 2024 年 12 月 4 日
连同
[](https://react. statuscode.com/link/162981/5d0bbb4a61)
反应状态
[](https://react.statuscode.com/link/162982/5d0bbb4a61 )
Onlook:用于 React 的开源“Figma”风格设计应用程序 — 一种新的开源、本地优先的 Figma 风格设计针对 React 用例的应用程序(适用于 Windows、Linux 和 macOS)。您可以直接在实时页面上设计布局并立即将更改写入代码。尚处于早期阶段,但看起来很有前途。 GitHub 存储库。
开关公司
📉 如何改进 React 中的“与下一个绘制的交互” — 与下一个绘制的交互 (INP) /react.statuscode.com/link/162985/5d0bbb4a61) 是一种基于延迟和延迟的常见 Web 性能指标应用程序对用户交互的响应能力,谷歌甚至将其用作其排名机制的一部分。 Jacob 提供了大量建议和资源来改善 React 应用中的 INP 情况。
雅各布·“库尔特”·格罗斯
[](https://react.statuscode.com/link/162981 /5d0bbb4a61)
引入 <Waitlist/
> 模式 - 为您的应用程序提供虚拟队列 — Waitlist 是一种新的注册模式以及允许用户注册兴趣并加入等候名单以尽早访问您的产品的组件。在您的文员仪表板中管理所有用户访问和入职。请阅读我们的变更日志公告以了解更多详细信息。
文员赞助人
简而言之:
想要使用 React Three XR 构建沉浸式 WebXR 体验? Meta Quest 团队为您提供了丰富的教程。
如果你还在 X 上,那么 关注 Aiden Bai,[React Scan 的创建者](https:// react.statuscode.com/link/162989/5d0bbb4a61)他一直在测试许多主要的 React 驱动的网站(例如如 Apple 的) 并发现各种渲染问题。
🔥 Astro 5.0 已发布。
React 数据获取模式 — 不是关于 [如何 在 React 应用程序中获取数据](https://react .statuscode.com/link/162993/5d0bbb4a61),但一些常见的结构模式表示抓取。
罗宾·维鲁奇
使用 Storybook 进行组件测试 RSC — 测试服务器组件可能很棘手,因为它们跨越前端/后端鸿沟,但 Storybook 提供了一种方法,具体方法如下。
迈克尔·希尔曼
📄 为什么我永远放弃 React 而选择 Go、HTMX 和 Templ – 始终确保找到适合你的解决方案。 Eduardo Rodriguez
📄 如何使用 React Three Fiber 和 GLSL 编写基于着色器的显示效果 Colin Demouge
📄 Expo 中的实时字体管理 Mauro Garcia
🛠 代码、工具和库
[](https://react.statuscode.com/link/162998/5d0bbb4a61 )
MUI X 7.23.0:适用于复杂用例的高级 React 组件 - 我们努力链接到这个流行的每个新版本React 组件套件,但从未“正确”地展示过它,所以是时候我们这样做了! MUI X 是一套经过专业设计并获得 MIT 许可的全面组件。 v7.23.0 改进了数据网格组件并添加了完整的 React 19 支持。
多用户界面
Radon IDE 1.0:用于 React Native 开发的 IDE — [以前已知](https://react.statuscode. com/link/163001/5d0bbb4a61)作为 React Native IDE,Radon 是一个扩展,可以显着扩展 VS Code或 Cursor 进入一个成熟的 IDE,用于 React Native(和 Expo)开发。然而,它是一款付费产品,但所有资金都重新投入到开源 React Native 开发中,并且其功能集可能会让您相信它的价值。
软件大厦
📰 分类广告
利用 AI 加快调试速度。加入我们的现场演示,了解更智能的警报、问题摘要和修复建议,让您更快地恢复构建。
💚 我们刚刚发送了 最新一期 Node Weekly,其中包括一些关于强大的服务器端画布库、Prisma 6 和Node 的 Undici HTTP 客户端的重大更新。
[](https://react.statuscode.com/link/163004/5d0bbb4a61 )
验证输入:可自定义、屏蔽输入组件 — 查看主页上的演示,但这非常适合输入OTP 代码、某些类型的密码等。 GitHub 存储库
安德烈亚斯·威利
🦋 react-bluesky-embed:在您的应用程序中嵌入 Bluesky 功能 — 很多人认为社交微博网站 [Bluesky]( https://react.statuscode.com/link/163007/5d0bbb4a61)正在“迎来它的时刻”。如果您是其中之一,您现在可以将该功能直接嵌入到您自己的应用中。
希赫姆·范塔尔
📊 React JSX Highcharts 5.0.2 – 使用适当的 React 组件构建的 Highcharts。现在支持 Highcharts v12。
🍩 最小饼图 9.0 – 灵活、轻量级的饼图和圆环图组件。
Yoga 3.2 – React Native 0.77 使用的 Meta 的便携式布局引擎。
React Easy Crop 5.2 – 用于裁剪图像和视频的组件。 (演示。)
React Native Skia 1.6 – React Native 的高性能 2D 图形。
React Native SVG 15.10 – React Native 的跨平台 SVG 支持。
TanStack Form 0.39 – 强大、类型安全的 Web 表单状态管理。
React Icons 5.4 – 流行的图标集可供在 React 应用中使用。
BlockNote 0.20 – “Notion-style”基于块的编辑器。
由彼得·库珀和特伦斯·C·甘农策划。
Cooperpress 出版物。
发布者