This Week In React #112: JSX Expressions, Storybook, Remix, Actionless reducers, Atomic Forms, NPM trends, Expo, RN Keyboard, Bun...

Hi everyone!

Looks like a lot of devs are already on vacation 😎. On my side I will also skip some editions this summer to rest.

This week, we have a good variety of React and React-Native content. A lot of very positive feedback from the community on Bun!

On my side, Docusaurus 2.0 should be released soon, after 4 years of alpha/beta. I hope you will help me to make the launch a success! I'm thinking of sending you a different email for the occasion, to better present this tool I'm working on for Facebook.

🙏 Support the newsletter:

😘 Recommend it to your friends: it really helps!
💸 Sponsor This Week In React
😍 Write testimonials on Twitter
🧵 Retweet the latest Twitter thread
📨 Reply to this email: feedback is welcome
👥 Follow on LinkedIn

If you like this newsletter, subscribe in priority there:

🇬🇧 ThisWeekInReact.com
🇫🇷 ReactHebdo.fr

React

Statements Vs. Expressions

Josh Comeau is preparing his next course on React. He proposes to go back to the basics of JavaScript, and thus allow a better understanding of how JSX works, which only works with expressions. On the same topic, I would love to see the do-expressions proposal progress 😇.

How to build connected components in Storybook

An official Storybook article that explains well all you can do with decorators: add a layout, global providers, mock a Redux store or requests... It can help to add "connected" components to your Storybook that otherwise can't be rendered due to context dependencies.

How I Estimate NPM Package Market Share (and how Redux usage compares to other libraries)

Mark Erikson (Redux) explains how he analyzes npm package usage trends, based on various more or less reliable tools. Download stats are often related to CI builds. He uses React state managers as an example. He now estimates Redux / React usage at 33% (previously 45-50%)

Actionless and Stateless Reducers in React

useReducer() is not reserved for complex cases: it can also be used for very simple state machines, like changing a boolean from false to true.

Extras:

📜 Next.js: open external links in a New Tab: it can be interesting to create your own Link abstraction on top of the underlying framework to add extra behavior
📜 The Unlocked Possibilities of the :has() Selector: CSS feature. Interesting comparison with React rendering at the end.
📜 Atomic Forms in React: presents a bit Jotai-Form and the difference with more traditional approaches like Formik.
📜 Create a simple cookie with Remix: shows that the use of cookie in Remix is relatively simple, and close to the HTTP protocol
📜 Yelp - Migrating from Styleguidist to Storybook
📜 Fresh: The Next-Gen JavaScript Web Framework
📜 Rendering long lists using virtualization with React
📜 Component Code Coverage in Cypress v10
🧑‍🎨 Remix + Bun demo
🧑‍🎨 React-on-the-edge: Vercel demo that shows how to use React SSR (without Next.js) with the Edge Runtime. With or without streaming.
🐦 Remix loader type inference: PR merged to facilitate typesafe usage of the useLoaderData() hook 👌
🐦 Bun + React SSR: significant performance gains
📦 RemixBlocks: I find the idea interesting: nested routes Remix are full-stack which makes them a good candidate for copy/paste, quite similar to Tailwind.
📦 react-obsidian: dependency injection for React
📦 remix-bossa-nova-stack
📦 Preact 10.9
📦 Next.js 12.2.1
📣 Vercel: Hydrogen can now be deployed with 0 config

💸 Sponsors

💡 How to sponsor this newsletter

Storetasker: Freelance Shopify Devs network

Hey! This is Tim from Storetasker. We run the best Shopify dev freelance network. I would love for you to apply if you enjoy building Shopify sites or are excited about leveraging Shopify's cutting-edge React framework for building custom storefronts: Hydrogen.

Accepted devs on the network work on a freelance basis, and we present them with great opportunities to work on some of the best Shopify brands (Alo Yoga, Chubbies, JUDY & many many more).

The great thing about Storetasker is that devs aren't in competition with each other - they just pick up the jobs that match their interests. Beyond that - it's a very tight-knit community.

Feel free to apply directly via this link to join.

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.

React-Native

📜 Expo: sunsetting the CLI Web UI: the CLI web UI will disappear. Not a big deal, it was limited anyway compared to the CLI features.
🧑‍🎨 useAnimatedSentor travel cards parallax: demo with a very nice visual result 😎
📦 react-native-keyboard-controller 1.0: synchronizes keyboard visibility with animated values 👌
📦 vision-camera-plugin-builder: reduces the boilerplate for the creation of a vision camera plugin.
📦 React-Native MacOS 0.68
🎥 It's After Effects, but in Remotion: William Candillon shows how React-Native-Skia runs on the web with Remotion. You can follow and apply the After Effect tutorials, not written for us at first.
📊 FlatList vs FlashList profiling
🐦 Reanimated now supports V8
🐦 Expo EAS + App Store Connect v2
🐦 BottomSheet + FlashList integration

Other

CleanShot 2022-07-13 at 10 40 41@2x

This Week In React #112: JSX Expressions, Storybook, Remix, Actionless reducers, Atomic Forms, NPM trends, Expo, RN Keyboard, Bun...

Comments