React
Contentlayer: Content Made Easy for Developers (beta)
Contentlayer是一个新的系统，它提供了管理你的内容（Markdown，CMS，Notion...）和你的代码之间的联系。你定义一个模式，它将验证/编译你的内容，并高效地生成一个带有TypesScript类型的.contentlayer文件夹，并可以直接导入你的应用程序中。这似乎大大改善了构建性能（即使有冷缓存，也能达到X2的提升）。测试版有一个官方的Next.js集成 ，减少了生成代码的数量。我建议观看介绍性的入门视频 （5分钟），以了解它在Next.js背景下的工作情况。Johannes Schickling的一个新项目，也是Prisma的创造者，也在研究代码和DB之间的胶水。
Remotion可以使用用React（网络）代码和data/props的编程方式创建视频。经过10个月的开发，v3.0刚刚发布（预告片），主要的新功能是对AWS Lambda上的无服务器渲染的新支持，它允许你扩展，降低成本，并更快地制作视频
Hooks, Dependencies and Stale Closures
包含调试代码的文章，帮助全面了解React中的陈旧闭包问题。如果你使用记忆化，并且未开启ESLint的exhaustive-deps规则，你就有可能在你的代码库中引入这种类型的问题，而这有时候很难调试!
The challenges of rendering an OpenLayers map in a popup through React
关于在几个窗口中通过门户渲染React应用的一个有趣的反馈。它有一些优点（用一个状态来控制所有的窗口），但也有一些问题需要解决。
拓展阅读
- 📜 File-based routing with React Location --- Nested layouts: the creator of Generouted continues his series on implementing a home-made file-based routing. Here he shows how to implement nested layouts (inspired by Remix) based on Vite and React-Location.
- 📜 React Component Composition Explained: composition can help solve drilling props and improve performance.
- 📜 Upgrading to React 18 with TypeScript: summary of TypeScript breaking changes coming with React 18, and how to automate the migration via codemod.
- 📜 Flexible Design System Components With "as/is" Props: useful technique to use a component with different HTML tags depending on the context:
<span>,<h1>... - 📜 Introduction to React v18 Suspense and Render-as-You-Fetch approach: using React 18 new features to avoid waterfalls.
- 📜 Creating a Rich Text Editor using Rust and React
- 📜 Create powerful and flexible forms with React Hook Form
- 📜 Exploring React Suspense with React Freeze
- 💡 Gatsby RFC: GraphQL TypeScript Generation
- 🐦
next/linkwill no longer require<a>as a child: looks like a nice quality of life improvement 😉 - 🐦 React + Qwik
- 🧵 Sebastian Markbåge: "Hydration in React was originally not built for SSR": there's been interesting hydration discussions this week, probably in reaction to this Misko Hevery article (creator of Qwik/Angular)
- 🧵 Alex Russell on CSS-in-JS: fair criticism of runtime-based CSS-in-JS libs
- 📦 Create-React-App Redux Template v2: update React 18
- 📦 Jest-Preview: new solution that integrates with React-Testing-Library to visually see your tests run and debug them more easily.
- 📦 Rive-React: React bindings for the Rive animation platform
- 📦 Jotai-form
- 📦 MDX-to-MD
- 🎥 The Official Beginner's Guide to XState in React
- 🎥 React for the Haters in 100 Seconds
- 🎥 Redux in 100 Seconds
React-Native
Migrating React And Native Apps To React Native
Callstack工程师解释了如何为现有的应用程序采用React-Native，有两种不同的方法：greenfield（完全重写）和brownfield（增量迁移）。还唤起了如何将一个Web应用移植到React-Native。
Writing cross-platform components for web and React Native
Artem gives some ideas for cross-platform web/mobile development. He suggests using primitive components, and taking a web-first approach for DX reasons: developing in the browser and testing with Cypress, then verifying that the mobile app works.
Artem给出了一些关于跨平台的网络/移动开发的想法。他建议使用原始组件，并出于DX的原因采取网络优先的方法：在浏览器中开发，用Cypress进行测试，然后验证移动应用是否正常。
拓展阅读
- 📜 Use Storybook with Nx React Native
- 🎙️ React-Native-Radio 232 - Flutter is better than React Native...in all the ways that don't matter
- 🎙️ The React Native Show Podcast: Coffee Talk #1 - React v18.0 & React Native 0.68
- 👥 React-Native EU: Call-For-Papier open until end of Mai
- 📦 React-Native V8 1.0
其它
Jest 28: Shedding weight and improving compatibility
这个版本有很多很酷的东西! 我的关注点：
- 支持分片，使测试执行并行化
- 完全支持包的
"exports" - GitHub Actions Reporter看起来非常方便
- ESM支持仍然受限
- jest-runner-tsd：用于测试TypeScript类型
- jest-light-runner：在Babel代码库上快2倍。
Christoph Nakazawa解释了如何在一些现有的Jest包基础上创建一个JavaScript bundler。读取JavaScript文件，创建依赖关系图，捆绑运行时，最终的捆绑装配...... 这是一本技术读物，极大地解开了一个简单的bundler的内部工作原理。
After a failed attempt (Edge Handlers), Netlify releases a new serverless @ Edge offer with its Edge Functions in beta, based on the Deno Deploy infrastructure, and thus more compatible with web standard APIs. This allows in particular to run React meta-frameworks using server-side code more optimally: Remix, Next.js (only middleware for now), Hydrogen, Server Components, Astro...
在一次失败的尝试（Edge Handlers）之后，Netlify发布了一个新的无服务器产品，其Edge功能处于测试阶段，基于Deno Deploy基础设施，因此与Web标准API更加兼容。这特别允许使用服务器端代码更优化地运行React元框架。Remix、Next.js（目前只有中间件）、Hydrogen、服务器组件、Astro...
Qwik/Angular的创建者继续质疑我们服务器端渲染的SPA的水化模型，并推动采用另一种更有效的模型，基于 "恢复性"。
拓展阅读
- Marko: Compiling Fine-Grained Reactivity
- Marko for Sites, Solid for Apps
- Progressive Enhancement and HTML Forms: use FormData
- Island Architecture
- V8 - Faster initialization of instances with new class features
- Learn PWA
- Div Riots: Our experience with Astro
- The Future of CSS: CSS Toggles
- TypeScript and Set Theory
- JSDB: Use javascript as your database
- SvelteKit can now run on Vercel Edge Functions
- How to Use Next.js Middleware on Netlify
- Vitest VS Code Extension
- Nx 14.0
- Deno 1.21
- Parcel 2.5
- ESLint 8.14
- Vitest 0.10
订阅原文:
