Demystifying styled-components — If anything ever seems ‘magical’, it might be time to dig in and figure out how things work. Josh ‘pops the hood’ on the popular Styled Components component styling system and demonstrates how you’d build a simple similar such thing of your own. A great way to learn.

Josh W Comeau

Utopia: A New Browser-Based React IDE — Although only in alpha release, Utopia makes a positive first impression. The founding principle of the new browser-based IDE is that design and coding processes should be fully integrated from the outset with easy, two way navigation between the two. Take a test drive with the 'Play with Utopia' button on their landing page. There was a lot of discussion about this tool on Hacker News, too.

Utopia

[Ultimate Guide] Going from Zero to 100 Deploys a Day — How did elite software teams deploying many times a day get to where they are? In this practical guide, learn how to replicate their Continuous Delivery journey in 3 phases: one deploy a week, one deploy a day, and 100 deploys a day.

Sleuth sponsor

React 18: A Summary in 12 Tweets — If you didn’t have the time (or inclination) to read the detail we provided on React 18 in the last issue, here’s much the same content boiled down to 12 tweets by a former core React team member. While not suitable for every topic, this concise, Twitter-based presentation style has its merits.

Flarnie Marchán

React Table with Server-Side Data Management — A tutorial on using the standard React Table Library while leaving all of the attendant data management tasks—like pagination, searching, filtering and sorting—on the server.

Robin Wieruch

Arguing That 'React Ruined Web Development' — As you might expect, the title is really just a conversation starter, which is what the author intended at the recent .debug conference in Zagreb. All in good spirits and it seemed to work!

Ivan Lučin

Global State Using XState & React — In yet another approach to state management, this tutorial walks through the use of the XState finite state machine library to make states available throughout your application without labor-intensive and cumbersome prop drilling.

Brad Woods

React: Five Things That Might Surprise You — Once you get a little experience with React, you may begin to stumble on (or over?) some of its idiosyncracies. This article will give you a headstart on your discovery of them.

Sveta Slepner

[Download] Forrester New Wave: Feature Management and Experimentation — Learn how LaunchDarkly helps development teams reduce software release headaches & enable true testing in production.

LaunchDarkly sponsor

Create a Next.js Web App with Nx — A comprehensive, well-illustrated tutorial on using the Nx extensible build framework to generate a simple Next.js app.

Juri Strumpflohner

A Complete Beginner's Guide to Next.js — We try not to forget that with each issue of React Status there are always readers who are encountering the subjects we cover for the first time. Brand new to Next.js, for example, and don’t know quite where to start? This article assumes no prior knowledge (beyond React itself) and will get you to square one.

Ali Spittel beginner

Sharing React Components Across Multiple Applications — If you think cutting-and-pasting component code to ‘share’ it between applications is woefully lacking (which it is), this article evaluates alternatives and then suggests Bit as an appropriate solution.

Debbie O'Brien

A One-Click Starter Project for Next.js 11 and Netlify — A one-click starter project for Next and Netlify.

Cassidy Williams

Directionally Aware CSS Buttons with React — These are buttons which behave differently depending on which direction you use to approach them with your pointer.

Jhey Tompkins codepen

use-file-picker — A hook to invoke the browser’s file selector.

Jaaneek

Relay Library for GraphQL — Facilitates the creation of Relay-compliant servers using GraphQL.js.

GraphQL

Why Tracing Might Replace (Almost) All Logging

Lightstep sponsor

lightGallery: Image and Video Lightbox — Comes with a comprehensive feature set and some working examples on CodePen.

Sachin Neravath

Flexmonster: Powerful Pivot Table Functionality — A commercial but very capable JavaScript implementation of the ubiquitous pivot table concept. A thirty day free trial is available for evaluation purposes.

Flexmonster