📨 #194: React Conf, Rsnext, TypeScript, Next.js, PPR, Owner components, Preloading, Zustand, Flutter, Preact, Fumadocs, New Arch Survey, Expo CNG, Flutter, VisionOS, Node.js...

31 juillet 2024 · 9 minutes de lecture

Editeur - Mainteneur de Docusaurus

Indie Hacker

Salut à tous !

Je ne sais pas pour vous, mais il fait chaud ici ! 🌞
Seulement en °C/°F, car cette semaine a été plutôt froide en termes d'actualité. 🥶
Beaucoup d'excellents articles, mais pas de version ou d'annonce majeure de React.

TypeScript a été le héros de la semaine, avec la première version bêta v5.6, et un support de premier ordre pour Node.js !

Découvrez nos partenaires conf React Africa (🇲🇦 Casablanca - 29 novembre).
Bénéficiez d'une réduction de 10% avec le code « TWIR ».
C'est la toute première conférence internationale React en Afrique ! D'excellents intervenants ont déjà été annoncés.

💡 Consulter cette newsletter sur Twitter - format visuel 🎨

Pour me soutenir:

😘 Recommande la newsletter! Ça m'aide vraiment beaucoup!
💸 Sponsorise la newsletter ou sponsorise-moi
🧵 Retweet le dernier thread Twitter
📨 Réponds à cet email
💬 Rejoins le chat Discord

Ne manque pas le prochain email !

My favorite resource for keeping up with the React community!

Evan BaconEngineering Manager - Expo

💸 Sponsor

React Components For AI Chat

NLUX is a powerful open-source React library that makes it super easy to add conversational AI capabilities to your web apps. Create high-quality chat UIs with just a few lines of code.

Check the project's GitHub repository to get started, or visit the docs website for tutorials, examples, and API reference.

⚛️ React

🎥 React Conf 2024 Talks

Les conférences de la React Conf 2024 sont enfin en ligne, et vous pouvez également jeter un coup d'œil aux photos et à la vidéo des moments forts.

Nous n'avons pas eu d'annonce majeure concernant React cette semaine, alors j'ai pensé qu'il serait cool de vous rappeler toutes les fonctionnalités de React 19 à venir grâce à cette superbe diapositive bento de la conférence de Lydia Hallie. Notez que React 19 est en Release Candidate et devrait sortir bientôt.

💸 Reactile – a new approach to React-based web apps. Create your own views. Let it handle your windows and widgets in a single browser tab
👀 Rsnext : L'équipe de Rspack est en train de travailler pour que Next.js fonctionne sous leur bundler Rust et a partagé de gros progrès. Les premières alphas ont été publiées et peuvent être essayées en aliasant "next" en "rsnext". De plus, Rspack 1.0 beta 1 est sorti avec une nouvelle fonctionnalité "layers", utile pour bundler votre application en plusieurs variantes et supporter les React Server Components. Nous vous en dirons plus à l'avenir, une fois qu'elle sera prête pour le grand public.
👀 Enhancing SEO in Flutter Web Projects with Next.js Integration : Les utilisateurs de Flutter cherchent désespérément à résoudre le problème du référencement web, après que Google ait fait part de son intention de déprécier et supprimer le moteur de rendu HTML. Cette solution de contournement maladroite est basée sur Next.js.
🐦 Million Lint - Get parents/children on hover, Locate render triggers
📊 Stack Overflow Dev Survey - The 2024 results : React, Node.js et JavaScript restent les technologies les plus populaires.
🗓️ React Rally - 🇺🇸 Utah - 12-13 août - Dernier appel ! Vous avez encore une chance d'obtenir votre billet, et n'oubliez pas la réduction de 10% avec le code « TWIR ».
🗓️ Squiggle Conf - 🇺🇸 Boston - 03 & 04 octobre - 10% de réduction avec le code « TWIR ». 1 jour de conférence, 1 jour d'atelier, au coeur du quartier historique de Boston, sur les outils de développement web !
📜 React Owner Components : Explique parfaitement la différence entre les composants Owner et Parent. Le Owner crée le JSX et lui transmet des props. Les composants clients ne peuvent pas posséder de composants serveurs.
📜 Dissecting Partial Pre Rendering : Illustre comment les fonctionnalités expérimentales PPR de Next.js prennent le meilleur des autres stratégies de rendu avec un exemple concret : une page de cours statique avec des évaluations dynamiques.
📜 Vercel - Flags as Code in Next.js : Explique comment le nouveau package @vercel/flags/next encode les meilleures pratiques pour intégrer les flags de fonctionnalités dans Next.js, en découplant votre code de la source sous-jacente du provider du flag. Les flags sont toujours évalués côté serveur, ce qui évite les changements de layout, les spinners et la divulgation de choses sensibles au client. Je trouve assez cool que cela fonctionne aussi avec les pages statiques et PPR : vous pouvez précalculer autant de variantes statiques qu'il y a de permutations de flag !
📜 Netlify - Live Preview for Gatsby is back (and better) with the new Dev Server : Netlify propose une nouvelle plateforme générique primitive pour démarrer votre framework Dev Server dans le cloud. Utile pour les prévisualisations en direct de Gatsby lors de l'utilisation de plugins source de contenu compatible (CMS).
📜 Flexible network data preloading in large SPAs : Si vous n'utilisez pas de framework, vous pouvez intégrer dans le code HTML une logique de préchargement des données, afin d'accélérer le temps de démarrage de votre application en parallélisant la récupération des données et des bundles.
📜 Creating your own store : Montre ce qu'il faut faire pour créer son propre store que l'on connecte à React avec useSyncExternalStore.
📜 Exploring a useState-like API with Zustand: A Fun Experiment : Montre comment on peut construire au-dessus de Zustand pour que les sélecteurs renvoient un tuple [state, setState].
📜 After a Decade of React, Is Frontend a Post-React World Now? : Il existe de bonnes alternatives, mais React est toujours en pleine croissance, et je pense que sa croissance s'accélère encore (🐦 tweet).
📜 Battle of the Asyncs : Compare le hook use de React avec le createAsync de Solid, et observe que la solution de React semble légèrement moins pratique (même avec les RSC).
📜 Why is Zustand a community favorite? : Feedback positif pour Zustand, un gestionnaire d'état léger et bien conçu avec support de sélecteur.
📜 Boosting performance: Faire’s transition to NextJS : Migration incrémentale d'une SPA Kotlin + React vers une solution Next.js.
📜 Complete Guide to State Management in React : Un guide complet, qui couvre également localStorage et les query parameters.
📦 Preact 10.23 - Support ref cleanup functions
📦 Fumadocs 13.0 - Better Code Blocks, Callouts,
📦 Bun 1.1.21 - Fix Remix Request/Response override issue
📦 Novel 0.5 - Notion-style AI-powered WYSIWYG editor
🎥 Jack Herrington - Vites Fatal Flaw Fixed With Vinxi
🎥 Theo - New York Times Sees 30% Perf Win By Switching To React...18?
🎥 Web Dev Simplified - Learn React Generic Components In 6 Minutes

Ne manque pas le prochain email !

If every newsletter was as informative, the world would be a better place!

Mike GrabowskiCTO and founder - Callstack

💸 Sponsor

Build a team-based task manager with Next.js

Learn to build a multi-tenant task manager that solves team isolation, user role management, and authentication challenges.

📱 React-Native

Cette section est rédigée par Benedikt.

📊 New Architecture Survey

Nous avons eu beaucoup d'informations sur la New Architecture au cours des derniers mois, notamment sur le fait qu'elle est devenue la nouvelle valeur par défaut cette année. Aujourd'hui, les équipes de React Native et d'Expo ont lancé un sondage pour en savoir plus sur votre adoption (ou sur ce qui vous empêche de l'adopter). L'enquête comporte 17 questions et ne devrait prendre que quelques minutes. Je vous propose donc d'aider nos amis de Meta et d'Expo et de partager avec eux notre expérience de New Arch. Je suis sûr qu'ils nous rendront la pareille en utilisant les commentaires pour encore plus d'améliorations !