Aller au contenu principal

📨 #144: Server Actions, Million.js, Rendering, Layout Animations, Qwik, Lingui, Remix, React-Router, React-Native macOS, Expo Modules, Ignite...

· 8 minutes de lecture
Sébastien Lorber
Editeur - Mainteneur de Docusaurus

Salut à tous !

Cette semaine, c'est la "launch week" de Vercel qui devrait nous faire de belles annonces autour de React, Next.js et son offre cloud. On a déjà un petit aperçu de ce qui arrive très prochainement dans Next.js!

Il y a pas mal de bons articles à lire cette semaine, dont certains sont intéractifs. J'ai bien aimé en apprendre plus sur Million.js et son concept de "block virtual DOM".

Coté React-Native, la plateforme macOS rattrape son retard avec la sortie d'une v0.71, et Expo facilite la création de modules natifs locaux.

Il y a un paquet de conférences les prochaines semaines, on devrait avoir de belles annonces! D'ailleurs, vous verrez peut-être un flyer pour ma newsletter à l'une d'elle! Je compte sur vous pour convaincre vos collègues de s'inscrire.

En parlant de conférences, React Summit (Amsterdam 2-6 Juin) est la plus grosse conférence React au monde. Ils nous offrent 5% de réduction avec le code "ThisWeekInReact5".

💡 Consulter cette newsletter sur Twitter - format visuel 🎨

Pour me soutenir:

Ne manque pas le prochain email !

    💸 Sponsor

    Start UI

    Start UI [web] - Starter UI d’application web

    Notre starter UI d'application Web gratuit et open source offre un moyen rapide et facile de démarrer votre prochain projet. Il inclut les bonnes pratiques et des outils prêts pour la production pour vous aider à démarrer immédiatement, vous faisant ainsi gagner du temps et des efforts lors de la phase de setup.

    Disponible avec des fonctionnalités intégrées : 🔐 authentification, 📱responsive layout, 🧑‍💻 gestion des utilisateurs, 🇫🇷 internationalisation et support right-to-left, 🌚 dark mode et des 🎛 composants avancés pour faciliter le développement. Essayer la demo.

    Prêt à être utilisé avec TypeScript, NextJS, Chakra UI, TanStack Query, Storybook et plus encore.

    🚀 Start UI [web] sur GitHub

    ⚛️ React

    Introducing storage on Vercel

    Introducing storage on Vercel

    Vercel vient de lancer son offre storage edge-first, particulièrement adaptée pour un usage dans les React Server Components et Next.js:

    • Vercel KV: store key-value Redis, basé sur Upstash.
    • Vercel Postgres: database PostgreSQL, basée sur Neon.
    • Vercel Blob: file storage, basé sur Cloudflare R2.

    C'est la Vercel Ship week: d'autres nouveautés devraient être annoncées dans les prochains jours. L'image choisie nous laisse penser qu'il y aura une release Next.js demain, introduisant une nouvelle feature Next.js Server Actions. Cela dévoile aussi la volonté d'améliorer le progressive enhancement dans les apps React, d'une manière assez similaire à Remix: le formulaire peut aussi fonctionner sans JavaScript ou hydratation.

    Note: cet exemple n'est pas vulnérable aux injections SQL car il utilise des template literals.

    Million.js - Virtual DOM: Back in Block

    Million.js - Virtual DOM: Back in Block

    Article interactif qui présente Million.js et son concept de "Block Virtual DOM". Son approche du diffing est différente: non récursive, basée sur l'analyse statique, la compilation et le dirty checking, assez similaire à Svelte.

    Million.js ne vient pas remplacer React, mais s'intègre avec pour améliorer les performances. Il n'est conseillé de ne l'utiliser que dans certains cas bien précis: beaucoup de contenus statiques et arbres UI avec une structure stables.

    The Interactive Guide to Rendering in React

    The Interactive Guide to Rendering in React

    Article interactif qui explique quand React re-render un composant. Une bonne resource pour les débutants, avec des explications détaillées sur setState(fn), batching, memo, StrictMode etc...

    Ne manque pas le prochain email !

      💸 Sponsor

      Nylas

      Nylas: Powering email, calendar, and contacts in the products you build

      The Nylas Email and Calendar APIs allow developers to build communications features that connect them to all major service providers in the world - with a single integration.

      Nylas makes selecting a use case and a server-side SDK language easy. You'll get a step-by-step tutorial complete with a ready-to-use React frontend and download-ready codebase with your API credentials. Stop building and maintaining individual integrations with multiple providers and start launching email and calendar features with guaranteed 99.99% uptime and no maintenance downtime.

      Start building with Nylas for free!

      📱 React-Native

      Introducing React Native macOS 0.71

      Introducing React Native macOS 0.71

      Microsoft à sauté les releases React-Native macOS v0.69 et v0.70 pour passer directement à la v0.71. Le but est maintenant de rester à jour avec les autres plateformes: la v0.72 est déjà en cours de dev. Cela me semble très utile: d'après les retours ça n'est pas évident de mixer différentes versions React-Native au sein d'un même monorepo.

      Cette version 0.71 apporte un support expérimental de Fabric, ainsi que toutes les nouveautés qui sont arrivées récemment sur mobile: TypeScript, Flexbox... Microsoft et Meta collaborent et l'usage de cette plateforme semble en croissance croitre au sein des 2 entreprises: Meta utilise React-Native macOS sur Messenger Desktop par exemple.

      🧑‍💻 Jobs

      🧑‍💼 Shotgun - Senior Full Stack Engineer - 60-75k€ + BSPCE

      Shotgun est la billetterie des évènements electro. Nous recherchons des devs expérimentés pour travailler sur une stack moderne: React, React-Native, Typescript, GraphQL, NextJS, PgSQL, Vercel...

      🧑‍💼 Premier Octet - Développeurs(euses) React - Paris

      Nous cherchons des développeurs(euses) JavaScript passionnés. Vous interviendrez en développement sur des projets variés et motivants, à la fois serveur et front (React, Nest, Next), et éventuellement mobile (React Native).

      💡 Comment publier une offre d'emploi ?

      🏢 Vous recrutez en CDI ou freelance? Contactez-moi!

      🇫🇷 En français

      💡Tu peux m'envoyer ton contenu: sebastien@thisweekinreact.com !

      🔀 Autre

      🤭 Fun

      alt

      A plus 👋


      Ne manque pas le prochain email !