This Week In React

Share this post

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

substack.thisweekinreact.com

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

Sébastien Lorber
Apr 12, 2022
Share this post

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

substack.thisweekinreact.com

React

Astro Server-Side Rendering

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.

React-admin V4: Build Your Own Framework

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.

An Overlooked Factor For Performance Optimization In React

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.

Writing Redux Reducers in Rust

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.

How to Create and Export Web Components From a React Application

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).

React components composition: how to get it right

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:

  • 🧵 React 18 + TypeScript: typings released with necessary breaking changes. In particular the TypeScript type for  React.FC does not include children anymore . Also check Removal Of Implicit Children, and this codemod to migrate.

  • 📜 Test component interactions with Storybook: complete guide to create and execute interaction tests in Storybook stories thanks to the play() function.

  • 📜 How to easily reduce your NextJS bundle size by 30%? feedback, quantified impact of 4 actions relatively easy to implement. Using dynamic imports provides the best ROI.

  • 📜 React 18 Quick Guide & Core Concepts Explained: good React 18 major changes summary.

  • 📜 Redwood Startup Fund: follow-up of last week's Redwood 1.0 Launch Week. $1M fund by Tom Preston-Werner for startups using React RedwoodJS framework (small "existential" $25k–$50k tickets)

  • 📜 Bad Habits of Mid-Level React Developers

  • 📜 Improving Web Performance with React Hydration Strategies

  • 💡 Gatsby RFC: New Bundler in Gatsby: may incrementally adopt esbuild according to current benchmarks?

  • 💡 Gatsby RFC: Script component: similar component to the Next.js one, with a possible Partytown integration?

  • 💡 Redux deprecate createStore?

  • 💡 Remix deferred API?

  • 🐦 React + TypeScript: no need to import React event handler types

  • 🐦 React 18 + React.lazy() + Suspense + SSR: only works with new APIs SSR, not renderToString.

  • 🎥 RedwoodJS Intro by Tom Preston Werner

  • 🎥 React Jargon Explained: What is Concurrent React?

  • 📦 React-Native-Storybook-Starter: with mobile + React-Native-Web support

  • 📦 Capacitor-Remix-Templates

  • 📦 Remix + Crystallize eCommerce Starter

  • 🎙️ StackOverflow #430: The new version of React...

💸 Sponsors

Build Internal Apps Remarkably Fast with Retool

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: JavaScript Conference In Brussels & Online

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 XState, Components 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

  • 🐦 Expo: Evan Bacon automating Android app deployment: want to go further than Fastlane and allow deploying a new app without any manual step on the Play Store UI (first submission).

  • 🐦 React-Native-{Bootsplash,Localize,Permissions}: looking for sponsors to support Fabric

  • 📦 React-Native-Bignumber: performant Fabric/JSI big number lib

  • 📦 React-Native-Purchase: claims to work with all Expo workflows

  • 🎙️ React Native Radio 231 - Using Flipper's Flamegraph Tool

💸 Jobs

💡 Sponsor the newsletter to publish a job offer

Showtime - Remote - Top 1% (based on location)

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

Announcing TypeScript 4.7 Beta

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:

  • Announcing Rome Formatter: broken link in last edition 😅 Rome offers a code formatter written in Rust. Mostly compatible with Prettier, but 9-12x faster, and able to format invalid code!

  • Node v12.22.12: last v12 LTS

  • JavaScript Testing Best Practices: updated and translated

  • Prevent the introduction of known vulnerabilities into your code: new action GitHub to review PR dependency changes and prevent supply-chain attacks. Seems easy to setup.

  • New to the web platform in March: good overview

  • Devs For Ukraine: conf 25-26 April

  • TypeScript / How the compiler compiles

  • TypeScript type-level parser

  • Make the TypeScript interface partially optional/required

  • Principles of Object-oriented Programming in TypeScript

  • TypeScript things I wish I knew earlier

  • ECMAScript proposal “Change Array by copy”: four new non-destructive Array methods

  • Safari Technology Preview 143

  • Safari 15.5 Beta Release Notes

  • The "inert" attribute is finally coming to the web

  • CSS :has( ) A Parent Selector Now

  • ShadowRealms – an ECMAScript proposal for a better eval()

  • What's new in ECMAScript 2022

  • AST Explorer SWC support

  • How Tailwind CSS came to be feat

  • Nx 13.10 + Nx 15 Roadmap

  • Turborepo 1.2

  • Parcel CSS 1.8

  • ESLint v8.13

  • StackBlitz $7.9M Seed Round

  • Prisma Adds Support for MongoDB

  • 4 ways we use GitHub Actions to build GitHub

  • The Next Google

  • With 3 months left before IE retirement, new enhancements arrive in Microsoft Edge for IE mode

Twitter avatar for @5eniorDeveloper
El Programador Senior @5eniorDeveloper
class="button" https://t.co/iG09q8hYqM
Image
8:49 PM ∙ Jan 18, 2023
Share this post

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

substack.thisweekinreact.com
Previous
Next
Comments
TopNewCommunity

No posts

Ready for more?

© 2023 Sébastien Lorber
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing