View profile

This Week In React #101: Astro, Redwood, Next.js, Remix, React-Admin, Rust reducers, WebComponents, Gatsby, TypeScript, Rome...

This Week In React #101: Astro, Redwood, Next.js, Remix, React-Admin, Rust reducers, WebComponents, Gatsby, TypeScript, Rome...
By Sébastien Lorber • Issue #101 • View online
Hi everyone!
A nice diversity of React articles this week! I liked those with Rust/WASM and Web-Components.
Last week was Launch Week for Astro and Redwood, there were some exciting announcements.
It’s calm on the React-Native side.
TypeScript 4.7 is available in beta, another great release with ESM support in particular!
We have more than 4000 subscribers here! Thanks for reading me every week ;)
Note: I’m still figuring out how to make this newsletter sustainable. If your company could sponsor the newsletter (product, job, conf ad) please let me know or put me in touch. I build this newsletter transparently in public, sharing my current income and after 2 years it covers like 50% of my hourly rate. Not too bad, but a little help will be appreciated 😉 I’m still not very good at selling ads on the English newsletter 😅 it seems to require more cold-outreach.
🙏 Support the newsletter:

React
Astro is a modern meta-framework capable of using any UI lib (including React). It now supports server-side rendering, available experimentally in v1.0 beta. Like Remix, the framework offers a layer of adapters for deployment to multiple targets.
François takes as an example a simple admin interface in React, based on MUI and React-Hook-Form. The code is initially quite verbose, 90 lines. He gradually refactors this code by creating reusable abstractions, to end up with a declarative and expressive code of 20 lines.
He explains that these abstractions are actually the v4 of React-Admin (v4.0.0-RC.1 available). This new version is based on a more modern stack and is more modular: it exposes high-level components (based on MUI by default, can be swapped) but also low-level primitives to create your own framework. See also the full series of v4 articles.
Interesting reflection on the need (or not) to memoize the value of a React context according to the position of the provider in the tree. Personally, I still prefer to always memoize for safety, as you never know if the provider will not be moved somewhere else.
Feedback on the integration of existing Rust business code into a React app through WebAssembly and the challenges encountered: non-ideal binding, serialization WASM bridge cost… They need to access the same state on both sides (Rust and TypeScript). Solution: create the reducers in Rust, and return a state diff to TypeScript.
Shows how to use React to create a Web Component. It looks relatively simple, and can be useful in some specific contexts 🤔. Not to be confused with the use of Web Components from React (will be officially supported later).
Gives some hints on when/how to split into smaller subcomponents. Also evokes an important Clean Code principle (without naming it): Single Level of Abstraction.
Extras:
💸 Sponsors
Retool is a new approach to building internal apps: we’ve unified the ease of visual programming with the power and flexibility of real code. Drag and drop a form together, and have it POST back to your API in minutes. Deploy instantly with access controls and audit logs.
BeJSconf is happening in Belgium next May 13th, hosting members of TC39 and core team members of the trendiest JS libraries and frameworks, who’ve got you awesome talks and hands-on practices to let you get deep insights into the insides of JavaScript.
Talks on XStateComponents or Multicore JS… are only a few! More importantly, non-tech topics such as leadership, DevRel, DX and such will be on the menu.
BeJSconf is also a way to celebrate and have fun; all with relishing some good Belgian fries and beer during the planned after-event party
React-Native
💸 Jobs
💡 Sponsor the newsletter to publish a job offer
Showtime is a decentralized social network ✨ You can think of it as the “Instagram for NFTs” where you can discover and support your favorite artists, create and showcase your digital art collection and soon be rewarded for the value you create. They plan to help artists reward their fans by letting them earn NFTs (instead of having to buy them).
They are using Expo with Expo Application Services. They are iterating as fast as the web3 ecosystem is moving by using React Native and Next.js together thanks to React Native for Web. They built a high-quality universal design system that works on iOS, Android and Web: Universal UI. They are planning to open-source the frontend monorepo very soon.
They just launched the beta on iOS and Android. Send a message to Axel on Twitter or an email at axeldelafosse@gmail.com to learn more.
PS: I used to work with Henry, one of the engineers at Showtime!
Partners
  • Start React Native: learn everything about gestures and animations with William Candillon
  • Adventures in Nodeland: Matteo writes about his journey as a Node.js TSC member and maintainer of 500+ modules on npm, including Fastify and Pino!
  • TypeScript Weekly: the best TypeScript links every week, right in your inbox
  • ES.next News: learn about the latest in JavaScript and cross-platform tools
  • Tailwind Weekly: all things Tailwind CSS, new issue every Saturday
  • G2i: pre-vetted remote React & React-Native developers you can trust on contract or full-time basis
  • Infinite Red: US React-Native experts making your idea a reality
  • Software Mansion: the co-creators of React Native and the technological core of many tech companies
Other
Another great TypeScript release! The long-awaited ES Modules support and package.json “exports” which allows to create several entry points for the same Node.js package. Many other improvements and new features, including “moduleSuffixes” useful for React-Native.
Extras:
Did you enjoy this issue?
Sébastien Lorber

📨 For React and React-Native developers ⚛️ I filter out the noise 🔊 You save time ⏱️ Stop losing your time scrolling on Twitter! 🐦

⚠️ The newsletter has moved!
➡️ Go to ThisWeekInReact.com

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue