This article discusses how to set up an Amplify app with Google Sign In using a React app frontend. This will also mention how to configure multiple redirect URIs per app. The first section is dedicated to boilerplate setup with React, Github, Amplify, and the Google developer console, while the…

I wanted to display some code from one of my GitHub repos in a React app, and I wanted it to update automatically on the site when I pushed a new version. I wanted this for a small component library I was making for myself, so I could see the…

React-query is a gorgeous data fetching library that has received well-deserved praise. This article will detail patterns for a CRUD app, plus some bonus patterns. The documentation for react-query is excellent, but I found myself wishing for more practical examples while learning it. These examples will assume some familiarity with…

This article will review how to publish React components as an npm package with Babel 7 (the latest version at the time of writing) and common errors. I found myself copy-pasting my React components from project to project and wanted to create an npm package so I could import them…

With a reusable hook and useRef — Detecting a click outside a React component is useful for closing dropdowns, modals, and dialogue boxes. It’s a common pattern that clicking outside the body of those components will close them:

This tutorial will walk through the steps for sending Draft.js data to a server using a POST request, and then how to retrieve and display that data using a GET request. I’m using an Express backend, a MongoDB database, and a React frontend. This will assume some basic knowledge of…

Airtable is a spreadsheet app with a free, public API. That allows its spreadsheets to be read and written to from the browser, making it usable as a simple database. This article will show how to fetch, create, update, and delete data from Airtable. …

The forwardRef hooks allows React users to pass refs to child components. The ref can be created and referenced with useRef or createRef and then passed in a parent component. Using forwardRef instead of useRef is useful when a ref needs to be accessed in a parent component. Using forwardRef Refs cannot…

This guide is a template to using JWT authentication in React with a MERN app. This code can be used as a template and adjusted as needed for React apps with JWT authentication. The full codebase is here. This template is for storing user data in an HTTP-only cookie (not…