#195 — July 1, 2020

Read on the Web

React Status
Your weekly React news digest, every Wednesday

React Hook Form 6.0: Simple, Extensible React Form Validation — Now with better TypeScript support, a smaller package size, and numerous refinements and improvements, RHF is certainly worth a look if you’re building or refactoring forms. GitHub repo.

Blue Bill

An In-Depth Beginner's Guide to Testing React Apps — A lot of posts will say ‘in-depth’ and be 500 words long – this isn’t one of those! If you’re a beginner to testing, there’s a lot to chew on here but it stays accessible throughout.

Johannes Kettmann

Ever Hear 'Can You Update Our Website Real Quick?' — ButterCMS is the #1 rated Headless CMS for React. Enable your marketing team to update website content w/ our easy to use dashboard. Fast content API for modern apps. Secure. Scalable. Less Code. Try free today for 30 days.

BUTTERCMS sponsor

Create a React Teleprompter using the Web SpeechRecognition API — Here’s an opportunity to produce a valuable addition to your online content production toolkit: a teleprompter, just like the pros use.

Elijah Manor

An Introduction To SWR: React Hooks For Remote Data Fetching — Application performance is a bi-product of doing only what is needed and only then when it is absolutely necessary. To wit, the SWR library from Vercel which uses its automatic caching and fetching capabilities to level-up your app's performance.

Ibrahima Ndaw

Next.js 101: What You Should Know — If you've noticed initial page loading with your React app and/or the SEO is not producing the results you expect, it may be that Next.js is the cure for what ails. This article introduces Next.js and provides some essential need-to-know items worthy of consideration.

Cassidy Williams

💻 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

Setting Up a CI/CD Workflow on GitHub Actions for a React App — If you thought CI/CD required a massive, end-to-end re-think of your workflow that may not be the case. Here's how to do it with just GitHub Actions and Codecov.

Dyarlen Iber

Using Babel Transforms to Inject Analytics Code in React Native AppsHeap is focused on comprehensively collecting user behaviours (such as taps and changes to text fields) so that users' interaction with the app can be clearly understood. Rather than creating their own version of React Native to support this functionality, they chose to inject analytics code at build time. Here's how.

James Taber

Let’s Build a Financial Dashboard App With React in 3 Steps — Check out this blog by TJ VanToll to learn a few techniques that make building dashboards easier.

Progress KendoReact sponsor

Creating a Server-Side Rendering React App with Deno — Francesco claims to love both React and dinosaurs, so he seem well suited to writing this (brief) tutorial on building a React and Deno powered app complete with server-side rendering.

Francesco Leonardi

Build an Animated Accordion List in React Native — We admit to having a soft spot for the accordion list: it seems intuitively the right way to organize screen-challenged mobile apps. This tutorial walks you through adding one to your React Native app.

Benjamin Piggin

How To Create a Weather App in React — We like to regularly feature tutorials which tie together those million little details into a concrete, easy-to-understand example. This time around it's a weather app which consumes the OpenWeatherMap API and provides a basic display from which you can incrementally add your own features.

Hussain Arif

How to Create a Great User Experience with React, TypeScript, and the React Testing Library — Your app's user experience shouldn't really be an afterthought once you have built the core functionality. Rather, this article makes the case and provides the techniques to design UI excellence in from the beginning and support it with a comprehensive testing regime.

TK

🔧 Code and Tools

NextAuth.js: Authentication for Next.js and Serverless — If your Next.js app is ready to go, short of comprehensive authentication, you’re in luck. NextAuth.js is a complete solution with built-in support for the popular OAuth sign-in services and support for a wide range of databases. Check out the live demo then grab the repo and get going.

NextAuth.js

Reaction: Want to Out-Shopify Shopify? — Reaction is the headless, API-centric platform which might just be the place to start. You can then spend 100% of your time making the UI both beautiful and exquisitely functional.

Reaction Commerce

Articulate: Make Your Agent More Chatty — You don't have to look far these days to find a chatbot that wants to answer your customer requests, technical questions and product enquiries. If adding one to your product is in your future, this platform helps build conversational UIs for intelligent agents.

Samtec Smart Platform Group

Building Chat with React? Stream Chat Has You Covered

Stream sponsor

GraphQL Codegen: Generate Code From Your GraphQL Schema — While this has just launched in V1.0, we're intrigued enough with the concept and the potential time-savings to warrant taking a closer look and keeping an eye on it.

Dotan Simha

react-native-pdf: PDF in the Palm of Your Hand — This robust PDF-viewer can be easily added to React Native app. Easy to follow examples are provided to make implementation a snap.

Wonday

Standard View: A 3D Graphics Library for React — Why settle for ordinary 2D graphics when you can have 3D, such as provided by this Standard Cognition library? The Standard View Storybook will help make the case.

Standard Cognition