#197 — July 15, 2020 |
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 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:
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 |