📨 #195: Compiler, Refactoring components, XState Store, Next.js, Redwood, Vitale, Astro, LLMs, Astro, Dédale, XR, tldraw, RN + Amazon, RN new styles, Gesture Handler, Reanimated, TC39, Node, TypeScript...
· 9 minutes de lecture
Salut à tous !
Encore une semaine calme dans le monde de React. Pas d'annonce fracassante, mais de nombreux articles de la communauté à lire.
Node.js v22.6 est disponible avec le support expérimental de TypeScript ! 🎉
Consultez notre partenaire React Universe Conf (🇵🇱 Wrocław - 5-6 septembre), anciennement nommé React Native EU. Bénéficiez d'une réduction de 10% avec le code « TWIR ». Ils ont vraiment une liste de conférenciers impressionnante cette année !
💡 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
WorkOS: Modern Identity Platform for B2B SaaS
With WorkOS you can start selling to enterprises with just a few lines of code.
🔐 WorkOS AuthKit supports a complete user management solution along with SSO, SCIM, RBAC, & FGA.
🏗️ The APIs are flexible, easy-to-use, and modular. Pick and choose what you need and integrate in minutes.
🎨 Design and user experience are everything. From the quality of our documentation to how your users onboard, we remove all the unnecessary complexity for developers.
✨ AuthKit is free up to 1 million MAUs and includes bot protection, MFA, RBAC, & more.
🤝 WorkOS is trusted by hundreds of leading startups like Perplexity, Vercel, & Webflow.
⚛️ React
- 💸 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
- 🐦 Zuckerberg calling out React as one of Meta’s major open source initiatives
- 🐦 Visual editing with ReactBricks using RSC
- 📖 Revised ”Redux Essentials" tutorial
- 🗓️ React-Africa - 🇲🇦 Casablanca - 29 novembre - Le programme est en ligne, consultez-le et bénéficiez d'une réduction de 10 % sur les billets avec le code TWIR !
- 📜 React Compiler, How Does It Work? : Une série de 4 articles allant vraiment en profondeur sur le code de React Compiler, expliquant le plugin Babel, useMemoCache, les transformations HIR/SSA. Cela fait beaucoup de détails d'implémentation à lire, et c'est très technique, mais il y a aussi d'excellents aperçus qui décrivent les principaux algorithmes à la fin de chaque article. Il traite des fonctions individuelles, avec un AST « réduit » à une Représentation Intermédiaire de Haut niveau (HIR : Hight-level Intermediate Representation) qui permet également de découpler le compilateur de Babel. Une technologie très avancée !
- 📜 Avoiding premature abstraction with Unstyled React Components : Sam refactorise un bouton de formulaire concret en une abstraction LoadingButton headless qui reste flexible et sans faire abstraction prématurément du style. Je suis d'accord, et le moment venu, vous pourrez toujours créer une autre abstraction stylisée par-dessus.
- 📜 Common Sense Refactoring of a Messy React Component : Alex explique son processus de refactorisation d'un composant Form trop volumineux du monde réel. Je fais de même : sortir le code des sous-composants, des hooks personnalisés et du helper du composant principal permet généralement d'améliorer la clarté.
- 📜 Introducing XState Store : Dominik (React Query) aime Zustand, mais explique pourquoi il trouve maintenant que XState Store est une option plus séduisante. C'est assez similaire mais plus orienté sur les besoins (séparation état/actions, piloté par les événements...). Daishi a répondu que vous pouvez obtenir une interface similaire avec son nouveau Zustand-xs middleware. J'ai expliqué (tweet) pourquoi je ne suis pas toujours fan d'une interface pilotée par les événements.
- 📜 Using Notion as my CMS with Next.js : Décrit une configuration pour réduire la difficulté de créer et de publier des notes. Le contenu de Notion est d'abord converti en Markdown, puis rendu dans une application Next.js.
- 📜 Next.js’s unstable_cache() demystified : Quelques notes sur les dangers du retour des classes, et un lien vers un article/package intéressant listant encore plus de problèmes de mise en cache.
- 📜 Build your own React state management library in under 40 lines of code : Crée un store externe personnalisé et le lire dans React avec... useSyncExternalStore + 2 suggestions d'amélioration telles que l'ajout d'une intégration Immer.
- 📜 GitHub Vitale - Live notebooks in VS Code for JavaScript/TypeScript, web development, and AI experimentation: L'équipe GitHub Next a introduit une nouvelle technologie de Notebook ( similaire à Jupyter) pour de l'exploration de codage interactif basé sur Vite. Elle prend en charge le rendu d'un composant React dans une cellule de notebook.
- 📜 Frontend Security Checklist : Inclut des exemples permettant d'atténuer les attaques XSS et CSRF dans un contexte React.
- 📜 The Art of Dithering and Retro Shading for the Web (with React Three Fiber)
- 🔨 Dédale - Email template development environment, based on React Email
- 📦 Redwood 8.0 RC : La nouvelle version du framework React est maintenant en release candidate. Elle ajoute le support SSR et RSC (expérimental), Vite 5, Prettier 3. Voir le guide de mise à jour de la v8. Ils prévoient également d'introduire bientôt une fonctionnalité Background Jobs.
- 📦 Vercel AI SDK 3.3 - useChat() supports file attachments, useObject() streams structured data : Avec des données structurées basées sur les schémas Zod, les LLM deviennent plus faciles à utiliser pour les développeurs. Notez que OpenAI a également annoncé la prise en charge des sorties structurées avec la prise en charge de Zod !
- 📦 Astro 4.13 - stable request rewriting, stable content collections JSON schemas
- 📦 react-three/xr 6.1 - WebXR Anchor API, Hit Testing API, DOM Overlay API, experimental Emulator
- 📦 Tldraw sync - self-hostable real-time collaboration engine for React whiteboard drawing app
- 🎥 Theo - Server Islands are really cool
- 🎥 Jack Herrington - NextJS Feature Flagging Made Easy
- 🎥 UI Engineering - Why React is Declarative?
- 🎥 Expo - What React devs need to know about React Native
- 🎙️ Syntax - Why the jQuery Creator Uses React and Typescript - John Resig
- 🎙️ This Month in React - July 2024 - State of JS, React, HTML
Ne manque pas le prochain email !
💸 Sponsor
Let's meet at React Universe Conf 2024
React Universe Conf is two incredible days of learning, networking, and innovation in the heart of Europe. Formerly known as React Native EU, React Universe Conf is now the ultimate gathering for React and React Native enthusiasts. What's in it for you this year?
- Exceptional lineup: Dan Abramov, Evan Bacon, Kent C. Dodds, Delba de Oliveira, Marc Rousavy, and many other great speakers.
- Hot topics: New architecture, React Server Components, Static Hermes, and Out-of-Tree platforms.
- Practical insights on cross-platform app development with React Native.
Use promo code TWIR for 10% discount on your ticket. Book your spot HERE and see you in Wrocław!
📱 React-Native
Cette section est rédigée par Benedikt.
- 💸 React Native Mastery - The only course you need to Master React Native & Expo
- 🐦 Why the Hermes team favors JSI NativeState over HostObject
- 🐦 Experimental tree shaking support landed for Expo : Disponible à titre expérimental dans le SDK 52 (qui est dans canary)
- 🐦 Styles coming to React Native - Linear gradients, box shadows, CSS filters, % flex gaps
- 👀 React Native PR - Linear gradient in React Native under experimental backgroundImage style prop
- 📜 From JS to Fire OS - React Native for Amazon Devices : Rappelons que RN peut être utilisé pour créer des applications pour les Fire Tablets et Fire TV, car Fire OS est basé sur Android.
- 📜 TV Navigation in React Native: A Guide to using TVFocusGuideView : Je suis très enthousiaste à l'idée que RN ne se limite pas aux téléphones et aux tablettes, c'est pourquoi j'apprécie les articles sur la façon d'exploiter au mieux les comportements aux plateformes spécifiques, comme le fait cet article pour tvOS et Android TV.
- 📜 Xcode UI debugging with Quick Look : C'est pratique si vous travaillez beaucoup dans Xcode (ce qui n'est pas mon cas 😅).
- 📜 My visit to Chain React 2024 (and some tips for going to conferences) : Attention, si vous n'avez pas participé à Chain React, cet article va vous donner un sérieux FOMO, mais j'ai tout de même pris plaisir à le lire.
- 📦 React Native 0.75.0-rc.7 - update CLI to 14.0
- 📦 React Native 0.74.5 - minor fixes
- 📦 react-native-gesture-handler 2.18.0 - Now has ReanimatedSwipeable as a standalone component, adds a couple improvements and support for RN 0.75
- 📦 react-native-svg 15.5.0 - Minor release introducing new filters, CSS filters API on FilterImage component and many bug fixes
- 📦 react-native-reanimated 3.15.0 - ReducedMotionConfig, EntryExitTransition, CurvedTransition, RN 0.75 support and a lot of fixes
- 🎥 Simon Grimm - React Native Server Defined Rendering
- 🎥 Reactiiive - The secret behind Jotai and MMKV (React Native)
- 🎥 notJust.dev - Building the iOS 18 Photos App with React Native and Reanimated
- 🎙️ PodRocket - Using RSCs in Expo Router with Evan Bacon
🇫🇷 En français
- 🇫🇷 ReactHebdo.fr - Dernières éditions traduites en français
- 🐦 Optimise ton site Next.js pour générer du traffic SEO
- 📜 Créer un indicateur d'activité audio dans le navigateur
- 🎥 Voici My Stack Pour Coder Avec l'AI en 2024 ?
- 🎥 Coolify - L'alternative Gratuide À Vercel (ou presque)
- 🎙️ Double Slash 92 - Monorepo ou pas ?
🔀 Autre
- 🐦 TC39 meeting 103 -
RegExp.escapestage 3, Concurrency Control + Unordered Async Iterator Helpers stage 1 - 📜 How Google handles JavaScript throughout the indexing process
- 📜 Why Unknown Types Are Useful
- 📜 A different way to think about TypeScript
- 📜 What if you used Container Units for… everything?
- 📜 Effect Best Practices
- 📦 Node v22.6.0 - with Experimental TypeScript support
- 📦 Rslib - The library build tool powered by Rsbuild
- 📦 Nx 19.5 - Stackblitz, Bun, Pnpm 9, Incremental Builds for Vite, Gradle Test Atomizer
🤭 Fun
A plus 👋
Ne manque pas le prochain email !
