Five Common Mistakes When Writing React Components — We quite often find doing something wrong the first time is more instructive that doing it right and being none the wiser. The next best thing is to closely examine how somebody else did it wrong and learning from their mistakes instead of our own.

Lorenz Weiss

How to Use the React Testing Library — Being fully confident in React components requires a test regimen which enables you to experience the app as an end user would. This richly illustrated tutorial walks you though the React Testing Library. It just might make RTL your ‘go to’ testing library.

Robin Wieruch

New Course: React Native — Leverage your JavaScript and React skills for mobile iOS and Android platforms using React Native – ship your very own native mobile applications.

Frontend Masters sponsor

A Visual Guide to React Mental Models (Part 2) — We featured Part 1 back in Issue 186 and here’s part 2 of this comprehensive three part article which encourages the use of helpful mental images for useState, useEffect and Lifecycles.

Obed Parlapiano

A Deep Dive Into Relay, the Friendly and Opinionated GraphQL Client — The Relay framework enables declarative management of GraphQL data. It has the potential to be a worthy addition to your React toolkit so long as you are prepared to got with its flow. They call it ‘opinionated’ for a reason.

Hasura

Recoil — Yet Another React State Management Library? — With the plethora of React state management libraries—like Redux and Mobx for example—is there really a need for another one? This makes a good case for Facebook’s Recoil because it behaves and has the same feel as React itself which should optimize your learning curve.

Sveta Slepner

React Developer at X-Team (Remote) — Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

Find A Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

React Native's Re-Architecture in 2020 — The React Native platform was originally introduced in 2015 with the always ambitious goal of enabling developers to have one code base running across multiple hardware platforms. Mission accomplished, mostly. However, React Native’s new architecture promises to deliver much improved and always needed performance.

Rémi Gallego

Publish and Reuse React Components to Build Gatsby Sites More Quickly — Gatsby is an open source framework that helps developers build sites that scale. This tutorial expounds in detail on component reuse across Gatsby sites. Invest just seven minutes and it will pay dividends in time and effort saved down the road.

Eden Ella

Applying the Open-Closed Principle to UI Components — Open for extension but closed for modification is the decades old trope from the domain of object-oriented programming. But being decades-old doesn’t necessarily make it an outdated concept. In fact it makes sense to take a good, old idea like this one and apply it to modern UI components. What’s old is new again.

Learn It My Way

Get Ideas for Your Next React Dashboard with This New Sample App — The new Warehouse Dashboard combines a grid, scheduler, charts & more into one sleek app. Check out the code on GitHub.

Progress KendoReact sponsor

Consuming REST APIs in React with Fetch and Axios — While there are a number of ways of going about it, this tutorial focuses on Axios and Fetch as the primary means of consuming REST APIs. It’s instructive but also may convince you that it’s a superior approach to the alternatives.

Shedrack Akintayo

React Error Handling and Reporting with Error Boundary and Sentry — The concept of an error boundary is colourfully described as putting “a fence around a component to keep any fire…from getting out”. When used in combination with Sentry can deliver a much improved end user experience through real-time error reporting. This shows you how.

Chidi Orji

React Date Picker 3.0: A Simple and Reusable Date-Picker Component — A mature option that continues to get frequent updates. Demo here.

HackerOne

Rich Markdown Editor: A React and Prosemirror Based Markdown Editor — A React and Prosemirror based markdown editor that powers Outline’s knowledge based/wiki system. Not intended to be a general purpose Markdown editor.

General Outline, Inc

Material Kit React: A Material-UI Kit to Kickstart your Material-Inspired Project — Google’s Material is getting a lot of attention and quite a bit of traction. Here’s a free Material-UI kit developed with create-react-app which will kickstart your Material development efforts and comes complete with three fully-coded illustrative examples.

Creative Tim

Save Your Sprints. Build Tools 5x Faster.

Retool sponsor

React-Slideshow: Simple Presentation of Images With a Variety of Effects — There is always another creative way of presenting images and we like this one for its simplicity and clean design. It can be used as-is or as a jumping off point for your own efforts. The demo clearly illustrates its capabilities.

Femi Oladeji

Renature: A Physics-Based Animation Library for React Inspired by the Natural World — There’s so much about this project we like: first, they start with physics (always good in any sort of animation) but then take their inspiration from nature. Biomimicry is increasingly being called upon to help us mere humans design better products and systems. It’s early days for this project we’ll be keeping an eye on it.

Formidable Labs

useReactiveForm: A Hook for Gathering and Validating Form Data Without Unnecessary Re-Renders — There’s also a blog post covering how to use it.

Michael Kutateladze

The Gooey Effect: Okay, This One is Just Plain Fun — The simplest and easiest way to describe this component is to recall those things called lava lamps — this is rather similar and it’s totally mesmerizing. Plus the documentation is pretty neat!

Luuk de Vlieger