📨 #139: React.dev, Remix, next export, Server Components, i18n, Error Boundary, Wakuwork, Astro, React-Native, Bottom Sheet, TypeScript, TC39...

21 mars 2023 · 10 minutes de lecture

Newsletter creator - Docusaurus maintainer

Salut à tous !

Le nouveau site React est enfin sorti, et on peut dire qu'elle envoie du bois 🤗 J'ai mis pas mal de liens intéressants liés à cette sortie, et je vous laisse vous faire votre propre idée!

Il y a également quelques articles très sympa. J'aime bien la map intéractive des APIs React, l'approche des breaking changes de Remix pour leur v2, ou encore l'usage des React-Server-Components pour les traductions.

Coté React-Native, la première RC de la v0.72 est sortie. Des nouveautés très attendues de Metro 0.76 devraient être bientôt disponibles, comme le support des symlinks!

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

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

Jack HerringtonPrincipal Engineer - Youtuber

💸 Sponsor

Publiez plus rapidement votre contenu. Améliorez votre SEO.

Pour les éditeurs de contenu : destiné aux sociétés qui publient beaucoup de contenu et ont une importante stratégie SEO. Les éditeurs de contenu et équipes marketing peuvent publier le contenu sans aucune complexité technique (éditeur no-code), utiliser des blocks et des templates pré-conçus. Les mises en ligne de page sont instantanées, sans intervention d'un développeur. Les pages et les images sont optimisées grâce à Next.js afin d'obtenir d'excellent scores pour vos Core Web Vitals.

Pour les développeurs : solution plug and play pour votre application Next.js existante ou pour une nouvelle application. De nombreux avantages pour ce CMS :

Conception de blocks réutilisables construits en React
Meta données pour le SEO déjà définies et Sitemap géré automatiquement (module SEO)
Création de vos propres settings custom en React
Admin personnalisable en React
Pas de système de routing nécessaire pour s'adapter au CMS

Visiter Suncel.io | 5mn vidéo démo

⚛️ React

Introducing react.dev

Le nouveau site React est finalement en ligne! Un nouvel article accompagne ce lancement. C'est un très gros projet (tech et contenu) qui aura demandé plusieurs années d'efforts et de nombreux collaborateurs.

Ce que j'aime en particulier:

Le focus sur les hooks et functional components
Les guides avec de nombreux diagrammes, illustrations et challenges intéractifs
La mise en avant de React comme une technologie cross-platform et pas uniquement web
Les pages API bien séparées en references/usage, current/deprecated, client/server
La consistance de manière générale de l'expérience dans son ensemble

Certains changements ont aussi fait polémique cette semaine, en particulier le fait de ne recommander qu'une petite liste de frameworks pour démarrer un projet React (Next.js, Remix, Gatsby, Expo) mais de ne pas recommander les autres (Vite, Create-React-App, client-side SPA...).

Lire aussi:

Map of React API

Une représentation spatiale et intéractive des APIs React, avec en plus des références vers de bons articles externes pour chacune de ces API. Je trouve que c'est une super idée pour compléter la documentation officielle.

👀 React PR - Suspend commit without blocking render: une feature qui sera d'abord utilisé en interne, notamment sur les resources (CSS, font, images). Lors d'une navigation avec startTransition, React pourra attendre un peu que les images de la prochaine page soient chargées (thread).
👀 React PR - Remove layout effect warning on the server: le warning SSR de useLayoutEffect va être retiré. Dan Abramov commente sur useIsomorphicLayoutEffect.
🧵 Tim Neutkens on improving next export: compatible App Router, Server Components...
📜 Future Proofing Your Remix App: Remix explique sa stratégie de déploiement des breaking changes sur les versions majeures. Ils prévoient d'introduire des "Future flags" qui permettent d'activer les breaking changes prévus en avance sur la v1. Si vous avez réussi à activer tous les flags en v1, il devrait être facile d'upgrader en v2.
📜 Internationalization In Next.js 13 With React Server Components: les Server Components vont avoir un gros impact sur la manière dont on traduit nos apps React, en particulier sur les performances, le code splitting et la taille du bundle. Cet article introduit bien le sujet. Je donne quelques détails en plus dans ce tweet.
📜 Hooks You Probably Don't Need: une présentation des hooks un peu moins connus de React, classés par chance d'en avoir besoin (vous utilisez useInsertionEffect vous? 😅). J'ai bien aimé la fin sur l'usage de useLayoutEffect et l'anti-pattern courant présenté. Je pense que useSyncExternalStore est une meilleur API que useLayoutEffect pour lire les APIs browser telles que localStorage.
📜 Front-Commerce is getting a Remix: après Shopify, c'est Front-Commerce qui décide de se baser sur Remix. Cela présente de nombreux avantages, comme la possibilité d'utiliser le progressive enhancement, un mode MPA, et d'être moins couplé à React.
📜 Astro: How Good Is the New JavaScript Framework?
📜 Reducing 97% of the Open UI site's JavaScript by migrating to Astro
📦 React-Error-Boundary v4: nouvelle API useErrorBoundary pour déclencher une error boundary manuellement, ou faire un reset.
📦 Wakuwork: Daishi Kato travaille sur un framework React minimaliste avec support React Server Components.
📦 Framer-Motion 10.5: useAnimate()
📦 Remix-Sitemap
🎥 Will React's New Cache Fix Its "Use" Hook?
🎥 State Management for NextJS 13 Server and Client Components
🎥 Understanding React's types
🎙️ The future of React

Ne manque pas le prochain email !

If you are not signed-up, you are missing out

William CandillonReact-Native animations expert - Youtuber

💸 Sponsor

Build and Run Synthetic Monitoring That Scales

You build it, you own it! It’s a simple mantra that has driven software development for years. But what is the best way to monitor complex React applications?

First: Use Playwright to simulate critical user flows and guarantee that your app works. Second: Be confident that mission-critical APIs are up and running.

Monitoring as code is a new way to define, test, and deploy entire Playwright-based testing and monitoring setup directly from code. Get started with the Checkly CLI by running npm create @checkly/cli.

Learn more about the Checkly CLI here.

Unite your QA, dev, and ops teams with Checkly

📱 React-Native

👀 Advantages of code splitting in Expo: le code splitting (rendu possible par resolveWeak, Metro 0.76, React-Native 0.72) présente pas mal d'avantages pour Expo Router!
👀 Built-in TypeScript aliases / absolute paths are coming in Expo SDK 49
👀 Reanimated examples running on Docusaurus
📦 React-Native v0.72 RC.0: les principales nouveautés de la v0.72 sont listées dans Road to 0.72.0: Metro (symlinks, exports, resolveWeak), Hermes...
📦 Bottom Sheet v5 Alpha: Reanimated v3, Gesture Handler v2, Web support
📦 React-Native-Permissions v3.8: support nouvelle architecture
📦 React-Native-PDF-Renderer v1: renderer natif PDF
📦 React-Native-Testing-Library v12
📜 Explore Expo Router Alpha
📜 Simplifying React Native Development with Expo
🎥 Build a Native View Library with Expo, React-Native, Swift and Kotlin
🎥️ The React Native Show #21 - Profiling in native and React Native

🧑‍💻 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!