CSS Variables for React Devs — An updated piece, and a solid look at how to use CSS variables (custom properties) in your next project.

Josh W Comeau

Compound Components In React — Compound components are the building blocks of design systems. If you have the development of the latter in your future, the tutorial will get you up and running on this advanced React pattern.

Ichoku Chinonso

ButterCMS - #1 Rated Headless CMS. Melts into React Apps — 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

Running React Native Everywhere — The first part of an in-depth, multi-part guide on running a common React Native code base not only on the iOS and Android mobile platforms—as one might expect—but also on macOS, Windows and as a web app, as a browser extension, as well as within Electron.

Matteo Mazzarolo

React 18 Watch: New startTransition API Keeps Apps Responsive During Large Screen Updates — Up until the imminent React 18, all updates were considered ‘urgent’. startTransition enables the prioritization of updates so truly urgent ones get handled right away and everything else gets dealt with at a lower priority.

Chetan Gawai

Relay v12 — The latest release of Facebook’s mature GraphQL client is out. In addition to run-time optimization, the new release includes improvements to React integration as well as logger, type-safety, and documentation updates. However, it also includes some breaking changes: in particular Abstract Type Refinement has changed and there are also changes to live query behaviour.

Facebook

Graceful Error Handling Using Error Boundaries in React — A runtime error in React can result in a blank screen and a bewildered user. Error Boundaries enable the error to be caught and a more meaningful, fallback UI displayed instead.

Amit Merchant

Migrating from Create React App — A guide on how to transition from an existing non-ejected Create React App project to Next.js – an option that will open up a lot more possibilities such as API routes, incremental static regeneration, and better data fetching options.

Vercel

Implementing Material Design’s Floating Labels — "It's a fun little exercise and it's not actually too difficult," Max reassures us. Or you can just straight to the CodeSandbox.

Max Schmitt

Beyond onClick: Handling Events in React

Lightstep sponsor

react-date-range 1.4.0: Component for Selecting Dates and Date Ranges — An intuitive component for picking date ranges as shown in their demo.

Hypeserver

mdb-react-ui-kit — It's the popular Material Design design system, but for Bootstrap 5 and React 17. It comes in both a free and fee-based Pro version. There's plenty of demos here and a decent tutorial to check out too.

MDBootstrap

react-p5-wrapper — Enables p5.js sketches to be incorporated into your React app.

James Robb

testing-react — Recycle your Storybook stories into React tests.

Storybook

plyr-react — An accessible and customizable player component for both video and audio as well as YouTube and Vimeo-hosted content.

Chintan Prajapati