React Hebdo #112: JSX Expressions, Storybook, Remix, Actionless reducers, Atomic Forms, NPM trends, Expo, RN Keyboard, Bun...

⚠️ IMPORTANT: ma newsletter LinkedIn est arretée

🔗Abonnez-vous sur ReactHebdo.fr 🇫🇷

------------------------------------------------------------------------------

Bonjour à tous!

On dirait que pas mal de devs sont déjà en vacances 😎. De mon coté je vais aussi sauter quelques éditions cet été pour me reposer.

Cette semaine, on retrouve du contenu React et React-Native assez varié. Pas mal de retours très positifs de la communauté sur Bun!

De mon coté, Docusaurus 2.0 ne devrait pas tarder, après 4 ans de alpha/beta. J'espère que vous m'aiderez à faire du lancement un succès! Je pense vous envoyer un email différent pour l'occasion, histoire de mieux vous présenter cet outil sur lequel je travaille.

🙏 Pour soutenir la newsletter: 

• 😍 Recommande la newsletter! Ca m'aide vraiment!
• 💸 Sponsorise React Hebdo
• 🧵 Retweet le dernier thread Twitter!
• 📨 Réponds à cet email: merci pour les retours 😘
• 💬 Rejoins le chat Discord
• 👥 Suis la page LinkedIn

React

Statements Vs. Expressions

Josh Comeau prépare son prochain cours sur React. Il propose de revenir aux bases de JavaScript, et ainsi permettre une meilleur comprehension du fonctionnement de JSX qui ne fonctionne qu'avec des expressions. Sur le même sujet, j'aimerais bien que la proposal do-expressions progresse 😇.

How to build connected components in Storybook

Un article officiel de Storybook qui explique bien tout ce qu'on peut faire grace aux decorators: ajouter un layout, des providers globaux, mocker un store Redux ou des requêtes… Cela peut aider pour ajouter des composants “connectés” à votre Storybook.

How I Estimate NPM Package Market Share (and how Redux usage compares to other libraries)

Mark Erikson (Redux) explique comment il analyse les tendances d'usage de packages npm, en se basant sur divers outils plus ou moins fiables. Les stats de downloads sont souvent liés aux builds des CI. Il prend en exemple les state managers React.

Actionless and Stateless Reducers in React

useReducer n'est pas réservé aux cas complexes: on peut aussi l'utiliser pour des cas d'usage très simples comme faire passer un booléen de false a true.

Extras:

• 📜 Next.js: open external links in a New Tab: ça peut être intéressant de créer votre propre abstraction au dessus du framework pour rajouter un comportement
• 📜 The Unlocked Possibilities of the :has() Selector: feature CSS. Comparaison intéressante avec React à la fin.
• 📜 Atomic Forms in React: à propos de Jotai-Form
• 📜 Create a simple cookie with Remix: démontre que l'usage de cookie en Remix est relativement simple, et proche du protocol HTTP
• 📜 Yelp - Migrating from Styleguidist to Storybook
• 📜 Fresh: The Next-Gen JavaScript Web Framework
• 📜 Rendering long lists using virtualization with React
• 📜 Component Code Coverage in Cypress v10
• 🧑 🎨 Remix + Bun demo
• 🧑 🎨 React-on-the-edge: demo de Vercel qui montre comment utiliser React SSR (sans Next.js) avec le Edge Runtime. Avec ou sans streaming.
• 🐦 Remix loader type inference: PR mergée pour faciliter l'usage typesafe du hook useLoaderData() 👌
• 🐦 Bun + React SSR: gains de perf significatifs
• 📦 RemixBlocks: je trouve l'idée intéressante: les nested routes Remix sont full-stack ce qui en fait un bon candidat pour le copier/coller, de manière assez similaire à Tailwind.
• 📦 react-obsidian: dependency injection pour React
• 📦 remix-bossa-nova-stack
• 📦 Preact 10.9
• 📦 Next.js 12.2.1
• 📣 Vercel: Hydrogen can now be deployed with 0 config

💸 Sponsors

💡 Comment sponsoriser React Hebdo 

CSS Weekly Newsletter

Stay up-to-date with the latest trends in CSS by getting only relevant and valuable articles and tutorials directly into your inbox. Join more than 30,000 developers and sign up now.

Axiom - Zero-Config Observability for Vercel

Axiom vous permet de surveiller la santé et la performance de vos déploiements Vercel en ingérant toutes vos données de requête, de fonction et Core Web Vitals.

Utilisez le tableau de bord d'Axiom pour avoir une vue d'ensemble de tous vos logs et stats Vercel, explorez des projets et des déploiements spécifiques et obtenez un aperçu de la performance des fonctions en un seul clic. 

PS: J'utilise Axiom pour surveiller les logs de ma newsletter 😉

💸 Jobs

Pricemoov - Senior Software Engineer React.js - 55-80k€

Pricemoov est une solution SaaS de pricing dont la mission est de permettre à ses clients d'optimiser leur marge et leurs revenus grâce à une meilleure gestion de leurs stratégies de prix.

Notre siège est à Paris et nous avons ouvert notre bureau à New York en novembre 2021. Fin 2022, on accélère notre internationalisation avec l'ouverture de Singapour. Nous serons plus de 100 collaborateurs d'ici là !

En rejoignant l'équipe Engineering de Pricemoov, vous participerez notamment à la conception d'une architecture front-end intelligente afin de permettre au produit de scaler à l'international. 

Notre ambition technique est l'amélioration continue en visant de hauts standards en terme de qualité de code. Vous y participerez en progressant sur le chemin du software craftsmanship.

Paris 10ème, remote friendly, 55K - 80K+ selon la séniorité technique.

React-Native

• 📜 Expo: sunsetting the CLI Web UI: l'UI web va disparaitre. Pas très grave, c'était de toute façon limité par rapport aux features du CLI.
• 🧑 🎨 useAnimatedSentor travel cards parallax: demo avec un résultat visuellement très sympa 😎
• 📦 react-native-keyboard-controller 1.0: synchronise la visibilité du clavier avec les animated values 👌
• 📦 vision-camera-plugin-builder: réduit le boilerplate pour la création d'un plugin vision camera.
• 📦 React-Native MacOS 0.68
• 🎥 It’s After Effects, but in Remotion: William Candillon montre comment React-Native-Skia tourne sur le web avec Remotion. On peut suivre et appliquer les tutoriels After Effect, pas ecrit pour nous à la base.
• 📊 FlatList vs FlashList profiling
• 🐦 Reanimated now supports V8
• 🐦 Expo EAS + App Store Connect v2
• 🐦 BottomSheet + FlashList integration

Divers

• Agenda for the 91st meeting of Ecma TC39
• New Node.js security releases
• Simplify your full-stack applications with XState
• The many faces of themeable design systems
• Avoiding <img> layout shifts: aspect-ratio vs width & height attributes
• Fireship + Bun: JavaScript just got way faster
• Bao.js: A fast, minimalist web framework for the Bun JavaScript runtime.
• The Future of CSS: Variable Units, powered by Custom Properties
• Parcel CSS 1.11
• Announcing support for WASI on Cloudflare Workers
• Why Your Cached JavaScript Is Still Slow and Incurs Performance Overhead