星期三 07 晚上 九月 4o 2024
Is component testing the future of UI testing?
#398 — September 4, 2024
Together with
React Status
Redwood v8.0 Released — A long standing, opinionated React & GraphQL (and/or RSC) full-stack framework that covers all the bases for professional dev teams with best-in-class tool support. v8.0 introduces a background jobs system, Docker support, and easier SSR and RSC setup. If you’re unfamiliar with Redwood, you can learn more about its future here.
Redwood Team
Bulletproof React: A Scalable Architecture for Production-Ready Apps — A popular opinionated guide to how you can structure a large scale React app. It’s had a few major updates over the years, but notably now includes Next.js versions, using both app router and page router approaches.
Alan Alickovic
Create Interactive Tutorials in the Browser — TutorialKit enables you to create interactive tutorials instantly without building or managing any backend infrastructure.
StackBlitz sponsor
How to Use React Compiler — The compiler feature in React 19 is generating a lot of buzz — this “complete guide”, as described by this author, covers much of what you’ll need to get started.
Tapas Adhikary
IN BRIEF:
shadcn
has a new CLI tool (explained here on X) where you run npx shadcn init
to add shadcn components and styling to an app. It supports all major React frameworks out of the box.
🤖 Lee Robinson shows off ▶️ the latest enhancements to Vercel’s v0, an AI-based tool for creating apps and components from prompts you supply.
🇺🇸 React Miami 2025 takes place next April in Florida and the call for speakers is open till December.
Why Build-Time Components Are a Leap Forward for Content Sites — Zeno Rocha, of Resend, says that “this is simply the best explanation of how to compile Markdown in React apps.” High praise indeed.
Rodrigo Pombo
Component Testing in Storybook — Storybook’s lead manager says that “after seeing the same patterns again and again, we are betting on Component Testing as the future of UI testing” and sets out to show us why he thinks they’re the perfect complement to end-to-end and unit tests.
Michael Shilman
📄 Creating a PS1-Inspired Jitter Shader with React-Three-Fiber – A retro feel with a modern approach. Oguzhan Tufenk
📄 Create Accessible Charts in React: A Guide to Inclusive Data Visualization – Using HighCharts, specifically. Tiny Octopus
📄 How to Handle Errors in Next.js for Node with the App Router Antonello Zanini
📄 How to Build Fast Surveys with Next.js and SurveyJS Gavin Henderson
🛠 Code, Tools & Libraries
Framer Motion: Fluid Animations & Motion in React — A long-popular, open source motion library for React, made by Framer. As of this week’s v11.4 release, there’s support for React Server Components, including new entrypoints for motion
and m
components.
Framer
Typist 7.0: Tiptap-Based Rich Text Editor Component — Simple and opinionated. You can try several examples in the sidebar. Well suited for basic rich text situations like writing comments or messages and has a single-line mode.
Doist
📰 Classifieds
Build a team-based task manager with Next.js using multi-tenancy and role-based access control.
🆕 Reactile: A new approach to React-based web apps. Create your own views. Let it handle your windows and widgets in a single browser tab.
⚛️ Join 800+ devs at React Summit 2024! Nov 19 & 22, West Planetarium, NY. 50+ speakers, networking, workshops & more. Use React15 for 15% off!
React Email 3.0: New Components for Rendering Emails — React Email is a suite of unstyled components for creating emails using React and TypeScript. v3.0 is a huge update, now with 54 components, support for React 19, and huge build time improvements.
Resend
Introducing Belt: A New Tool for Starting React Native Apps — A CLI tool for starting a new React Native app that takes various mundane decisions away from you and uses tooling and conventions established by a productive app development team.
Thoughtbot
Goxygen: Quickly Generate a Go Backend for a JS Project — A tool that sets up a new Go-based project with Angular, React, or Vue in the front-end, and Docker and Docker Compose files to make it all work.
Sasha Shpota
Rockpack 4.4: An Alternative React App Builder — Akin to Create React App of yesteryear, the goal is to get project setup time as low as possible, but Rockpack holds different opinions around how far to take things and packs in a lot of ideas including server side rendering, linting (now with ESLint 9 support), and testing.
Alex Sergey
Tinybase 5.2 – Powerful reactive data store for local‑first apps. Now with Postgres support (which can even work in-browser!)
Astro 4.15 – The popular content site framework stabilizes Astro Actions, a solution for fully type-safe backend functions.
React Native Gesture Handler 2.19 – Exposes platform native touch APIs.
Plasmo 0.89 – Like Next.js but for building browser extensions.
📊 Tremor 3.18 – React library for building dashboards fast.
rc-tree 5.9 – A basic tree-view component.
Curated by Peter Cooper and Terence C. Gannon.
A Cooperpress publication.
#398 — 2024 年 9 月 4 日
连同
[](https:// react.statuscode.com/link/159336/5d0bbb4a61)
反应状态
[](https://react.statuscode.com/link/159337/5d0bbb4a61 )
Redwood v8.0 已发布 — 一个长期存在的、固执己见的 React 和 GraphQL(和/或 RSC)全栈框架,涵盖专业开发团队的所有基础以及一流的工具支持。 v8.0 引入了后台作业系统、Docker 支持以及更简单的 SSR 和 RSC 设置。如果您不熟悉 Redwood,可以在此处了解有关其未来的更多信息。
红木队
Bulletproof React:适用于生产就绪应用程序的可扩展架构 — 关于如何构建大型 React 应用程序的流行指南。多年来它进行了一些重大更新,但值得注意的是现在包括 Next.js 版本,同时使用应用路由器和页面路由器方法。
艾伦·阿利科维奇
在浏览器中创建交互式教程 - TutorialKit 使您能够立即创建交互式教程,而无需构建或管理任何后端基础设施。
StackBlitz 赞助商
如何使用 React 编译器 — [编译器](https://react.statuscode.com/link/159341 /5d0bbb4a61)React 19 中的功能引起了很多关注——正如作者所描述的,这个“完整指南”涵盖了您入门所需的大部分内容。
塔帕斯·阿迪卡里
简而言之:
shadcn
有一个新的 CLI 工具(在 X 上解释),您可以在其中运行 npx shadcn init
将 shadcn 组件和样式添加到应用程序。它开箱即用地支持所有主要的 React 框架。
🤖 Lee Robinson 展示了 ▶️ Vercel v0 的最新增强功能,这是一种基于 AI 的工具,用于根据您提供的提示创建应用程序和组件。
🇺🇸 React 迈阿密 2025 将于明年 4 月在佛罗里达州举行,[招募演讲者](https://react.statuscode.com/link /159345/5d0bbb4a61) 开放至 12 月。
为什么构建时组件是内容网站的一次飞跃 — Resend 的 Zeno Rocha,[说](https:/ /react.statuscode.com/link/159347/5d0bbb4a61)*“这就是如何在 React 应用程序中编译 Markdown 的最佳解释。”*确实是高度赞扬。
罗德里戈·庞博
Storybook 中的组件测试 — Storybook 的首席经理表示 “在一次又一次看到相同的模式后,我们打赌关于组件测试作为 UI 测试的未来”,并向我们展示了为什么他认为它们是端到端和单元测试的完美补充。
迈克尔·希尔曼
📄 使用 React-Three-Fiber 创建受 PS1 启发的抖动着色器 – 复古的感觉与现代的方法。奥古詹·图芬克
📄 在 React 中创建可访问的图表:包容性数据可视化指南 – 使用 [HighCharts](https://react.statuscode.com/link/ 159351/5d0bbb4a61),具体来说。小章鱼
📄 如何使用 App Router 处理 Node 的 Next.js 中的错误 Antonello Zanini
📄 如何使用 Next.js 和 SurveyJS 构建快速调查 Gavin Henderson
🛠 代码、工具和库
Framer Motion: React 中的流体动画和运动 — 一个长期流行的 React 开源运动库,由成帧者。 从本周的 v11.4 版本开始,支持 React Server 组件,包括“motion”和“m”组件的新入口点。
成帧器
Typist 7.0:基于 Tiptap 的富文本编辑器组件 — 简单且固执己见。您可以尝试侧栏中的几个示例。非常适合基本的富文本情况,例如撰写评论或消息,并且具有单行模式。
多伊斯特
📰 分类广告
使用 Next.js 构建基于团队的任务管理器,使用多租户和基于角色的访问控制。
🆕 Reactile: 一种基于 React 的 Web 应用程序的新方法。创建您自己的观点。让它在单个浏览器选项卡中处理您的窗口和小部件。
⚛️ 与 800 多名开发人员一起参加 2024 年 React 峰会! 11 月 19 日至 22 日,纽约西天文馆。 50 多位演讲者、网络、研讨会等。使用 React15 可享受 15% 的折扣!
[](https://react.statuscode.com/link/159359/5d0bbb4a61 )
React Email 3.0:用于渲染电子邮件的新组件 — React Email /159360/5d0bbb4a61) 是一套无样式组件,用于使用 React 和 TypeScript 创建电子邮件。 v3.0 是一个巨大的更新,现在具有 54 个组件,支持 React 19,并且构建时间有了巨大的改进。
重新发送
Belt 简介:用于启动 React Native 应用程序的新工具 — 一个用于启动新的 React Native 应用程序的 CLI 工具,该工具需要执行各种日常操作决策权不在您手中,并使用高效的应用开发团队建立的工具和惯例。
思想机器人
Goxygen:为 JS 项目快速生成 Go 后端 — 一个设置新 Go 的工具基于 /react.statuscode.com/link/159367/5d0bbb4a61) 的项目,在前端使用 Angular、React 或 Vue,以及 Docker 和 Docker Compose 文件以使其全部正常工作。
萨莎·什波塔
Rockpack 4.4:另一种 React App Builder — 类似于过去的 Create React App,目标是获得项目设置时间尽可能短,但 Rockpack 对于要走多远持有不同的看法,并包含许多想法,包括服务器端渲染、linting(现在支持 ESLint 9)和测试。
亚历克斯·谢尔盖
Tinybase 5.2 – 适用于本地优先应用的强大反应式数据存储。现在有了 Postgres 支持(甚至可以在浏览器中工作!)
Astro 4.15 – 流行的内容网站框架稳定了 Astro Actions,这是一种完全类型安全的后端功能解决方案。
React Native Gesture Handler 2.19 – 公开平台本机触摸 API。
Plasmo 0.89 – 与 Next.js 类似,但用于构建浏览器扩展。
📊 Tremor 3.18 – 用于快速构建仪表板的 React 库。
rc-tree 5.9 – 基本的树视图组件。
由彼得·库珀和特伦斯·C·甘农策划。
Cooperpress 出版物。
发布者