π¨ #142: JSX, React-Query, Server Components, Next.js, Million, OpenNext, Ariakit, Expo-Image, React-Three-Fiber, TS 5.1, Node.js 20, WebGPU...
Salut Γ tous !
Cette semaine, TypeScript 5.1 sort en beta avec de nombreuses amΓ©liorations liΓ© au JSX et Γ React!
React-Query compte retirer les callbacks dans la version 5. Cette idΓ©e ne plait pas Γ tout le monde.
Pour les dΓ©veloppeurs React-Native, ne manquez pas React-Native-Connection le 1er Juin Γ Paris! J'ai participΓ© au commitΓ© de sΓ©lection des talks, et on vient de publier la line-up complete avec des speakers internationaux et locaux. RΓ©duction de 10% avec le code "REACTHEBDO".
π‘ 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β
React-admin - Le Framework Open Source d'applications B2B
Vous Γͺtes en train de dΓ©velopper une admin avec React? Si oui, la suite va vous intΓ©resser ! En utilisant React-admin, notre framework open-source, vous pouvez vous Γ©pargner des jours de dΓ©veloppement ! π€©
Avec React-admin, vous pouvez non seulement gagner un temps prΓ©cieux, mais vous pouvez Γ©galement devenir un meilleur dΓ©veloppeur! Fort dβune communautΓ© de 20 000 dΓ©veloppeurs qui l'utilisent quotidiennement et dβune Γ©quipe technique dΓ©diΓ©e, le projet grandit de jour en jour.Β Consultez le tΓ©moignage deΒ Caritas pour vous faire une idΓ©e des possibilitΓ©s offertes par le framework.
Rejoignez notre communautΓ© florissante ainsi que le serveur Discord, afin de rester au courant des derniΓ¨res mises Γ jour de React-admin et d'obtenir lβaide d'un rΓ©seau de dΓ©veloppeurs expΓ©rimentΓ©s.
Testez le dès maintenant en moins de 30 minutes !

βοΈ Reactβ
Une version TypeScript importante qui va permettre Γ React de pouvoir dΓ©clarer les types valides Γ utiliser dans le JSX. Il est prΓ©vu d'utiliser cette nouvelle feature au plus tΓ΄t dans les typedefs React, qui ont d'ailleurs Γ©tΓ© forkΓ©es pour continuer Γ supporter des anciennes versions (TypeScript <= 5.0).
Il y a de bonnes raisons d'adopter TypeScript 5.1+ au plus vite. Cela dΓ©bloque entre autre:
- la possibilitΓ© d'utiliser un React Server Component
asyncdans le JSX sans erreurs TypeScript ni workaround. - la possibilitΓ© de retourner tous les types valides pour
ReactNode(string, array, boolean...) sans avoir besoin d'un fragment (details). - d'autres amΓ©liorations intΓ©ressantes autour du JSX: namespaced attributes et linked editing (VSCode).

Breaking React Query's API on purpose
React-Query va retirer les callbacks (onSuccess, onError, onSettled) du hook useQuery avec la v5. Dominik explique ce choix en proposant des alternatives plus adaptΓ©es pour les cas communs, comme afficher un toast. Une dΓ©cision qui fait polΓ©mique, mais semble nΓ©cessaire car ces APIs Γ©taient souvent mal utilisΓ©es. Note: les callbacks sont conservΓ©es pour useMutation.

