Gatsby 3.0, simplifying React authentication, and finite state machines
This week's issue is sponsored by react-email-editor.
React Email Editor is a drag-n-drop email template builder component that makes it easy to add a solid email editor to your React apps. Designs are saved in JSON and can be exported as HTML.
Gatsby announced its first major release in over two years at last week's GatsbyConf. V3.0 includes incremental builds in OSS, fast refresh, changes and improvements to various plugins, and more.
In this article, David Walsh lays out a different approach to authentication (and access control, SSO, and more) in React applications. Rather than add a static library that you have to keep up to date or re-research each time you want to implement auth, David demonstrates how to use a service that stays up to date automatically and is a much simpler alternative to Auth0, Okta, and others.
This article explores an architectural design pattern called the finite state machine (FSM) that the OkCupid team used to craft a robust location search UX.
Andy Jones explains the key parts of a complete infrastructure setup and deployment pipeline for a barebones React app. The article also features a complete code example of the setup in GitHub.
This tutorial walks you through how you can use Visx (Airbnb's React data viz library) to build a line chart which displays the price evolution of a product over a 10-day period.
This tutorial takes you through the steps of creating a realtime chat application with Next.js and deploying it to Vercel.
In this step-by-step guide, Reed Barger will show you how to create your own custom React hooks by breaking down three hooks he's made for his own applications, along with what problems they were created to solve.
A build-time query cache for Next.js that creates an HTTP server during the build that caches responses. This could be helpful for Next.js users who create static (or partially static) builds. The query cache saves responses as they are requested so shared queries across pages (e.g. for header data) are de-duplicated.
A collection of React components built with tailwindcss 2.0.
Embla Carousel is a bare bones carousel library with fluid motion and great swipe precision. It's built in React but is library agnostic, dependency free and open source.
This 4-part series walks through how to build CRUD application using React, TypeScript, GraphQL, Node.js, and MySQL.