#198 — July 22, 2020

Read on the Web

React Status
Your weekly React news digest, every Wednesday

Adobe Introduces React Spectrum — When a household name like Adobe launches a new, well-resourced open source project for the React ecosystem, it's newsworthy. Enter React Spectrum, the React-specific implementation of Adobe's Spectrum design system which has been around since 2018. While primarily intended to help extend the Adobe product ecosystem, it seems to be doing a lot of things right.

Adobe

The Official Redux Essentials Tutorial.. Redux — On the face of it, this is simply a new release of the documentation, but it’s actually a project which has been in the works for months with the ambitious goal of making Redux more accessible to beginners by taking a different approach to how they teach the popular state management system: basically, use the patterns now and learn how they work later.

Redux Team

Join TJ VanToll for React Wednesdays On Twitch/CodeItLive — Live Chats, Coding, and Fun: React Wednesdays is a weekly chat show with the best and brightest from the React world, hosted by TJ from the KendoReact team. New episodes go live every Wed @ 1:00 PM ET. Join us and ask your questions in real time.

Progress KendoReact sponsor

Methods of Improving And Optimizing Performance in React Apps — Performance optimization is like sailing (and a lot of other things) — it takes a day to learn to do and a lifetime to learn to do it well. But with all the options available where to begin exactly? This provides prescriptive recommendations to get you started in the right direction.

Shedrack Akintayo

Apollo Client 3.0: Full Featured Caching GraphQL Client — Apollo Client is commonly associated with React but it can also be used with Angular or on its own. GitHub repo.

Ben Newman (Apollo)

Unit Testing React - What You Need to Know — A subject which often seems to get shortchanged is testing of React apps and in particular unit testing. This extensive article reflects the author’s two year journey from having no prior experience in the subject and then follows the arc of his learning curve to present. He provides insight to others about to embark on the same journey as well as links to the external references he found helpful along the way.

Felix Gerschau

Microsoft Announces React Power BI — For anyone who wants to integrate between Power BI (Microsoft's business analytics visualization service) and React apps.

Amit Shuster (Microsoft)

💻 Jobs

One Application, Hundreds of Hiring Managers — Use Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

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

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

📘 Tutorials and Stories

A Full Stack Guide to GraphQL: React Client — The final installment in this series which covers creating a full-stack project with GraphQL at its core. In this post, the React front-end is built to consume the back-end services developed in previous instalments (Links to the first three parts are provided right at the top so you can catch up if need be).

Codemancers

Using 'Sign In with Apple' with React Native — With iOS 13, Apple began its attempt to snag some of the market share stickiness currently held by Google, Facebook, Twitter and others for being the service your app uses to identify its users. Not sure we needed it but Apple is too big to ignore in this space so here’s how to implement it.

Ross Bulat

Have Your Voice Heard. Shape the Future of Video with This Survey — What are the top video streaming challenges & goals your org faces? DRM? Low Latency? CDNs? Fill out this 10min survey.

Bitmovin Inc. sponsor

Letters From the Dark World of React Boilerplate — This is a relatively new project but we’re intrigued with the author’s assertion there’s room for something other than the incumbent ‘zero’ configuration, straight boilerplate and design-to-code tools. This new, fourth approach is ReacType. Not convinced? There’s a gif demo for the severely time-constrained.

Open Source Labs

▶  How to Build a Quiz App Using React and TypeScript — An in-depth tutorial which takes a common application objective that the instructor then uses to anchor the concepts covered in their presentation. If you have a quiz requirement in your current project, even better, because it’s what you’ll wind up with at the end of this fast-paced tutorial.

Thomas Weibenfalk

How to Use Debounce and Throttle and Abstract Them into Hooks

Divyanshu Maithani

🔧 Code and Tools

MUI-Datatables: Datatables for Material-UI — Here’s a datatable component built with the popular Material-UI design system. It’s fully featured including filtering, resizable/draggable/hideable columns, exports, printing and just about everything else you’ll need for the datatable in your app. The gif demo illustrates its capabilities.

GregN

13 React Date-Pickers and Time-Pickers — We genuinely believed there was nothing new under the sun with respect to date and time pickers. Turns out we were wrong. The one you want has to be in here somewhere. Each example comes with a helpful description.

Jonathan Saring

Scene.js: A Timeline-Based Animation Library — A step up from the more basic frame-based animation, this library delivers timeline-based animation which brings it more in line with the paradigm used in full video editing tools. The extensive series of examples are impressive and there’s a good introductory article to get you started.

Daybrush (Younkue Choi)

Building Chat With React? Stream Chat Has You Covered

Stream sponsor

Relay 10.0 Released: A Framework for Building Data-Driven React Apps — A way to avoid using imperative APIs for fetching data in React apps. Instead, you define your data requirements using GraphQL and Relay does the rest. 10.0.0 changelog.

Facebook

Kutt: A Modern URL Shortener with Support for Custom Domains — URL shortening is a concept which has been around for a while yet remains a cornerstone of many web analytics systems. This new version includes support for custom domains, but also provides some basic stats and other useful features like QR code generation. By rights, it's all you really need.

The Devs