#400 — September 18, 2024
Together with
React Status
A React 19 Cheat Sheet — From Kent C Dodds, of Epic React fame, comes this part cheat sheet, part succinct reminder of some of the new things you can do in React 19, along with (very) brief code examples.
Kent C. Dodds
Next.js SaaS Starter: A Next.js Template for Webapps — A starter template for building a SaaS-style webapp using Next.js with authentication, Stripe integration, and a dashboard for users. It uses Postgres and Drizzle for the database and UI elements based on shadcn/ui and Tailwind.
Lee Robinson (Vercel)
WorkOS: Start Selling to Enterprises with Just a Few Lines of Code — WorkOS is a modern identity platform for B2B SaaS. It provides flexible and easy-to-use APIs to integrate SSO, SCIM, and RBAC in minutes. WorkOS is used by hundreds of high-growth startups including Perplexity, Vercel, Drata, & Webflow.
WorkOS sponsor
Introducing TanStack Router — TanStack Router is a powerful and mature type-safe React router aimed at client-side use (though a full-stack option is beginning to appear with TanStack Start). Adam shows off the essentials with the hope of getting you on board the TanStack train too.
Adam Rackis
IN BRIEF:
-
reactR is a project to enable the use of React inside the R project, a language and environment commonly used in statistical computing and technical visualizations.
-
Vercel has released Vercel AI SDK 3.3.
A Milestone for TypeScript Performance in TanStack Router — Complex route definitions have historically resulted in sluggish in-editor performance. Luckily, the TanStack team has been doing a lot to improve this.
Christopher Horobin (TanStack)
How Infinite Queries Work — Infinite queries are React Query’s way to make “those doom-scrolling pages we all hate so much” as this author describes them.
Dominik Dorfmeister (AKA TkDodo)
How to Create a Chrome Extension with React, TypeScript, Tailwind CSS and Vite — Covers everything you need to know right through to publishing in the Chrome Web Store.
Lokman Musliu
SPA Lazy Loading Pitfalls — A concise set of recommendations to address common problems with this widely used pattern.
Brad Westfall
📺 Why Everyone Loves Zustand – “It’s rare I see a React codebase with complex state that wouldn’t benefit from it.” Theo Browne
📺 Building a React-Powered TODO App in 9 Steps – A 54 second(!) video showing off the key stages, all without using any libraries except for React. Danny Thompson
📰 Classifieds
🆕 Discover Reactile, for React web apps. Create your views. Let it handle windows and widgets in a tile layout within a single browser tab.
🛠️ [Workshop] Fix Your Front-End 101. On Sept 24, join our JavaScript team for practical tips to make debugging more tolerable!
🛠 Code, Tools & Libraries
DECK.GL: GPU-Powered Large-Scale Data Visualization Framework — Particularly well suited to geospatial data visualization use cases that go beyond typical 2D views. There are plenty of examples to show you what it can do. Can be used through both vanilla JS and React interfaces.
OpenJS Foundation
Conform: A Type-Safe Form Validation Library — Gives you control over the form submission lifecycle from client to the server and exposes the form state through the useForm() hook. v1.2.0 improves how field values are automatically updated, meaning less code for you to write.
Edmund Hung
hono-remix-adapter: A Hono / Remix Adapter — A Vite plugin to enable you to build a Hono-based app and integrate it within a Remix app.
Yusuke Wada
FortuneSheet: A React-Powered Excel-Like JS Spreadsheet Control — There’s a live Storybook demo showing it off.
Suzhou Ruilisi Technology Co.
Simple-Keyboard 3.8: A Modern Virtual Keyboard for React — If you need to render a working virtual keyboard within your app, this is for you.
Francisco Hodge et al.
-
Tinybase 5.3 – Powerful reactive data store for local‑first apps. Now with SSR support.
-
Material UI 6.1 – Independent React components using Material Design.
-
semantic-autocomplete 3.1 – Fast semantic search React component.
-
react-jsx-parser 2.1 – Parses JSX and outputs rendered components.
-
React Admin 5.2 – Framework for building B2B frontend interfaces.
-
Preact 10.24 – The 3KB React-compatible alternative.
-
MUI X 7.17 – Popular React component suite.
🕰️ ICYMI (Older links, still worth checking out)
-
Jakub Janczyk shares a quick way to improve React testing times (.. it involves turning off style calculations).
-
Anton Martyniuk shows us how to use React to create “beautiful and modern emails without stress”.
-
This post from Mario Yonan gives us a broad look at React app testing, covering a variety of methods and best practices to adopt when employing them.
Curated by Peter Cooper and Terence C. Gannon.
A Cooperpress publication.
#400 — 2024 年 9 月 18 日
连同
[](https://react. statuscode.com/link/159960/5d0bbb4a61)
反应状态
[](https://react.statuscode.com/link/159961/5d0bbb4a61 ）
React 19 备忘单 — 来自 Epic React 的 Kent C Dodds .com/link/159962/5d0bbb4a61）名声大噪，这部分是备忘单，部分是简洁地提醒您可以在 React 19 中执行的一些新操作，以及（非常）简短的代码示例。
肯特·C·多兹
Next.js SaaS Starter：适用于 Webapps 的 Next.js 模板 — 使用 Next 构建 SaaS 样式 Web 应用程序的入门模板.js 具有身份验证、Stripe 集成和用户仪表板。它使用 Postgres 和 Drizzle 作为基于 shadcn/ui 和 Tailwind 的数据库和 UI 元素。
李·罗宾逊（维塞尔）
WorkOS：只需几行代码即可开始向企业销售 — WorkOS 是 B2B SaaS 的现代身份平台。它提供灵活且易于使用的 API，可在几分钟内集成 SSO、SCIM 和 RBAC。 WorkOS 已被数百家高增长初创公司使用，包括 Perplexity、Vercel、Drata 和 Webflow。
WorkOS赞助商
TanStack 路由器简介 — TanStack 路由器 是一个强大且成熟的类型安全的 React 路由器，旨在客户端使用（尽管全栈选项开始随 TanStack Start 出现）。 Adam 展示了基本要素，希望您也能登上 TanStack 列车。
亚当·拉基斯
简而言之：
-
reactR 是一个在 R 项目 中使用 React 的项目/5d0bbb4a61），统计计算和技术可视化中常用的语言和环境。
-
Vercel 发布了 Vercel AI SDK 3.3
TanStack Router 中 TypeScript 性能的里程碑 — 复杂的路由定义历来导致编辑器内性能缓慢。幸运的是，TanStack 团队一直在做“很多”工作来改进这一点。
克里斯托弗·霍罗宾 (TanStack)
无限查询如何工作 — 无限查询是 [React Query](https://react.statuscode.com/link/159974 /5d0bbb4a61）的方法来制作“那些我们都非常讨厌的厄运滚动页面”，正如作者所描述的那样。
多米尼克·多夫梅斯特（又名 TkDodo）
如何使用 React、TypeScript、Tailwind CSS 和 Vite 创建 Chrome 扩展 — 涵盖您需要了解的所有内容在 Chrome 网上应用店 中发布。
洛克曼·穆斯柳
SPA 延迟加载陷阱 — 一组简洁的建议，用于解决这种广泛使用的模式的常见问题。
布拉德·韦斯特法尔
📺 为什么每个人都喜欢 Zustand – “我很少看到具有复杂状态的 React 代码库不会从中受益。” Theo Browne
📺 通过 9 个步骤构建一个由 React 驱动的 TODO 应用程序 – 一段 54 秒（！）的视频展示了关键阶段，所有这些都没有使用任何库，除了用于反应。丹尼·汤普森
📰 分类广告
🆕 发现 Reactile，适用于 React Web 应用程序。创建您的观点。让它在单个浏览器选项卡中处理图块布局中的窗口和小部件。
🛠️ [研讨会] 修复你的前端 101。 9 月 24 日，加入我们的 JavaScript 团队，获取实用技巧，让调试变得更容易！
🛠 代码、工具和库
[](https://react.statuscode.com/link/159982/5d0bbb4a61 ）
DECK.GL：GPU 驱动的大规模数据可视化框架 — 特别适合地理空间数据可视化用例典型的 2D 视图。有大量示例向您展示它可以做什么。可以通过普通 JS 和 React 接口使用。
OpenJS 基金会
Conform：类型安全的表单验证库 — 使您能够控制从客户端到服务器的表单提交生命周期，并公开通过 useForm() 钩子形成状态。 v1.2.0 改进了字段值自动更新的方式，这意味着您需要编写的代码更少。
洪德蒙
hono-remix-adapter：Hono / Remix 适配器 — 一个 Vite 插件，使您能够构建基于 Hono 的应用程序并将其集成到 Remix 应用程序中。
和田佑介
FortuneSheet：一个由 React 驱动、类似 Excel 的 JS 电子表格控件 — 有 [一个现场 Storybook 演示](https://react .statuscode.com/link/159988/5d0bbb4a61) 炫耀它。
苏州瑞力斯科技有限公司
[](https://react.statuscode.com/link/159989/5d0bbb4a61 ）
Simple-Keyboard 3.8：React 的现代虚拟键盘 — 如果您需要在其中渲染一个可用的虚拟键盘您的应用程序，这是为您准备的。
弗朗西斯科·霍奇等人。
-
Tinybase 5.3 – 适用于本地优先应用程序的强大反应式数据存储。现在有了 SSR 支持。
-
Material UI 6.1 – 使用 Material Design 的独立 React 组件。
-
semantic-autocomplete 3.1 – 快速语义搜索 React 组件。
-
react-jsx-parser 2.1 – 解析 JSX 并输出渲染的组件。
-
React Admin 5.2 – 用于构建 B2B 前端界面的框架。
-
Preact 10.24 – 3KB React 兼容替代方案。
-
MUI X 7.17 – 流行的 React 组件套件。
🕰️ ICYMI（较旧的链接，仍然值得查看）
-
Jakub Janczyk 分享一种提高 React 测试时间的快速方法 (..它涉及关闭样式计算)。
-
Anton Martyniuk 向我们展示了如何使用 React 创建“美丽而现代的电子邮件，没有压力”。
-
Mario Yonan 的这篇文章让我们对 React 应用程序测试有一个广泛的了解，涵盖了各种方法以及使用这些方法时要采用的最佳实践。
由彼得·库珀和特伦斯·C·甘农策划。
Cooperpress 出版物。
发布者