Creating a Design System Using React and Bit — Design systems provide a neat way to build up sets of components and documentation in your projects with a consistent look and feel. This tutorial goes through the process of creating your own such system.

Jonathan Saring

How to Create Editable DataGrids in a React Redux Application — The decades-old concept of the spreadsheet has created a pervasive notion that every grid of data should be editable. It looks like a spreadsheet, shouldn’t it work like one? Here's how to use Redux to help live up to that sometimes unrealistic expectation.

Alex Ivanenko

Let’s Build a Financial Dashboard App With React — To build a financial app, you often need to solve the challenge of displaying a ton of data in a meaningful way that is also user-friendly. Check out this article to see how to approach building a simple financial dashboard from scratch.

Progress KendoReact sponsor

Stop Mocking fetch — Why you shouldn’t mock fetch or your API clients in your tests and what to consider instead.

Kent C Dodds

React Hook Form vs Formik: A Comprehensive Comparison — Working with forms presents a unique set of challenges which are addressed with these two popular libraries. This article works through a rigorous comparison richly populated with examples which will help you choose the right one for you.

Nathan Sebhastian

How to Create PDF Reports in React — The PDF document is now the lingua franca for the exchange of ‘paper’ in the modern organization. This tutorial succinctly but effectively walks through the process of adding PDF capability to your app using React.

Adebola Adeniran

Senior Software Engineer — Save Lives & Make an Impact — We use Node/TS/React & ML to provide crisis support via SMS. Help us scale globally with a focus on privacy and security.

Crisis Text Line

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

Vettery

Don't Know What to Test? Learn How To Make A Test List — Following up his How to Get Started Testing React Applications article which appeared in React Status #187, the author now discusses creating a robust suite of tests. This starts with knowing what, precisely, needs to be tested. This article introduces some needed rigor into creating a list of tests required before you invest time and energy creating them.

João Forja

Building a Facial Recognition Webapp with React — Facial recognition is much in the news at the moment for mostly well-deserved negative reasons. However, this tutorial is aimed more at finding faces anonymously for the purposes of automating the image cropping and composition process. It simply has the potential to take the busywork out of creating better photos.

Adeneye David Abiodun

Creating a Simple Point of Sale App with React, Node and MongoDB: A Seven Part Tutorial — A comprehensive series on building a point-of-sale system with this trio of products. Each standalone article addresses an important aspect of the project, with each part building on the lessons learned earlier in the series. Not only will you come away with a solid working knowledge of these popular tools, but have a pretty decent POS system to boot.

Krissanawat Kaewsanmuang

Bitmovin Live: Outlook on the Future Codec Landscape: EVC, LCEVC, VVC

Bitmovin Inc. sponsor

Tips for Using The useEffect Hook Effectively — The useEffect hook runs after the page is rendered and then every time the DOM updates thereafter. Here’s an explanation of how it works including firing sequence, the dependency array, how to handle dependencies, and how to use it to write cleaner code.

Nivedha Duraisamy

Higher-Order Components In React — Higher order functions are simply functions which take other functions as their arguments and/or return functions as results. ‘Higher order components’ bring a similar concept to React and here we see the basic structure, some specific situations where they can be used and an example to illustrate it all.

Shedrack Akintayo

react-markdown-editor-lite: Is It The Right One for Your Project? — There are a number of Markdown editing components out there, but we like this one given that it’s simple, has compelling functionality and ‘lite’ weight. You can see for yourself by taking it for a test drive on the real-time, WYSIWYG demo.

Harry Chen

React Helmet: The Only Helmet You'll Need for Your (Document's) Head — As their tagline says: “Together, We Make Football. And Software.” Yes, it’s that NFL, as in the National Football League. It turns out they have a decent in-house team of software engineers supporting a variety of open source projects and tech blogs. React Helmet is their React component to manage the document head.

National Football League Engineers

Search UI: Elasticsearch's Library for Building Search Features — Flexible and intuitive search is the cornerstone of almost every application and Elasticsearch is a popular choice for implementing it. Their search-ui library enables the rapid development and delivery of a modern, compelling search experience for your app.

Elastic

Building Chat With React? Stream Chat Has You Covered — Building Chat With React? Stream Chat Has You Covered.

Stream sponsor

ant-design-mobile-rn: The Ant DesignUI Component Library Based on React Native — This is the configurable mobile UI within the Ant Design design system for enterprise apps. It has over forty components while retaining a small footprint and being easy to customize.

Ant Design

aragonUI: Building Decentralized Apps Based on the Aragon Design System — Aragon is an ecosystem of software and services which enables and supports the operations of Distributed Autonomous Organizations. DAO’s are an innovative concept which has the potential to resonate with the times in which we find ourselves: organizations suddenly being challenged to re-invent themselves and seek new ways of operating. Aragon UI is a comprehensive suite of React components for building decentralized apps based on the Aragon Design System.

Aragon Project