This Week In React #109: React Labs, Linaria, React-Aria, Design System, Ladle, Sandpack, Redwood, React-Native, Moon...

Sebastien Lorber - Jun 22 '22 - - Dev Community

Hi everyone!

Another week with lots of content, including 2 official articles on the React and React-Native blogs.

The React ecosystem continues to grow, and my curation workflow is getting better too. Result: I have more and more links to share 😅

By the way, I'm curious, is being exhaustive a bug or a feature? 😄 You can answer me by email or on the Twitter poll.

The problem is also that Gmail truncates my newsletter 😬. This is partly because of my Revue provider and its long tracking links. I'm thinking of migrating to ConvertKit soon.

🙏 Support the newsletter:

If you like this newsletter, subscribe in priority there:

React

React Labs: What We've Been Working On -- June 2022

React Labs is a new series of articles: the React team wants to share more regularly its progress. Read the whole article: it contains a lot of very interesting information, in particular:

  • Server Components: async/await model, no more .server.js extension, Webpack/Vite unification...
  • React Optimizing Compiler (React Forget) rewritten, seems to progress well.
  • the Offscreen API offering new very interesting capabilities (instant transitions ❤️️)

See also Dan Abramov comments on Reddit

Airbnb's Trip to Linaria

Airbnb explains how they went from Sass to react-with-styles and then Linaria. It is a no-runtime CSS-in-JS framework with static CSS extraction. They explain their choice, migration strategy, and give a positive feedback on the tool they contribute to.

React Aria - Date and Time Pickers for All

React Aria has just announced the release of Date and Time Picker components and hooks. As you can expect, there is a real focus on accessibility, flexibility and internationalization. We can feel that there is a lot of work behind these components from the Adobe teams.

Notes on maintaining an internal React component library

Gabe works on Walrus, Digital Ocean's internal React design system. He offers a very detailed feedback on the maintenance of a React design system over time. He shares interesting lessons on the human aspect as well as on the design of props, the encapsulation of components or the management of version upgrades.

Capture Phase Event Handling in React

We often use the "bubbling" phase of DOM events, but it is sometimes useful to use the "capture" phase which is not very well known. We can use for example onClickCapture with React.

Extras:

💸 Sponsors

💡 How to sponsor this newsletter

TechTree - Introducing This Week in React Bounty Board

TechTree is building the first social-economic platform for developers - a place to help you unlock the real value of your knowledge and network!

The first major feature on TechTree is Bounties, a tool to help you earn money by referring your friends to open roles at top VC backed tech startups or find a job that might be right for you!

To help show you around, I have gone ahead and created my very own Bounty board - a selection of remote, React related roles for you to apply to or refer your network to. There has been over $300k worth of Bounties claimed on TechTree so far!

Looking to hire React developers? You can post Bounties of your own to be featured on my Bounty board! Read more and get started here.

A Global Virtual Conference for Full-Stack Developers 🌎

Meteor Impact, Meteor's most significant online conference, will be back this year and held by Jan Dvořák (aka Storyteller). Meteor Software and Pathable will support the event, amongst other sponsors.

Last year's conference was a significant success, with over 490+ attendees and 40 talks, and we're planning to make this year's event even bigger and better!

Make sure you save these dates: October 13th and 14th, 2022.

If you want to stay up to date with information regarding Meteor Impact, you can sign up here to stay updated with the latest news and updates.

React-Native

Helping migrate React Native libraries to the New Architecture

The React-Native team explains how they will help us adopt the new architecture. There will be documentation, support via the working group, but also GitHub repos with many examples of applications and migration branches. Note that React-Native 0.69 (with React 18) should be available soon: the features of Concurrent React will be available only for users on the new architecture.

@shopify/react-native-performance

Packages created by Shopify to profile the performance of your apps. First-class React-Navigation and FlatList profiling support.

⚠️ Warning: 3 popular packages now have the same name 😅

Extras:

Other

The cost of convenience

An interesting reflection on frontend abstractions and their cost... Proposes an interesting mental model to differentiate a framework from a library (IoC - Hollywood principle - "Don't call us, we'll call you"). All this illustrated with some React examples.

Moon - A build system for the JavaScript ecosystem

Seems to be a new competitor to Nx and Turborepo, this time written in Rust 😏

Extras:

CleanShot 2022-06-22 at 11 42 01@2x

Image
Show the Last Commit of a GitHub Repository in Terminal Prompt

terminal, github
Image
आधुनिक जीवन में यौन स्वास्थ्य को सुधारने के प्राचीन उपाय
Image
How Much Does a Cat Flap Cost?
Image
A Look At The Future How Will The Best Crypto Online Casinos Industry Look Like In 10 Years?
Image
15 Reasons To Not Be Ignoring Average Asbestos Settlement
Image
DSA: Heap - Key Questions and Challenges

datastructures, algorithms, career, programming
Image
How Autonomous AI Agents Transform Microsoft

autonomousai, microsoftinnovation, futureofwork
Image
Cat Flap Double Glazing
Image
10 Things You Learned In Preschool To Help You Get A Handle On Chesterfields Sofas
Image
Tan Leather Chesterfield Tips From The Most Effective In The Business
Image
What Is Spare Key For Car And Why Is Everyone Dissing It?
Image
The Most Convincing Proof That You Need Crypto Casinos For Us Players
Image
9 Things Your Parents Taught You About Car Key Repair Cost
Image
Are You Responsible For The Key Car Repair Budget? 10 Unfortunate Ways To Spend Your Money
Image
10 Fundamentals About What Causes Mesothelioma Other Than Asbestos You Didn't Learn In The Classroom
Image
Cat Flap Fitting Near Me
Image
How to Install a Cat Flap
Image
Discover Your Dream Space: Typically the Definitive Apartment Hunting Guide for Rochester, NY
Image
Rochester Revealed: Your Ultimate Apartment Hunting Playbook
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .