📨 #166: Server Components, Waku, React-Forget, React-Native, Expo, Million, Remotion, Next.js, Storybook, Remix, AuthKit, Expo Router, Reactotron, Unistyles, Skia, SEO, CSS, Oxlint...
Salut à tous !
Cette semaine est chargée d'actualités!
Il y a eu pas mal de nouvelles releases, et des articles intéressants. C'est top de voir React-Forget se déployer lentement sur Instagram. Remotion a également commencé à démontrer son plein potentiel avec le lancement de GitHub Unwrapped.
React-Native est en feu cette semaine, avec la v0.73 stable, Expo SDK 50 et Expo Router v3 en bêta et quelques autres sorties. Ce qui m'excite le plus, c'est qu'Expo dévoile progressivement son plan: supporter les React Server Components de manière universelle.
Cette édition est spéciale pour moi : c'est la première fois que je ne suis pas seul à l'écrire! Benedikt a presque écrit toute la section React-Native. Je n'ai pas utilisé React-Native en production depuis 2020 😅, c'est cool d'avoir quelqu'un qui utilise toutes les dernières libs pour m'aider à commenter de manière pertinente.
N'oubliez pas de répondre aux enquêtes State of JavaScript et State of React-Native. Et si vous pouvez me mentionner à la fin, c'est super ! Theo T3 vous montre comment faire 😄
💡 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
MightyMeld launches visual dev tool to accelerate React development
A new kind of dev tool for React just opened its beta. See your JSX and styles in action while running your build. Hop quickly to your favorite editor. Use drag’n’drop and generative AI to update your app. As you work, MightyMeld generates clean code ready to merge as part of your PR. Free to use.
⚛️ React
Waku - Minimal React Framework that enhances React Server Component usage
Nous l'avions déjà présenté, mais la v0.18 vient de sortir avec un petit blog post pour finalement l'introduire proprement. Waku est un framework React minimal qui nous permet d'explorer les capacités de base des Server Components, en dehors des stratégies SSG/SSR habituelles. Techniquement, il s'agit d'un bundler basé sur Vite qui produit du JS pur et supporte le déploiement vers des runtimes edge. Projet maintenant sponsorisé par Vercel.
- 💸 Developer Nation Survey - For each completed response, Developer Nation will donate to one of the charities of respondents’ choosing! Start now!
- 🍿 Remotion - GitHub Unwrapped 2023: cette année, Remotion s'est associé à GitHub pour produire la vidéo GitHub Unwrapped (voici la mienne). Une belle vitrine pour le type de vidéos qui peuvent être produites avec React.
- 🐦 React hydration error diff demo: regain d'intérêt pour cette fonctionnalité très attendue (nouvelle PR React).
- 🐦 Tanner Linsley about React concurrent model vs reactive model: sur la difficulté d'obtenir les avantages des deux modèles à la fois. Tanner a finalement migré le futur routeur TanStack vers un modèle réactif (démo visuelle).
- 🐦 Next.js moving away from extending
fetch(), adding new APIs likenoStore() - 📖 Next.js - Updated Server Actions docs - Includes how to use them outside forms, security recommendations, and best practices
- 📖 Next.js React Foundations updated with App Router and Server Components
- 📜 A Chain Reaction: Dan Abramov est de retour avec une belle leçon de storytelling à travers la création d'une fonction récursive qui render du JSX.
- 📜 Next.js 14: Layouts vs Templates: les templates sont remontés lors de la navigation et réinitialisent leur état.
- 📜 Storybook for React Server Components: Storybook 8 est en alpha. Il inclut le support expérimental de Next.js RSC. En pratique, les RSC s'exécutent côté client et vous devrez mocker le network et appels Node.js.
- 📜 The anatomy of shadcn/ui: donne un bon aperçu de la l̶i̶b̶r̶a̶r̶y̶ populaire utilisant Radix + Tailwind, et la façon dont il divers packages sont assemblés pour fournir une bonne DX.
- 📜 How to set up self-healing URLs in Next.js for better SEO: montre comment créer des urls Next.js qui sont à la fois lisibles et qui incluent un identifiant stable, pour pouvoir changer le titre de l'article sans briser les liens.
- 📜 Remix - Submit a form without overwriting existing parameters: suggère d'utiliser un
<ExistingSearchParams>pour ajouter les paramètres existants au formulaire. - 📜 Polymorphism in React - 2 patterns you must know
- 📜 Lexical state updates
- 📦 React DevTools 5.0 - New React-Forget badge: nouvelle feature qui permet de voir le déploiement de React-Forget de Meta en production sur Instagram (ref).
- 📦 Million.js 3.0 - Overhauled version, faster drop-in replacement
- 📦 AuthKit - The world's best login box powered by WorkOS and Radix
- 📦 react-hook-form 7.49 - react-server bundle, reactive errors prop...
- 📦 Next-Admin 3.0 - App router support
- 📦 Epic Stack - Client Hints - Eliminate flashes of incorrect content
Ne manque pas le prochain email !
💸 Sponsor
Open-source React Framework for building enterprise B2B apps
Refine streamlines the building of production-ready B2B apps like internal tools and dashboards.
It is designed to address the specific pain points of larger organizations, giving top priority to security and reducing repetitive tasks with its hooks and components.
Offers industry-standard solutions for critical project aspects like authentication, access control, routing, networking, and state management.
🌱 Visit complete CRM app template built with Refine.
📱 React-Native
- 📊 State of React-Native - Reminder to fill the survey!
- 🚧 RFC - Well-defined event loop processing model: pour que l'event-loop de React Native se rapproche de la spécification web.
- 🐦 POC of multi-window apps support in React Native
- 🐦 interpolate() in React Native Reanimated - visually understand extrapolation
- 📖 Expo introduces canary releases
- 📜 Expo EAS - Keep your cache close — It’s Faster!: Expo réduit le temps d'installation des pods en mettant en cache les pods les plus populaires directement sur leurs VM EAS.
- 📜 Integrate Firebase Analytics into Expo Router: Contrairement à React-Navigation, Expo-Router est url-first, et vous devez écouter les changements de pathname.
- 📜 Creating a macOS MenuBar app with React Native
- 📜 Epic Games vs Google - Trial Verdict, a Win for All Developers: pourrait apporter des changements aux règles des app stores sur les modèles de paiement in-app et leur taxe de 30 %.
- 📦 React Native 0.73 nouveau debugger destiné à remplacer Flipper, support stable de Symlink dans Metro (important pour les monorepos), template Kotlin pour Android, support d'Android 14...
- 📦 Expo SDK 50 beta: upgrade vers React-Native 0.73, nouvelle API Expo Dev Tools Plugin, une réécriture complète de
expo-sqlite, une amélioration deexpo-camera, une nouvelle bibliothèque pour déterminer la compatibilité entre un bundle JS et un build natif particulier (@expo/fingerprint),expo-updateshooks API, EAS updates/rollouts et bien plus encore. - 📦 Expo Router v3 beta: inclut les API Routes, le bundle splitting pour le web, et beaucoup d'autres nouvelles fonctionnalités. Expo dévoile sa volonté de supporter les Universal React Server Components.
- 📦 Reactotron 3.0: automatic log tracking, amélioration debugging Android, plus rapide...
- 📦 React Native Skia - 3D transformations: voir aussi la 🐦 demo de William Candillon
- 📦 React-Native-Unistyles 2.0
- 📦 react-native-permissions 4.0 - iOS 17, Android 14 support
- 🎙️ Galaxies - Rocket Ship: nouveau podcast avec un focus React-Native et de bons invités, à découvrir.
🇫🇷 En français
💡Tu peux m'envoyer ton contenu: sebastien@thisweekinreact.com !
🔀 Autre
- 📜 Baseline 2023 - All new cross-browser supported APIs - Displayed on on caniuse
- 📜 CSS Wrapped - 2023 was a huge year for CSS!
- 📜 WebKit Features in Safari 17.2 - exclusive accordions, CSS nesting, maths, animations...
- 📜 Does Interaction to Next Paint actually correlate to user behavior?
- 📜 The TypeScript 5.3 Feature They Didn't Tell You About - as const satisfies
- 📜 Ternaries could be beautiful - A new proposal for Prettier formatting
- 📜 Improving Node.js loader performance
- 📦 Seroval 1.0 - Stringify JS values
- 📦 Oxlint - General Availability
🤭 Fun
A plus 👋
Ne manque pas le prochain email !
