#197 — July 15, 2020

Read on the Web

React Status
Your weekly React news digest, every Wednesday

React Native 0.63 Released — The latest version of React Native ships with LogBox, a totally new way to monitor errors and warnings raised in development.

Mike Grabowski

Khan Academy's Transition to React Native — The Mobile Engineering Lead for Khan Academy runs through the multi-year project to move both the iOS and Android apps of their education platform over to React Native. It’s a great story.

Bryan Clark

Learn State Machines from the Creator of XState, David Khourshid — By modeling the state in your application with state machines and statecharts, you will spend less time debugging edge cases and more time modeling complex application logic in a visually clear and robust way.

Frontend Masters sponsor

Building SVG Components in React — When building responsive web apps it makes nothing but sense to use SVG as opposed to more traditional image formats. SVG stores an XML-based description of the image which can be progammatically manipulated similar to HTML. It’s tailor made to be incorporated into components.

Maciek Sakrejda

How to Use useDrag — At one time it was revolutionary, but drag-n-drop on touch screen devices is something your app’s users now expect. They’ll be more surprised if it’s not there than if it is. To avoid disappointing them, here’s how to implement it using a series of familiar examples.

Mikael Ainalem

▶  The Syntax Podcast's React Wish List — Everybody has their wish list for React and so do the affable Syntax podcast hosts. A nice touch is their timecoded show notes so if you really can’t afford the time to listen to the whole episode, you can start at the wish of particular interest to you. Is your favorite wish on their list?

Wes Bos and Scott Tolinski

💻 Jobs

React Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find a Job Through Vettery — Use Vettery to connect with growing tech teams at startups and Fortune 500 companies.

Vettery

ℹ️ Interested in running a job listing in React Status? There's more info here.

📘 Tutorials and Stories

How to Build a Chatbot with React — While you may either love them or hate them, chatbots are everywhere these days, so it’s really just a matter of time before you have to incorporate one into a project. This is a React-based approach to the task.

Fredrik Strand Oseberg

How To Create a Custom React Hook to Fetch and Cache Data — Custom React Hooks are gaining a lot of popularity and this tutorial delivers their advantages to the ubiquitous data-fetch-and-cache pattern. We also like that the Hacker News Search API is used as the illustrative example which is handy to know in its own right.

Ademola Adegbuyi

Three Mistakes Junior Developers Make with a React Component’s State — If component state is still occupying a lot of your mindshare, you may benefit from a senior developer imparting their experience of React component state in three, easy to digest recommendations to address common state management mistakes.

Tyler Hawkins

The React Hooks Guide: In-Depth Tutorial with Examples. Start Learning — Learn all about React Hooks as we comprehensively cover: State and Effects, Context, Reducers, and Custom React Hooks.

Progress KendoReact sponsor

Understanding Plugin Development in Gatsby — There’s a good chance you’ve heard of Gatsby, the React-based site generator. But as with all such platforms it has a range of capabilities which may not address all your requirements. If that’s the case, you’ll want to extend it with a plug-in.

Aleem Isiaka

From React to React Native — If you’re ready to take the leap into mobile app development and already have a strong React portfolio to your credit, this tutorial walks through adapting your React skills to React Native. It’s not quite as straightforward as you might think.

Steffy Lo

Fetch Images with a React Hook — You might think everything about fetching images has already been covered ad nauseum. What about a hook to retrieve images? It provides some tangible benefits well worth the additional implementation effort.

Eyk Rehbein

Simple Serverless Auth with Magic.link and Next.js — A demonstration of bringing together a serverless Next.js-powered React app with authentication via an email link login.

Eric Adamski

React Router vs Reach Router — The Reach Router (notice the h!) was written by one of the original developers of React Router. While appreciating the differences between the two may be appreciate, it is worth noting that as of React Router v6, the two have essentially merged.

Nathan Sebhastian

🔧 Code and Tools

Industrial UI: Components for 'Shop Floor' Applications — Here’s a UI by a German tech firm specializing in applications for modern factories, delivered on industrial-stength tablet devices. If you think that’s a fairly narrow target audience for their library, you might be surprised. Take for example their BatteryIcon component.

Actyx

Seven Awesome React Hooks — If you’re either just getting started with React Hooks or already use them every day, you are likely to find something you didn’t know in this series of short, focused examples of Hooks the author has found helpful.

Juan Cruz Martinez

Headless WordPress with Gatsby Cloud — Gatsby is an increasingly popular React-based site building framework and this new plugin brings it to WordPress. The idea is you can use WordPress as a headless CMS with Gatsby taking care of the front-end.

Hashim Warren (Gatsby)

No More Rework, Bug Free Code on the First Commit. DeepCode

DeepCode.AI Powered Analysis sponsor

Webiny: The Easiest Way to Adopt Serverless? — Serverless: it’s one of those buzzwords we hear everyday. We may already understand the potential benefits. But if you’re not already there, where to start? This may be the place. The asserted capabilities of “zero infrastructure management; open source; self-hosted; infinite scale” certainly sound promising.

Webiny

A New, Experimental Frontend for React Inspired by SwiftUI — Periodically we like to feature ‘React-like’ projects even if they are experimental in nature. This one is inspired by Swift and is based by two questions:

  1. what if execution-order-based code was used for everything?
  2. what if JSX never existed?

Tyler Deitz

Cloudinary React Library: Simplifying The Image Pipeline Workflow — At some point have you may have wished your image pipeline workflow was a little less labor intensive? Haven’t we all, given that each application seems to have its own unique requirements. (Trivia: We use Cloudinary to serve up the images for our newsletters!)

Cloudinary