📨 #119: React OG Images, Tremor, Storybook, Decoupling, Rendering, Data-Fetching, Remix, Qwik, TypeScript, Playwright...
Salut à tous !
Une semaine avec pas mal de bons articles React assez variés. Plutôt calme coté React-Native.
Une innovation Vercel super intéressante pour la génération d'images OG.
La ViteConf vient de commencer, il y aura sans doute quelques annonces ;)
Je fais une présentation Docusaurus ce vendredi avec code.gouv.fr (atelier BlueHats organisé par la direction interministérielle du numérique), n'hésitez pas à vous inscrire, c'est ouvert à tous.
💡 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
Avez-vous déjà essayé Storyblok ? C'est le CMS headless avec un éditeur visuel conçu pour les développeurs et les spécialistes du marketing !
Utilisez Storyblok React SDK pour construire rapidement des composants réutilisables et récupérer le contenu pour créer vos applications, sites Web ou eCommerces React, Next.js, Remix, ou même React-Native.
Consultez le Hub Technologique et découvrez-le vous-même !
⚛️ React
Vercel OG Image Generation: Fast, dynamic social card images at the Edge
Vercel propose une nouvelle solution très efficace pour générer des social cards dynamiques dans des Vercel Edge Functions. Pratique: il est possible d'utiliser du JSX, des composants React (stateless) et Tailwind sans config additionnelle. Je recommande le thread de Shu Ding qui explique comment ça marche, vraiment intéressant. Ils utilisent même Yoga, le moteur de layout de React-Native 🤭
The future of rendering in React
Article très bien illustré qui présente les patterns de React 18 et plus. Vous y trouverez des infos sur le fonctionnement du streaming SSR, Suspense, React lazy, l'implémentation de feature flags avec les Server Components...
Overcoming Popular Issues With React Projects
Incite à découpler un maximum nos apps JavaScript du framework (React ou autre). Prone un retour vers plus de simplicité. Quelques "hot takes" qui ne feront sans doute pas l'unanimité.
Tutoriel avec une section particulièrement intéressante qui explique comment automatiser la création des Storytook controls en réutilisant les types TypeScript de la librairie UI. Très utile lorsqu'on forward des props. Supporte même les helpers comme Pick et Omit.
- 👤 Sathya Gunasekaran rejoins la React core team, probablement travailler sur le compiler React-Forget
- 👥 Next.js Conf 2022 speakers
- 📖 Beta docs: React.Children + useId + createElement + useImperativeHandle
- 📖 Next.js on Vercel docs improvements
- 🌶 React and Next.js is DEAD — Something New is (Finally) Replacing It (For Good): explique en quoi le framework Qwik présente un modèle supérieur à React. Titre click-bait, mais article réellement intéressant.
- 📜 Build a React Custom Renderer - Part 1: nouvelle série qui montre comment créer un renderer React. La première partie ne gère pas encore les updates.
- 📜 Remix, React, and State: donne un modèle mental pour Remix qui réconcilie le state React de manière end-to-end / fullstack.
- 📜 How to write your own state management library: pour comprendre comment une librairie de state management fonctionne, et comment implémenter un système de sélecteurs.
- 📜 How to fetch data in React with performance in mind: explique bien pourquoi le data-fetching en React n'est pas si simple qu'il n'en a l'air.
- 📜 Avoid impossible UI states with React, Typescript and xState: les discriminated union-types de TypeScript permettent d'éviter les états impossibles, et XState permet d'éviter les transitions d'état impossibles.
- 📜 I changed my mind about writing new JavaScript frameworks: il n'y a que 4 frameworks qui supportent à la fois SSG + SSR: Eleventy, Next.js, Gatsby, Redwood.
- 📜 How to Use Sandpack for Code Demos: article mis à jour avec les dernières nouveautés Sandpack, l'outil Codesandbox qui permet de créer des code playgrounds.
- 📦 Tremor 1.0: une librairie de composants UI React pour créer des dashboard analytics.
- 🐦 W3C Trusted Types + React + XSS: une nouvelle proposal HTML pourrait apporter une solution native pour prévenir les failles XSS, et peut-être se passer à terme de
dangerouslySetInnerHTML?
Ne manque pas le prochain email !
💸 Sponsor
Progressez dans votre anglais professionnel avec Cambly
Cambly, c'est la plateforme pour progresser à l'oral en anglais avec des tuteurs anglophones, quand et où vous voulez. Maîtriser le vocabulaire technique, interagir avec vos collègues ou clients à l'international ou travailler depuis n'importe où dans le monde, nos tuteurs s'adaptent à vos besoins, votre niveau et vos objectifs.
👉 Faites un cours d'essai gratuit de 15 minutes et profitez de 50% de réduction sur votre abonnement
📱 React-Native
- 🎥 Can It Be Done In React-Native - Season 5 Trailer
- 🚧 Expo Router 0.0.26: useHref / copy link + Splash Screen Orchestration
- 📖 React-Native docs fully bilingual - Java + Kotlin
- 🎨 Reanimated - useAnimatedKeyboard() demo
- 📦 react-native-test-app 2.0: Expo Config plugins support
- 📦 react-native-quick-sqlite 5.0: promise API
🧑💻Jobs
🧑💼 Masteos - Lead ReactJS - Hybride ou Remote - 75-90k€
Masteos réinvente l’expérience de l’investissement locatif, en proposant un parcours entièrement dématérialisé et un accompagnement de haut niveau aux particuliers qui souhaitent acheter un bien pour le louer.
🧑💼 Matters - Senior Software Engineer (React/Node)
Envie de challenges et de contribuer à des réussites entrepreneuriales ? Rejoins notre startup studio pour construire des produits variés et complexes dans une culture devOps, une stack JS, des code reviews, tests et déploiements automatisés. Paris, remote flexible, 50K€-65K€.
🧑💼 Linxea - Lead Dev React.js - 60-75k€
Plateforme leader de l’épargne en ligne. Stack tech : ReactJS, Redux, Saga, Formik, Storybook, Webpack, Typescript. Skills : architecture, développement, pratiques craft (clean architecture, clean code ,TDD), mentoring et formation des équipes. Paris 75008 - 2j de TT/sem.
💡 Comment publier une offre d'emploi ?
🇫🇷 En français
💡Tu peux m'envoyer ton contenu: sebastien@thisweekinreact.com !
🔀 Autre
- Playwright Locators APIs inspired by Testing Library
- Deno - The Future of the Web is on the Edge
- New patterns for amazing apps
- Optimize long tasks
- Optimizing Interaction to Next Paint (INP)
- Cloudflare Pages gets even faster with Early Hints
- Codesandbox - A Unified CodeSandbox Experience
- Safari Technology Preview 155
- Axios 1.0
🤭 Fun
Ne manque pas le prochain email !
