React Hebdo #16: React, Sentry, Prisma, Storybook, TS, Expo, NextJS sur Netlify...

Andrew Clark @acdlite

The React Core team is joining the Facebook employee walkout in solidarity with the Black community. Facebookʼs recent decision to not act on posts that incite violence ignores other options to keep our community safe. We implore the Facebook leadership to #TakeAction. https://t.co/5YhUM2Dpe4

React

Smashing magazine explique comment gérer les erreurs React et les remonter dans Sentry.

Sentry est l'outil que j'utilise sur la majorité de mes projets (React et ReactNative).

Possible via Netlify Functions, simplifié via le package next-on-netlify.

Erreur classique en React: créer un composant à l'intérieur d'un autre. Si vous faites cela, le composant imbriqué va unmount/remount a chaque fois.

Typesafe de la DB jusqu'au client React, avec Prisma, Nexus, codegen, Urql...

Support TypeScript natif sans config

ReactNative

🇫🇷Quelques raisons de vous convaincre qu'Expo est un bon outil.

Note: le SDK 38 arrive!

Repo avec plusieurs documents markdown contenant des tips sur Expo

Divers

🇫🇷Article sympa et en français sur Flutter.

Par contre, je ne comprends pas trop les arguments de l'auteur en défaveur de ReactNative, tant il y a de points communs entre ReactNative et Flutter sur le modèle de développement déclaratif, la gestion de l'état...

Sortie de beta pour Prisma 2, un client DB typesafe (pour l'instant SQL uniquement). Les nouveaux metaframeworks comme Redwood et Blitz se basent dessus.

Différences entre referential, shallow and deep equality.

Concepts importants à connaitre pour optimiser le render React.

Techniques utiles à connaitre pour réduire le boilerplate TS de vos projects, en déduisant les types via typeof et d'autres helpers.

Pourquoi je préfère ImmerJS aux alternatives JS, Lodash, ImmutableJS... en attendant les records/tuples...

Guillermo Rauch incite à tester de manière intelligente son code, et notamment à créer plus de tests E2E, car le cout de ces tests est beaucoup plus faible qu'auparavant.

Pas toujours simple de savoir dans quelle catégorie mettre sa dépendance :)

Même api, mais au dessus de fetch(), et beaucoup plus léger que le package original. Par l'auteur de Preact.

On ne peut pas tout automatiser. Devon Govett (ParcelJS/Adobe) nous montre sa matrice de tests manuels d'un design system, sur lequel il y a déjà des tests automatisés (via Chromatic notamment).

Vous en avez pas marre de formatter le code à la main dans les issues Github?

En France, on ne fait pas vraiment la différence... mais dans certains pays, si!