📨 #199: shadcn, Next.js, TanStack, Remix, MDX, Astro, Storybook, @svg-use, MSW, RAG, RN-WebGPU, React-Three-Fiber, Re.Pack, Super Apps, RN-macOS, EAS, Node.jx, Stage 2.7, AggregateError, Style-Observer...

Salut à tous !

Cyril et Matthieu de Theodo Apps (anciennement BAM) sont présents 👋, ils remplacent Seb pour vous présenter les dernières nouvelles des mondes React et React Native.

Cette semaine, shadcn a publié un nouveau CLI, et nous avons remarqué d'autres choses intéressantes qui sont en train de se préparer, comme le support du hook use() dans React Query.

La React Universe Conf commence demain, nous attendons des annonces sur React Native dont nous parlerons la semaine prochaine !

💡 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 !

One of the few things I regularly read to keep up with the React world.

Theo BrowneFounder of ping.gg - Youtuber

💸 Sponsor

[Live Workshop] Debugging Next.js w/ Examples

Join us on September 15th for a hands-on workshop with Dan Mindru, co-host of the Morning Maker show, where he'll share how he shaved 22.3 seconds off an API call using Sentry. You'll pick up practical tips on how to debug errors and performance issues using Sentry’s Tracing and Session Replay—RSVP to save your spot.

⚛️ React

Shadcn introduces a new CLI

Il est beaucoup plus puissant et flexible :

• shadcn add peut maintenant installer des composants, des thèmes, des hooks, des utilitaires, des dépendances...
• Il supporte plusieurs frameworks React (Next.js, Remix, Vite, Laravel)
• Il peut mettre à jour votre configuration tailwind au lieu de l'écraser
• Les composants peuvent être importés directement depuis les urls

Plus de détails dans 🐦 ce thread twitter.

• 💸 React Component Analytics — Omlet Scans Your Codebase to Measure Component Usage to Increase Code Quality and Design Systems Adoption
• 👀 TanStack Query PR - Add support for React.use() : React Query prévoit de renvoyer une promesse que vous pouvez use(), ce qui facilite l'intégration avec Suspense d'une manière performante. C'est plus pratique que usePrefetchQuery et cela facilite mieux la parallélisation que useSuspenseQuery.
• 👀 Remix Route Convention Evolution : Le nouveau routes.ts que nous avons évoqué la semaine dernière vous permettra d'ignorer le routage basé sur le système de fichiers, ou de simplifier en utilisant la convention de votre choix.
• 🐦 Next.js 15 may be released soon sans attendre que React 19 soit stable, et sans nécessiter React 19 pour le routeur de pages. Elle inclura des améliorations majeures de Turbopack.
• 🐦 Render on Fetch vs Fetch on Render : Theo partage une visualisation graphique des différents modèles de rendu React. Une vidéo associée est disponible pour approfondir.
• 📜 Introducing @svg-use : Explique en détail comment SVG-in-JS (notamment SVGR dans React) est pratique pour le thématisation et la distribution, mais n'est pas idéal en termes de performance et de duplication. Le pattern <use href> est une bonne alternative mais nécessite une plomberie manuelle, l'auteur a donc créé une chaîne d'outils pour l'automatiser.
• 📜 Build-time Components : Un article très illustré explique les avantages des React Server Components pour les utilisateurs de MDX qui souhaitent rendre leur contenu interactif. Les composants clients et les plugins Remark/Rehype ont des limites, et les RSC offrent le meilleur des deux.
• 📜 Using Server Functions and TanStack Query : TanStack Start est presque prêt à l'emploi, et a une approche convaincante de la collecte de données, avec des « server fns » intégrés avec react-query et le routage (pour le prefetching), entièrement typesafe bien sûr.
• 📜 What the heck is atomic state management? : Un rappel sur la façon d'utiliser Jotai « de la bonne manière » et les avantages qu'il apporte.
• 📜 Component testing in Storybook : Storybook promeut les tests de composants comme un complément aux tests de bout en bout, offrant rapidité et fiabilité avec une reproduction fidèle du navigateur pour une meilleure couverture des tests de l'interface utilisateur.
• 📜 The Complete Developer Guide to React 19: Une série en 2 parties sur les nouveautés de React 19, y compris useTransition, useActionState, useOptimistic, use, Server Components, Server Actions, ref comme une prop, diffs pour les erreurs d'hydratation, rapports d'erreurs améliorés, Context comme un provider, useDeferredValue valeur initiale et plus encore.
• 📜 Easy RAG for TypeScript and React Apps : Construire un système RAG en TypeScript et React en traitant des documents de texte, en générant des embeddings et en utilisant une base de données vectorielle pour la recherche sémantique afin de répondre aux requêtes des utilisateurs.
• 📜 Blending Markdown and React components in NextJS
• 📜 Higher Order Components (HOCs) in React: What They Are and How To Use Them
• 📜 Comprehensive React Testing: Handling API Calls with Mock Service Worker
• 📜 Using the inert attribute in React
• 📜 Authoring CSS in modern JavaScript apps
• 📦 Midday V1 - Starter kit based on Next.js, Turborepo, Shadcn & more
• 📦 Bulletproof-React - scalable React architecture repo - now updated with Next.js examples
• 📦 Astro 4.15 - Astro Actions, Use rewrites for i18n fallbacks, libSQL remotes in @astrojs/db, Timeout option in client:idle, Swap helpers for ViewTransitions
• 🎥 Lee Robinson - Build anything with v0 (3D games, interactive apps)
• 🎥 Jack Herrington - Using AI Structured Output with NextJS & React

