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.
Fadi Khadra
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.
Marius-Nicolae Muntean
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.
Steven Petryk
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.
Iskander Samatov
▶ 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
Jobs
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.
Dovetale
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.
X-Team
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
Global vs. Local Styling in Next.js — Approaching the topic of structuring CSS nicely within Next-powered apps.
Alexander Dubovoy
Testing React Native Navigation — How to check that the navigational UI within a React Native powered app works via Expo.
Gleb Bahmutov
Build a React Chat Application
Stream sponsor
How to Build a Portfolio Site with Next.js and Tailwind CSS
Manu Arora
Three Buggy React Code Examples and How to Fix Them
Hugh Haworth
React Readability Analysis of Inline Conditional Rendering
Chak Shun Yu
🛠 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.
Modulz
React Page Scroller: Smooth Full-Page Scrolling Using CSS Animations — Try out two types of demos here.
Vik Liegostaiev
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.
Mo Gorhom
beautiful-react-hooks 1.0 — Before writing your own custom hook, see if what you need is part of this library. Includes an illustrative demo for each.
Antonio Rù
Virtuoso: Virtualized List Component — Display large lists (greater than 100,000 items, for example) without sacrificing performance or usability.
Petyo Ivanov
⚡️ 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-pdf-highlighter — Mark up PDFs with a highlighter as illustrated in the demo.
react-performance-testing — Automatically counts renders and keeps track of render time, which is useful when optimizing application performance.