React Native’s platform ambitions
#254 — September 1, 2021
React Toastify 8.0: Big Changes for a Mature Notifications Library — At five years old, this is a mature library for those popup ‘toast’ style notifications you sometimes get in apps, and version eight boasts an all new look, improved APIs, and you can even show state changes in the notifications based on promise resolution or failure. Play around with it here.
React Native’s ‘Many Platform’ Vision — Facebook has ambitions for React Native beyond the mobile platforms at which it is currently targeted. But did you know that includes the desktop: for example, video calling in Facebook Messenger on Windows and macOS is powered by React Native.
Timothy Yung (Facebook)
Learn to use TypeScript with React — Join Steve Kinney in this extensive video course and learn how you can ship your React apps with more confidence and fewer bugs — by using TypeScript.
Frontend Masters sponsor
Build the Game of Life with React — The late John Conway’s deceptively simple Game of Life is sometimes used as a coding challenge for potential hires. If it comes up in your next React interview, here’s one way to approach it.
Mafs: Components for Math Visualization — While in theory it’s still in pre-release, this library seems to be a complete and well thought out set of sophisticated mathematics visualizations. It is supported with a nicely executed just-what-you-need-to-know set of guides including one which will allow you to plan your own suborbital spaceflight.
React Polymorphic Components with TypeScript — The inherent flexibility of polymorphic components is both an asset and a potential liability. However, you can use the strong typing capabilities of TypeScript to address some of the downsides of their use.
▶ Redux Toolkit with Mark Erikson — With apologies to Mark Twain, the rumours of Redux’s demise have been greatly exaggerated. The current lead maintainer of the codebase explains why and touches on a variety of other Redux-related topics including the somewhat misunderstood role of Redux Toolkit.
FSJam Podcast podcast
Frontend Engineer (React, New York) — Dovetale helps Shopify merchants like KontrolFreek and Italic grow their creator community. Built in NYC and backed by Uber founders.
React Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.
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.
Global vs. Local Styling in Next.js — Approaching the topic of structuring CSS nicely within Next-powered apps.
Testing React Native Navigation — How to check that the navigational UI within a React Native powered app works via Expo.
Three Buggy React Code Examples and How to Fix Them
🛠 Code and Tools
Stitches 1.0: The Modern Styling Library — Annother CSS-in-JS solution, this one offering high performance, SSR, theming, critical path CSS, an intuitive API, and lots more.
React Page Scroller: Smooth Full-Page Scrolling Using CSS Animations — Try out two types of demos here.
React Native Bottom Sheet — Make the most of mobile screen real estate by putting secondary content on a sheet which pops up from the bottom of the screen. The fourth major release of this component is just out.
Virtuoso: Virtualized List Component — Display large lists (greater than 100,000 items, for example) without sacrificing performance or usability.
⚡️ Quick Bits:
Zipline — Fast, lightweight and configurable file uploading.
React Carousel Minimal — All of what you need—in a carousel component, at least—and nothing you don’t.
react-navigation-header-buttons — Render buttons in the navigation bar which mimic the real thing.
react-performance-testing — Automatically counts renders and keeps track of render time, which is useful when optimizing application performance.