#399 — September 11, 2024
Together with
React Status
What’s New in React 19 — A thorough roundup of what’s coming in React 19, which has been in release candidate status for several months now, covering both headline features like Server Components and Actions, as well as many smaller enhancements like easier preloading of resources and control over stylesheet loading precedence.
Michael Novotny (Vercel)
The Frontend Masters Knowledge Quest Sale Is Going on All Week! — The Frontend Masters Knowledge Quest sale is now on! There’s four new learning paths (including JS performance and code architecture) with more epic courses on the way throughout 2024 and beyond.
Frontend Masters sponsor
React and FormData — FormData is ironically both the ‘newest and yet oldest’ standard for accessing form data. Here are some practical ways for using it with TypeScript.
Brad Westfall
IN BRIEF:
-
Over on X, React Native’s Alex Hunt announced the new React Native DevTools, coming to the forthcoming React Native 0.76.
-
📅 Vercel’s Next.js Conf 2024 is taking place this October 24, both in person in San Francisco, as well as online.
-
Last week, we mentioned shadcn’s new CLI tool. Now, React YouTuber Jack Herrington ▶️ shows off why it’s so useful.
-
OpenAI has switched ChatGPT from Next.js to a Remix-based app, and ▶️ Wes Bos has done some digging around to figure out why.
-
And it’s not just OpenAI, Echobind found switching from Next.js to Remix made their site faster too.
-
TypeScript 5.6 has been released.
An SSR Performance Showdown — Fastify’s Matteo Collina set out to find out the current state of server-side rendering performance across today’s most popular libraries – yes, including React.
Matteo Collina
📄 You Can’t Make Children ‘Type Safe’ in React and TypeScript Matt Pocock
📄 Building PC Game UIs Using React – “I wanted to write this post to show how React has secretly found its way into the games that we play.” Prabashwara Seneviratne
📄 Deploying a Next.js App to Production on Any Server Kurta Payjama
📄 Creating an Animated Hamburger Menu Icon for React Ibadehin Mojeed (LogRocket)
📄 Replacing React Code with CSS’s :has Selector? Nadia Makarevich
🛠 Code, Tools & Libraries
react-call: Call Your React Components — Gives you a call(props) function as an imperative way to call a component, even from outside React and with no context providers needed. GitHub repo.
Ismael Ramon
📰 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.
Automatically creates & maintains E2E UI tests. Zero flakes. Used by Lattice, Bilt Rewards, Capchase, Courier and others.
Valtio 2.0: Proxy State Made Simple — Turns objects into self-aware proxies so you can access state and subscribe to changes outside of components, add computed properties and more. Designed for React and compatible with Suspense, but also possible to use with vanilla JS. – GitHub repo.
Daishi Kato
🐈 React Kitten: Make Desktop-Like Environments for the Web — A quirky, but interestingly presented, project that lets you create a sort of in-browser ‘desktop environment’ with React. The live demo in the docs shows off the idea quite well.
Oğuzhan Eroğlu
react-native-compressor: Compress Media Before Uploading It — Many chat apps compress media locally before uploading them to a server, and now your React Native app can too.
Numan
-
Relay 18.0 – Facebook’s alternative framework for building data-driven React apps.
-
Veact 1.0 – Mutable state enhancer library for React, built on top of
@vue/reactivity. -
React Elm Component 0.2 – Embed an Elm app within a React component.
-
react-json-view-lite 1.5 – Render JSON objects in a tree view, as here.
-
React Joyride 2.9.1 – Create guided tours in your apps.
-
Vaul 0.9.2 – Unstyled drawer component. (Demo.)
-
Redwood 8.1 – GraphQL-driven React framework.
📅 A React event for your calendar
In partnership with GitNation, we’ve reserved a free limited remote ticket to React Advanced 2024 for React Status readers (with 50% of the talks – workshops excluded).
Join Mark Dalgleish, Daishi Kato, Jack Herrington, and more, and if you share your badge on LinkedIn/Twitter and invite 3+ friends, you can get an upgrade to a full remote ticket for free. Advanced React and Web Development topics await.
Check out React Advanced 2024 here.
Curated by Peter Cooper and Terence C. Gannon.
A Cooperpress publication.
#399 — 2024 年 9 月 11 日
连同
[](https:// react.statuscode.com/link/159646/5d0bbb4a61)
反应状态
[](https://react.statuscode.com/link/159647/5d0bbb4a61 ）
React 19 中的新增功能 — React 19 中即将推出的内容的全面综述，该版本已[处于候选发布状态]( https://react.statuscode.com/link/159648/5d0bbb4a61）已经有几个月了，涵盖了服务器组件和操作等主要功能，以及许多较小的增强功能，例如更轻松地预加载资源和控制样式表加载优先级。
迈克尔·诺沃特尼（维塞尔）
前端大师知识探索促销活动持续整周！ — 前端大师知识探索促销活动现已开始！有四种新的学习路径（包括 JS 性能和代码架构），2024 年及以后还将推出更多精彩课程。
前端大师赞助商
React 和 FormData — FormData具有讽刺意味的是，它既是访问表单数据的“最新也是最古老”的标准。以下是一些将其与 TypeScript 结合使用的实用方法。
布拉德·韦斯特法尔
简而言之：
-
在 X 上，React Native 的 Alex Hunt 宣布了新的 React Native DevTools，即将推出的 React Native 0.76。
-
📅 Vercel 的 Next.js Conf 2024 将于今年 10 月 24 日在旧金山举行，同时也在线上举行。
-
上周，我们提到了 shadcn 新的 CLI 工具。现在，React YouTuber Jack Herrington ▶️ 展示了它为何如此有用。
-
OpenAI 已将 ChatGPT 从 Next.js 切换为 Remix基于应用程序，并且 ▶️ Wes Bos 进行了一些挖掘以找出原因。
-
不仅仅是 OpenAI，Echobind 发现从 Next.js 切换到 Remix 也让他们的网站变得更快。
-
TypeScript 5.6 已发布。
SSR 性能对决 — Fastify 的 Matteo Collina 着手找出当今服务器端渲染性能的现状最受欢迎的库 – 是的，包括 React。
马泰奥·科里纳
📄 你不能让孩子在 React 和 TypeScript 中“类型安全” Matt Pocock
📄 使用 React 构建 PC 游戏 UI – “我想写这篇文章来展示 React 如何秘密地进入我们玩的游戏.” Prabashwara Seneviratne
📄 在任何服务器上将 Next.js 应用程序部署到生产环境 Kurta Payjama
📄 为 React 创建动画汉堡菜单图标 Ibadehin Mojeed (LogRocket)
📄 用 CSS 的 :has 选择器替换 React 代码？ Nadia Makarevich
🛠 代码、工具和库
[](https://react.statuscode.com/link/159666/5d0bbb4a61 ）
react-call：调用你的 React 组件 — 为你提供一个 call(props) 函数作为命令调用组件的方式，甚至可以从 React 外部调用，并且不需要上下文提供程序。 GitHub 存储库。
伊斯梅尔·拉蒙
📰 分类广告
🆕 发现 Reactile，适用于 React Web 应用程序。创建您的观点。让它在单个浏览器选项卡中处理图块布局中的窗口和小部件。
自动创建和维护E2E UI测试。零片。由 Lattice、Bilt Rewards、Capchase、Courier 等使用。
Valtio 2.0：代理状态变得简单 — 将对象转变为自我感知代理，以便您可以访问状态并订阅外部的更改组件，添加计算属性等。专为 React 设计并与 Suspense 兼容，但也可以与 vanilla JS 一起使用。 – [GitHub repo。](https://react.statuscode .com/link/159673/5d0bbb4a61)
加藤大师
🐈 React Kitten：为 Web 创建类似桌面的环境 — 一个古怪但有趣的项目，可以让您使用 React 创建一种浏览器内“桌面环境”。 文档中的实时演示 很好地展示了这个想法。
奥古詹·埃罗格鲁
react-native-compressor：上传前压缩媒体 — 许多聊天应用程序在将媒体上传到服务器之前会在本地压缩媒体，并且现在您的 React Native 应用程序也可以了。
努曼
-
Relay 18.0 – Facebook 用于构建数据驱动的 React 应用程序的替代框架。
-
Veact 1.0 – React 的可变状态增强器库，构建在
@vue/reactivity之上。 -
React Elm Component 0.2 – 将 Elm 应用程序嵌入到反应组件。
-
react-json-view-lite 1.5 – 在树视图中渲染 JSON 对象，[如此处。](https://react.statuscode .com/link/159682/5d0bbb4a61)
-
React Joyride 2.9.1 – 在您的应用程序中创建导游应用程序。
-
Vaul 0.9.2 – 无样式抽屉组件。 （演示。）
-
Redwood 8.1 – GraphQL 驱动的 React 框架。
📅 日历的 React 活动
我们与 GitNation 合作，为 React Status 读者（50% 的会谈 - 研讨会除外）。
加入 Mark Dalgleish、Daishi Kato、Jack Herrington 等人的行列，如果您在 LinkedIn/Twitter 上分享您的徽章并邀请 3 位以上的朋友，您就可以免费升级到完整的远程门票。 高级 React 和 Web 开发主题正在等待。
由彼得·库珀和特伦斯·C·甘农策划。
Cooperpress 出版物。
发布者