- π§΅ Dan Abramov - "good rule of thumb. for any βserver componentsβ: explique le minimum requis pour une bonne implΓ©mentation des Server Components et profiter pleinement de leur potentiel. PrΓ©sente les limites de Qwik et Remix.
- π Dan Abramov has a "story to tell" at Remix Conf ("React from Another Dimension")
- π Next.js ships its own copy of React: copie utilisΓ©e seulement quand vous utilisez App Router.
- π Use Storybook with Rspack
- π WebGPU in React-Three-Fiber demo
- β‘ SpiderMonkey Newsletter (Firefox 112-113): "Weβre working on improving performance for popular web frameworks such as React".
- π Animating View Transitions: propose d'utiliser la nouvelle API View Transition (disponible dans Chrome 111) dans un contexte React avec Next.js App Router, et dans un contexte MPA. IntΓ©ressant, mais je pense que l'intΓ©gration React proposΓ©e n'est pas idΓ©ale.
- π An Animated Guide to Reacts Optional Parameters: article interactif qui prΓ©sente quelques fonctions des APIs React qu'on utilise moins souvent.
- π Next over Remix: retour d'expΓ©rience d'un dev qui avait prΓ©vu de passer sous Remix, mais qui finalement reste sous Next.js.
- π Building a blog with Next.js 13 and React Server Components: utilise toutes les derniΓ¨res nouveautΓ©s Next.js pour crΓ©er un blog moderne.
- π React forwardRef(): How to Pass Refs to Child Components
- π Is React the New WordPress?
- π Becoming an Astro maintainer
- π Display Warning for Unsaved Form Data on Page Exit
- π Mastering React: Techniques to Take Your UI to the Next Level
- π What's new in the new Storybook
- π Full-stack Web Apps Without React
- π₯ Must Know React Portability Patterns: de bons conseils pour moins coupler son code Γ un framework particulier.
- π₯ Maybe Create React App Isn't Dead?
- π¦ Ariakit 0.1.0: nouvelle maniΓ¨re de gΓ©rΓ©e l'Γ©tat basΓ©e sur des "component stores". Motivations dΓ©taillΓ©es dans cette RFC: moins de re-renders, framework-agnostic...
- π¦ Million.js 2.2.1 - Support for hooks and non-primitives. Ce thread donne des explications intΓ©ressante sur la diffΓ©rence entre la reconciliation React et Million.
- π¦ OpenNext 1.0: souhaite rendre Next.js plus portable avec un serverless adapter.
- π¦ Astro 2.3
- π¦ React-Three-Next - starter updated - App Router support
- π¦ React-Three-Fiber AutoFocus DOF
Ne manque pas le prochain email !

πΈ Sponsorβ
Tina.io is a headless CMS for Markdown-powered sites
- Editing UI for your Markdown files
- UI for MDX components
- Supports static (SSG) and server-side rendering (SSR)
- Option for visual editing (live-preview)
- Build with reusable blocks
Test a starter site
- Docusaurus (Github)
- Next.js + Tailwind with visual editing (Github)
Or run Β npx create-tina-app@latest Β then visit localhost:3000/admin
Watch the 4-min demo video

π± React-Nativeβ
- π Hover gesture coming soon to React Native Gesture Handler: future API cross-platform avec support iOS, Android et web.
- π Image perf demo: montre bien l'impact d'utiliser des imaages bien resizΓ©es sur vos apps React-Native.
- π¦ Expo-Image 1.2.0 - ThumbHash support
- π¦ React-Native-Widget-Extension
- π¦ AnimateReactNative: plus de 100 animations par Catalin Miron (produit payant).
- π§΅ Expo Docs Updates
- π§΅ Jamon Holmgren - "Want to know how easy it is to grab API keys out of a compiled iPhone app?"
- π₯ Song of Bloom - βCan it be done in React Native?β
- π₯ React Native File Based Routing with Expo Router
- π₯ React-Native-Connection (Paris, 1er Juin) nous offre -10% (code "REACTHEBDO").
- π₯ App.js (Cracovie, 10-12 Mai) nous offre -20% sur les workshops (code "ThisWeekinReact20").
- π₯ Chain React (Portland, 18-19 Mai) nous offre -10% sur les entrΓ©es (code "thisweekinreact").

π§βπ» Jobsβ
π§βπΌ Shotgun - Senior Full Stack Engineer - 60-75kβ¬ + BSPCE
Shotgun est la billetterie des évènements electro. Nous recherchons des devs expérimentés pour travailler sur une stack moderne: React, React-Native, Typescript, GraphQL, NextJS, PgSQL, Vercel...
π§βπΌ Premier Octet - DΓ©veloppeurs(euses) React - Paris
Nous cherchons des dΓ©veloppeurs(euses) JavaScript passionnΓ©s. Vous interviendrez en dΓ©veloppement sur des projets variΓ©s et motivants, Γ la fois serveur et front (React, Nest, Next), et Γ©ventuellement mobile (React Native).
π‘ Comment publier une offre d'emploi ?
π’ Vous recrutez en CDI ou freelance? Contactez-moi!

π«π· En franΓ§aisβ
- π Comment configurer ReactJS Vite Tailwind Styled components
- π₯ Comment React prΓ©serve ton State ?
- π₯ Streaming sur AWS Lambda - Actus JS de la semaine
π‘Tu peux m'envoyer ton contenu: sebastien@thisweekinreact.com !

π Autreβ
- Node.js 20 Now Available: avec test runner stable, permission model, possibilitΓ© de compiler un executable...
- pretty-ts-errors: super idΓ©e pour amΓ©liorer la DX TS dans VSCode.
- total-typescript/shoehorn - Partial mocks in TypeScript
- Chrome ships WebGPU: dispo dans Chrome 113+.
- WebGPU Fundamentals
- Turborepo 1.9

π€ Funβ
A plus π
Ne manque pas le prochain email !








