React Hebdo #102: Lexical, Mitosis, Remix, Next.js, Redux, Storybook, TurboModules, Node 18, HTTP 103, CSS :has()...
Sébastien Lorber ⚛️ This Week In React
🔥 ThisWeekInReact.com - 📨 Rejoins 45k+ devs - 🦖 Docusaurus maintainer @ Meta - Freelance
⚠️ IMPORTANT: ma newsletter LinkedIn est arretée
🔗Abonnez-vous sur ReactHebdo.fr 🇫🇷
------------------------------------------------------------------------------
Si tu aimes cette newsletter, abonne-toi en priorité sur:
Bonjour à tous!
Lexical semble etre une alternative moderne à Draft.js.
Redux nous invite de plus en plus à migrer vers Redux Toolkit.
De nombreuses librairies apportent un support ou une meilleur compatibilité avec React 18.
React-Native: l'adoption de la nouvelle architecture est bien en marche, avec plusieurs early adopters qui publient des libs et du contenu lié aux TurboModules.
La plateforme web continue de s'améliorer, et Node 18 améliore sa compatibilité avec les standards en ajoutant l'API fetch().
🙏 Pour soutenir la newsletter:
React
Nouvelle lib open-sourcée par Meta pour la création d'éditeurs de texte extensible (système de plugins pour supporter mentions, hashtags…). Semble être une alternative moderne et légère à Draft.js (pas besoin d'utiliser ImmutableJS cette fois 😏). Ne dépend pas spécifiquement de React, mais propose un binding officiel. Peut être utilisé par d'autres frameworks et pourrait même viser d'autres plateformes (support iOS prévu).
Mitosis est un outil qui permet de créer un design system avec un dialecte proche de React/JSX (inspiré de Solid). Mitosis est capable de compiler ces composants pour divers frameworks (React, Angular, Svelte, React-Native…). Cela peut être pratique pour les grosses entreprises qui utilisent plusieurs frameworks dans le temps. Cet article officiel est une bonne introduction
Explique comment gérer 2 formulaires associés à une même route Remix. Il n'est possible de n'avoir qu'une seule ActionFunction par route, alors la meilleur solution semble d'utiliser l'attribut action sur le bouton submit.
Un bon aperçu de quelques principes d'accessibilité dans un contexte React: description de props aria-*, impact sur les screen readers, couleur, focus ring…
Storybook 6.5 va inclure diverses améliorations de performance pour améliorer l'expérience de dev en local via la compilation lazy des stories: démarrage 3x plus rapide, rebuild 2x plus rapide. L'impact semble significatif pour les gros Storybook. A comparer avec Ladle, une alternative à Storybook sortie récemment.
Extras:
Recommandé par LinkedIn
React-Native
💸 Jobs
💡 Sponsorise React Hebdo pour publier une offre d'emploi
Nabla: Front-end engineer React senior - Paris - 55k-90k
Nabla construit une plateforme de médecine asynchrone (chat sans rendez-vous + appel vidéo si besoin), en automatisant un maximum de tâches répétitives pour que les médecins se concentrent sur le soin et que le service reste accessible à tous.
Ils ont levé 17M€, remporté un award Google Play Best Apps of 2021 et viennent de lancer la première offre payante dédiée à la santé des femmes.
Les fans de hooks React et de Typescript se sentiront à la maison, ainsi que les amateurs de GraphQL, Tailwind, Vite ou Next.js. Pas mal de technos sympa à découvrir (WebRTC et codegen notamment)
Paris 3ème, remote possible, 55k-90k en fonction de l'expérience, + BSPCE.
Maki : Développeur Frontend / Fullstack Senior - 65k / 80k
La mission de Maki est de permettre à chaque entreprise de recruter des talents sur mesure. Maki propose des tests d'évaluation standardisés avant l'embauche pour identifier les meilleurs candidats et accélérer les décisions des entreprises, sans préjugés.
Si comme nous vous aimez résoudre des problèmes complexes de façon simple, à l'aide d'outils modernes (ping TypeScript, React-Query, MUI, Playwright, …), afin de proposer des expériences fluides et efficaces, le tout dans une ambiance décontractée (si si), alors venez discuter avec nous :)
Paris 9ème - full remote possible - 65k / 80k en fonction de l’expérience + BSPCE
Divers
CSS dispose d'un nouveau selecteur :has() , souvent appelé “parent selector”, qui permet d'appliquer des règles CSS à un élément parent en fonction de ses enfants. Par exemple, on peut changer le layout d'une carte, seulement si elle contient une image: cela évite d'avoir a appliquer une classe variante sur le parent. Cet article illustra avec de nombreux cas d'usage. J'ai trouvé intéressant la possibilité d'appliquer des CSS variables sur html en fonction de la valeur d'un <select> (demo utile pour le theming ou le support dark mode). Pour l'instant, disponible uniquement dans Safari et Chrome Canary.
Attention à ne pas en abuser: dans un modèle composant comme React il faut mieux se limiter à targeter des classes locales pour éviter de casser l'encapsulation du composant.
Un nouveau status code est officiellement ajouté dans la spec HTML. Il permet d'envoyer des “early hints” au navigateur pour prefetcher/preloader des resources avant de recevoir la réponse 200 du serveur. L'usage semble plutot destiné aux CDNs (voir cet article Cloudflare) qui pourront envoyer des early hints cachés (ou même prédits via du machine-learning 🤯) pendant l'execution de la requête vers le serveur origine.
Avec le support de <dialog> dans Safari 15.4 et un support en hausse, il est temps de s'intéresser à ce nouvel élément. Adam Argyle nous propose un article assez complet sur le sujet: en se basant sur les APIs web les plus modernes, il nous propose d'implémenter des mega/mini modales avec support animation, responsive, light dismiss, custom events…
Extras:
Fabrique des logiciels pour les entreprises qui pensent à l'avenir. 👨🏻💻CTO on-demand. Dev full stack. Consultant.
2 ansSuper digest, merci Sébastien. C'est intéressant de découvrir le code d'outils comme generouted qui combine astucieusement Vite et react-location. OK, on n'a pas le SSR, mais plusieurs autres features qui peuvent éviter d'embarquer un framework complet, avec seulement 78 LoC!