React Hebdo #112: JSX Expressions, Storybook, Remix, Actionless reducers, Atomic Forms, NPM trends, Expo, RN Keyboard, Bun......
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
🧑🎨 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
💸 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.
🎥 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.
