React Status Issue 287: May 4, 2022

🇺🇦 #287 — May 4, 2022

Shopify Unveils React Native Skia — Skia is a popular (used in Chrome, Android, Firefox, etc.) 2D graphics library and Shopify has brought its 2D drawing capabilities into React Native for you to create your own cross-platform graphics on the fly in any RN app. GitHub repo.

Shopify

▶ The Story of Concurrent React — 2168 days of work covered in just 12 minutes! Kinda. This video aims to bring you up to speed with React’s concurrency story, how the various parts came into place, how they work, and what the benefits are.

Tyler McGinnis

Updated: Complete React Learning Path — Frontend Masters flagship React courses have been released! Take all our React courses in order, from the new Complete Intro to React v7 and Intermediate React v4 courses, to TypeScript and beyond!

Frontend Masters sponsor

Why I Don’t Miss React — This isn’t a call to drop React or a declaration of it being ‘dead’ or that all web frameworks are useless. But the author did go from using React every day to not using it at all, and it was a more pleasant journey than he was expecting.

Jack Franklin

Quick bits:

Next.js user? Expect a big upgrade to routing very soon.
React Native 0.69.0 is on the way – it'll be the first RN release to ship with React 18 and open up all the concurrent features (for 'new architecture' users only).

Jobs

Senior Software Engineers at Turo (SF | Remote/Hybrid Options) — The world's largest car sharing marketplace on a mission to put the world’s 1.5B cars to better use. We're hiring BE, FE, ML, iOS, Android & DevOps roles at all levels.
Turo

Fullstack Engineer (Remote, EU Timezones) — We’ve built a product thousands of people love (see Trustpilot if you don’t believe us). We need your help with Node & TypeScript.
Feather

Calling all Empathetic + People-Focused Sr. JavaScript Engineers — We're looking for Node + React developers who want to design architecture, lead teams, and ship features directly to customers.
Moz Group

Find React Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.
Hired

How to Build Your Own Blog with Next.js and MDX — A step-by-step guide to building a basic blog that renders posts written in MDX, which mixes Markdown with React components.

Caleb Olojo

React Component Composition Explained — Avoid prop drilling, have cleaner, better structured code.. what’s not to like?

Felix Gerschau

Keep Up with the Latest in Startups, Tech, & Programming in Just 5 Min

TLDR Newsletter sponsor

▶ Leverage the Web Platform with Remix — A discussion with Remix co-founder Michael Jackson about how Remix is "an outgrowth" of the work that he and Ryan Florence did on React Router, and how Remix wants to bring balance by spanning both frontend and backend.

The devMode.fm Podcast podcast

How to Display and Animate SVG Images in React Native
Samaila Bala (OpenReplay Blog)

How to Build a Complete Next.js App with Vercel and CockroachDB
Aydrian Howard (Cockroach Labs)

🛠 Code and Tools

<ClickToComponent />: Instant Access to Component Source Code — Option+Click React components in your browser to instantly open the source in VS Code. Additionally, Option+Right-Click opens a context menu with the parent components’ props, file name, column number and line number.

Eric Clemmons

Emoji Mart 5.0: A Customizable Emoji Picker for the Web — You can test it out here.

Missive

React Toastify 9.0: Notification Boxes Made Easy — A popular library. It now supports ‘stacked toasts’, an elegant approach to visualizing growing numbers of notifications. There’s also useNotificationCenter, a new hoook for letting you build a notification center on top of React Toastify. GitHub repo.

Fadi Khadra

Plyr React 4.0: A Responsive Media Player React Component — Supports video, audio, YouTube and Vimeo. GitHub repo.

Chintan Prajapati

Loaders — A nice collection of simple loaders and spinners for your next project.

Griffin Johnston

⚡️ Quick Bits:

use-clamp-text — Fix a multi-line textbox at a given height, with an option to ‘read more’.

react-dropzone — A hook to create a HTML5-compliant drag‑n‑drop zone as shown in this demo.

react-native-figma-squircle — Figma-flavoured squircles for React Native.

react-native-reorderable-list — Reorderable lists for React Native, powered by react-native-reanimated.

img-comparison-slider — Intuitive and effective way to compare images before and after making changes.