React Native’s platform ambitions

#​254 — September 1, 2021

Read on the Web

React Status
⚛️ Your weekly React news digest, every Wednesday

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.

Leave a Reply

Your email address will not be published. Required fields are marked *