Ne manque pas le prochain email !

People always ask how I keep up to date, it's This Week In React.

Jack HerringtonPrincipal Engineer - Youtuber

💸 Sponsor

Run GitHub Actions up to 2x faster at half the cost

Blacksmith runs your GitHub Actions substantially faster by running them on modern gaming CPUs. Integrating Blacksmith is a one-line code change. 100+ companies like Ashby, GitBook, Superblocks, and Slope use Blacksmith to help developers merge code faster.

📱 React-Native

À l'heure où nous écrivons ces lignes, le React Native Core Contributor Summit se déroule à Wrocław.

Il sera suivi par la React Universe conf jeudi et vendredi. De nombreuses conférences passionnantes sont prévues et vous pouvez les suivre sur Youtube. Quelques points forts : Un nouveau débogueur, la New Architecture, Expo DOM Components, Static Hermes.

Nous aurons donc probablement d'autres nouvelles de React Native pour vous la semaine prochaine !

• 💸 React Native Mastery - The only course you need to Master React Native & Expo
• 👀 Re.Pack is adding support for Rspack : Le bundler alternatif compatible avec webpack pour React Native verra probablement des gains de vitesse importants avec ce changement.
• 🐦 React Native IDE will integrate Storybook into IDE's preview mode
• 🐦 React Three Fiber running on react-native-webgpu : Nous avons vu des exemples de Three.js fonctionnant avec react-native-webgpu. Aaron Grider de SpaceX travaille actuellement sur le support de React Three Fiber, apportant son API déclarative à React Native.
• 📜 Create and run fast end-to-end tests using Moropo and Expo: with Maestro
• 📜 How to Develop a Super App with React Native? : L'utilisation d'un module natif personnalisé pour la communication entre les mini-applications diffère de l'approche Repack, qui s'appuie sur Webpack pour générer des bundles JavaScript modulaires et indépendants pour chaque mini-application.
• 📖 Expo documentation update : Architecture locale first, composants DOM, aide à la mise à jour des projets natifs pour le SDK 51.
• 📖 Expo Application Services (EAS) Pricing: Les tarifs de l'EAS pour la mise à jour et le build seront moins élevés à partir du 1er septembre.
• 📦 react-native-macos 0.75
• 🎥 Minute React Native - React Native WebGPU Explained in under 2 Minutes
• 🎥 Dan’s Lab - How to build a QR Code Scanner with Expo
• 🎥 Simon Grimm - Expo DOM Components are Wild
• 🎥 Chain React 2024 - YouTube playlist available

🇫🇷 En français

• 🇫🇷 ReactHebdo.fr - Dernières éditions traduites en français

🔀 Autre

• 📜 Inside ECMAScript: JavaScript Standard Gets an Extra Stage
• 📜 The web's clipboard, and how it stores data of different types
• 📜 JavaScript Generators Explained, But On A Senior-Level
• 📜 AggregateError in JavaScript
• 📦 ThreeJS 168
• 📦 Style-observer - A MutationObserver for CSS
• 📦 Effect 3.7 - With HttpApi, a declarative way to define api endpoints
• 📦 Node 22.8 - module.enableCompileCache(), vm.createContext() avec globalThis gelable et seuils de couverture
• 📦 Sherif 1.0 - Opinionated, zero-config linter for JavaScript monorepos
• 📦 Safari Technology Preview 202 - Lots of CSS features
• 📦 i-html - inline-html import element

🤭 Fun

A plus 👋