前端周热点112: JSX Expressions, Storybook, Remix, Actionless reducers, Atomic Forms

大家好!

看起来很多开发者都已经在度假了😎。在我这边，我也会在这个夏天跳过一些版本来休息。

这周，我们有很多React和React-Native的内容。很多来自社区的关于Bun的非常积极的反馈!

(译者注：羡慕法国人假期多，这应该是今年的第三次休假了！由于上海疫情耽搁近3个月的周刊终于赶上Sébastien的进度了，下次将会开始同步最新周刊回复每周一次的更新频率以及拖了N久的react 18系列文章终于要提上章程了！)

React

Josh Comeau正在准备他关于React的下一个课程。他提议回到JavaScript的基础知识，从而让人们更好地理解JJSX的工作原理，而JJSX只在表达式中起作用。在同一个话题上，我很想看到do-expressions提案的进展😇。

一篇关于Storybook的官方文章，很好地解释了你可以用装饰器（decorators）做的所有事情：添加布局、全局提供者、模拟Redux商店或请求...... 它可以帮助在你的Storybook中添加 "connected "组件，否则由于上下文的依赖性而无法呈现。

Mark Erikson（Redux）解释了他如何根据各种或多或少可靠的工具来分析npm包的使用趋势。下载统计数字通常与CI构建有关。他以React状态管理器为例。他现在估计Redux/React的使用率为33%（之前为45-50%）

useReducer()并不是为复杂的情况保留的：它也可以用于非常简单的状态机，比如把一个布尔值从假变成真。

拓展阅读

📜 Next.js: open external links in a New Tab: it can be interesting to create your own Link abstraction on top of the underlying framework to add extra behavior
📜 The Unlocked Possibilities of the :has() Selector: CSS feature. Interesting comparison with React rendering at the end.
📜 Atomic Forms in React: presents a bit Jotai-Form and the difference with more traditional approaches like Formik.
📜 Create a simple cookie with Remix: shows that the use of cookie in Remix is relatively simple, and close to the HTTP protocol
📜 Yelp - Migrating from Styleguidist to Storybook
📜 Fresh: The Next-Gen JavaScript Web Framework
📜 Rendering long lists using virtualization with React
📜 Component Code Coverage in Cypress v10
🧑‍🎨 Remix + Bun demo
🧑‍🎨 React-on-the-edge: Vercel demo that shows how to use React SSR (without Next.js) with the Edge Runtime. With or without streaming.
🐦 Remix loader type inference: PR merged to facilitate typesafe usage of the useLoaderData() hook 👌
🐦 Bun + React SSR: significant performance gains
📦 RemixBlocks: I find the idea interesting: nested routes Remix are full-stack which makes them a good candidate for copy/paste, quite similar to Tailwind.
📦 react-obsidian: dependency injection for React
📦 remix-bossa-nova-stack
📦 Preact 10.9
📦 Next.js 12.2.1
📣 Vercel: Hydrogen can now be deployed with 0 config

📜 Expo: sunsetting the CLI Web UI: the CLI web UI will disappear. Not a big deal, it was limited anyway compared to the CLI features.
🧑‍🎨 useAnimatedSentor travel cards parallax: demo with a very nice visual result 😎
📦 react-native-keyboard-controller 1.0: synchronizes keyboard visibility with animated values 👌
📦 vision-camera-plugin-builder: reduces the boilerplate for the creation of a vision camera plugin.
📦 React-Native MacOS 0.68
🎥 It's After Effects, but in Remotion: William Candillon shows how React-Native-Skia runs on the web with Remotion. You can follow and apply the After Effect tutorials, not written for us at first.
📊 FlatList vs FlashList profiling
🐦 Reanimated now supports V8
🐦 Expo EAS + App Store Connect v2
🐦 BottomSheet + FlashList integration

订阅原文: