📨 #175: RSC, useSyncExternalStore, Vinxi, Server Actions, Next.js, Remix, margins, WakuLand, R3F-uikit, React-Forget, RN releases, Bridgeless, Expo Fingerprint, Flash Calendar, Zeego, RN Reusables...
Salut à tous !
Cette semaine a été plutôt calme en termes de versions, mais nous avons beaucoup d'articles intéressants à lire !
Désolé pour la semaine dernière, l'email était si long que malgré la suppression des liens, il a été tronqué par Gmail 😅.
💡 Consulter cette newsletter sur Twitter - format visuel 🎨
Pour me soutenir:
- 😘 Recommande la newsletter! Ça m'aide vraiment beaucoup!
- 💸 Sponsorise la newsletter ou sponsorise-moi
- 🧵 Retweet le dernier thread Twitter
- 📨 Réponds à cet email
- 💬 Rejoins le chat Discord
Ne manque pas le prochain email !
💸 Sponsor
CMS with Inline Visual editing for Next.js with App routing
Set up a project in just 1 minute with the CLI and define your own Visual blocks as React components to convey your pixel-perfect corporate brand, using any CSS framework. Try the new Next.js starter with Server Components!
Content editors can easily use content blocks to compose pages visually, just like using a word processor, without compromising the design.
React Bricks is enterprise-ready with Digital Assets Management, Advanced SEO, Real-time Collaboration, Scheduled Publishing, Multilanguage, integration with external APIs, Approval Workflow, Multiple environments, Change history and more.
Trusted by corporate clients such as The Weather Channel, Deel.com, La Banque Postale, leading eCommerce sites and over 9,000 users worldwide.
Get started today!
⚛️ React
Instant Search Params with React Server Components
Un article interactif génial qui montre qu'il est étonnamment difficile de faire persister l'état de l'interface utilisateur dans la chaîne de requête dans un monde de composants React Server tout en donnant un retour d'information immédiat à l'utilisateur. La mise à jour de l'URL déclenche un aller-retour sur le serveur. Le nouveau hook useOptimistic résout joliment ce problème. Cela montre aussi un bon cas d'utilisation du CSS :has(), pour éviter de remonter l'état en attente de startTransition.
Building a React Metaframework with Vinxi
Aujourd'hui, j'ai découvert Vinxi, une boîte à outils construite au-dessus de Vite et Nitro vous permettant de créer facilement votre propre méta-framework, avec le support SSR, les conventions de routage, les fonctions serveur et tout le reste. Solid Start l'utilise sous le capot, mais c'est un SDK indépendant du framework. Apparemment, TanStack Start l'utilisera aussi ! Cet article explique comment l'utiliser avec React.
- 💸 Explore how to build a feature-rich PDF Viewer in React with Apryse's rendering engine. Customize UI, scroll, zoom, and search with annotations.
- 📜 Avoiding Hydration Mismatches with useSyncExternalStore : Un autre excellent article de Dominik expliquant comment
useSyncExternalStoreet ses 2 callbacks client/serveur de snapshot peuvent aider à éviter les déséquilibres de l'hydratation. Cela peut être une meilleure alternative à useEffect pour de nombreux cas d'utilisation, y compris le rendu de dates localisées, ou la création d'un composant enveloppe uniquement pour le client. - 📜 Exploring Next.js Forms with Server Actions : Un tutoriel très complet, étape par étape, sur l'utilisation des nouvelles primitives de formulaire React/Next.js sans aucune abstraction, et toutes les petites erreurs que vous pourriez faire en cours de route.
- 📜 No Outer margin : Présente de bonnes raisons de ne pas appliquer de marges à l'intérieur de la racine de votre composant, mais de laisser le composant parent s'occuper de la mise en page. Les marges sont la première chose qui nous vient à l'esprit, mais il y a aussi d'autres règles CSS qui ne respectent pas l'encapsulation des composants. J'ai récupéré un excellent article supprimé à ce sujet : Layout-isolated components.
- 📜 Vjeux - 12 Years at Meta : Si vous êtes un nouveau développeur React, vous n'avez peut-être pas entendu parler de Christopher Chedeau, mais c'est l'un des membres les plus influents de notre communauté. Voici quelques exemples de choses qu'il a créées ou auxquelles il a contribué de manière significative : React, React Native, Yoga, CSS-in-JS, Prettier, Excalidraw, Docusaurus, GraphQL...
- 📜 Learning Four Key Primitives In Solid : Ne vous laissez pas berner par le titre, c'est un excellent article pour les développeurs React, comparant Solid vs React, Next.js et Remix sur 4 sujets intéressants. A noter que les composants RSC de Next.js sont waterfall par défaut à moins que vous n'utilisiez une fonction de preloading.
- 📜 Handle both JSON and FormData in Remix : Jacob explique les compromis entre l'utilisation des inputs de formulaire et la création manuelle d'un chargement d'un FormData ou d'un JSON depuis un gestionnaire d'événement. Il montre comment créer une abstraction Remix à l'aide de Zod et Conform qui peut accepter de manière pratique des chargements à la fois de JSON et de FormData.
- 📜 Introducing Waku Land : Un déploiement en temps réel de tous les exemples de Waku.
- 📜 Where to host your Remix app in 2024 : Mise à jour du 25 février.
- 📜 HTMX vs React - A Complete Comparison : L'article suggère d'utiliser React pour les expériences web riches, et d'utiliser HTMX pour les pages avec une interactivité plus simple.
- 📜 Next.js vs. Remix - A Developer's Dilemma
- 📜 Compiler Theory and Reactivity : Sathya travaille sur React Forget et explique une technique théorique de compilation qu'ils utilisent appelée Static Single Assignment form. Je dois admettre que je suis un peu perdu 😅. Son post précédent sur Alias analysis est plus facile à comprendre.
- 📜 How to Style Active Links in Next.js App Router
- 📜 Add Dynamic Sitemap to Next.js Website Using Pages or App Directory
- 📦 @react-three/uikit - Build performant 3D user interfaces using react-three/fiber and yoga: Nouveau package du collectif Poimandres en preview avec une impressionnante 🐦 démo
- 🎥 Ryan Toronto - Asset loading in React 19 : Explique une fonctionnalité de React assez méconnue mais passionnante à venir qui vous permet de charger les ressources (ici du CSS) de la page suivante avant de terminer la transition de navigation.
- 🎥 Jack Herrington - React Hook Form & React 19 Form Actions, The Right Way
- 🎥 Fireship - They made React great again? (React Labs)
- 🎥 Fireship - This UI component library is mind-blowing (Aceternity Components)
- 🎙️ PodRocket -StyleX with Naman Goel
Ne manque pas le prochain email !
💸 Sponsor
The most comprehensive User Management Platform
Clerk streamlines React app authentication and user management, ensuring a quick setup for the modern web.
Experience the benefits of Clerk:
- 💅 Pre-built UI components for sign-in, sign-up, user profiles, and organizations. Customize with any CSS library and deploy on your domain
- 📦 SDKs for React, React Native, Next.js, Redwood, Remix, and other frameworks
- ⚡ Integrations with Firebase, Supabase, Convex, and other BaaS providers
- 🎁 User management, social login, magic links, MFA, and more out of the box
Dive into Clerk's quickstarts and tutorials to kickstart your project🚀
📱 React-Native
Cette section est désormais co-écrite avec Benedikt. N'hésitez pas à nous envoyer vos commentaires par email ou sur Twitter !
La semaine dernière, nous avons tous bénéficié d'un bref repos concernant les nouvelles majeures de React Native (ou aurais-je manqué quelque chose, en l'occurrence @moi). C'est peut-être un signe positif, surtout après le tourbillon d'événements tels que Expo 50, visionOS, the State of React Native, react-strict-dom, et bien d'autres encore. Cependant, cela ne signifie pas que le monde de React Native s'est arrêté. Il y a eu beaucoup de petites annonces qui nous donnent un aperçu du futur proche de React Native. La première release candidates pour RN 0.74 est sortie. Elle contient beaucoup d'améliorations ainsi que quelques dépréciations et breaking changes, mais à première vue, rien de majeur qui me rende inquiet quant à l'effort de mise à jour. Plus particulièrement, le mode bridgeless devient le nouveau mode par défaut avec la version 0.74 (mais uniquement lorsque la fonction New Arch est activée). Le mode bridgeless est le troisième pilier de New Arch, aprèsTurboModules déjà introduit et le nouveau moteur de rendu (Fabric). Concernant New Arch et les valeurs par défaut, une PR a été fusionné qui fera deNew Arch la valeur par défaut à partir de RN 0.75 (il sera toujours possible d'opter pour une autre solution). De plus, la RFC avec la définition de React Native Frameworks a été fusionné, établissant les responsabilités de RN par rapport aux frameworks au-dessus de RN.
- 💸 React Universe Conf - join the conference at the lowest price now. There’s a limited batch of blind bird tickets available.
- 📜 How to integrate Native iOS code into a React Native project for iOS : Bonne introduction aux entêtes de liaison (bridging headers), à @objc, et à d'autres choses intéressantes que vous devez savoir avant de plonger dans le code natif pour iOS.
- 📜 react-strict-dom, why it's so great? : Si vous voulez savoir comment
<html.div>finit par devenir un composant natif dans iOS, lisez ce court résumé de react-strict-dom. - 📜 Expo Push Notifications Migrating to FCM V1 : En juin, FCM Legacy rejoindra la longue liste des services Google abandonnés, il est donc grand temps de migrer !
- 📜 @expo/fingerprint 🤝 GitHub Actions A mon avis, Fingerprint est la fonctionnalité la plus sous-estimée de Expo SDK 50. Cet article montre le meilleur cas d'utilisation : Commencer une nouvelle version native dès que Fingerprint indique qu'elle est nécessaire.
- 📜 Universal Apps: A Single, Unified Codebase Powering Mobile, Desktop, Web, and TV? C'est un peu le Saint-Graal, et un sujet qui me passionne en 2024 : Une application pour toutes les plateformes. Cet article contient des réflexions intéressantes à ce sujet.
- 📜 How to build an offline-first app using Expo & Legend State
- 📦 React Native 0.74-rc.1
- 📦 React Native v0.73.5
- 📦 react-native-visionos 0.73.6 : Prise en charge de plusieurs fenêtres et nouveaux documents !
- 📦 Zeego 1.8 + 1.9 - Universal cross-platform menus - Horizontal groups and group labels
- 📦 react-native-image-editor 4.0 - base64 output, format prop, returns metadata
- 📦 React Native Flash Calendar - Fast and flexible calendar using Shopify FlashList
- 📦 react-native-reusables : J'adore shadcn/ui (bibliothèque d'interface utilisateur) pour le web, ceci permet de l'utiliser avec RN !
- 🎥 Fireship - Expo in 100 Seconds
- 🎥 Theo Brown - React's Next Big Change? (react strict dom)
- 🎥 Expo - How to build TV apps with Expo SDK 50
- 🎙️ Rocket Ship 031 - React Native Gestures & Microinteractions with Kacper Kapuściak
- 🎙️ RNR 289 - Real Life React Native: David Leuliette Talks Retail Shake Scanner
🇫🇷 En français
- 📜 Héberge des fichiers avec Remix
- 🎥 React Native / Expo et supabase
- 🎥 Comment résoudre les Erreurs d'hydratation en Next.js ?
- 🎥 Ces Composants React sont un Game Changer
- 📅 Conférence React Paris - 22 Mars : nouvelle conférence, les speakers ont déjà été annoncés.
- 📅 React Connection - 22 Avril + React-Native Connection - 23 Avril : 2 jours de conférence web et mobile. CFP est ouvert jusqu'au 3 février.
🔀 Autre
- 📣 Apple killing PWAs in EU - Immediate Action Needed
- 👀 TypeScript PR - Infer type predicates from function bodies using control flow analysis
- 👀 Rsbuild v1.0 Release Plan - Rspack v1 and Rsbuild v1 before July 2024
- 📜 CSS :has() Interactive Guide
- 📜 JSDoc as an alternative TypeScript syntax
- 📜 Node.js 2023 Year in An Article
- 📦 Babel 7.24 - Decorator updates and JSON modules imports
- 📦 TypeScript 5.4 RC - NoInfet utility type, type narrowing improvements in closureq
- 📦 LightningCSS 1.42 - light-dark(), system colors, custom property deduplication
- 📦 Chrome 122 - Perf DevTools, Storage Buckets, Async Clipboard
- 📦 PGlite - Postgres in WASM
- 📦 snap - snapshot testing companion for node:test
🤭 Fun
A plus 👋
Ne manque pas le prochain email !
