A Quick Start Guide to Query Strings with React Router

I’ve been working on a project where we wanted to implement a set of filters for a list of records on one page of our React web app and store the selected filters as state in the URL. We chose this approach so we could link directly to the page with specific filters selected. Adding […]

Creating a Simple Server with Next.js

It can take a long time to get a full-stack React and Node.js app off the ground. Fortunately, with the addition of API Routes, Next.js offers a way to do that in just minutes.

Using React Hooks & Context to Avoid Adding Redux Too Early

Many people think of React and Redux as inseparable, despite the Redux author’s own advice to avoid using it “until you have problems with vanilla React.”

Loading States in React Components Using TypeScript’s Discriminated Unions

Many web applications need to load data from servers that will be shown to users. It’s important for the UI to handle loading states while the requests are in-flight. Let’s say, for example, that we have a page that will load a user’s profile. We want to be able to show a loading message, then […]

Solving Nested Navigation in React with TypeScript

On a recent project, we needed to support multi-level tab bar navigation within our application. With multiple variations of tab bars, each page needed to know which tabs to show. We found that TypeScript offered a good solution.

Creating a Drag-and-Drop File Uploader with React & TypeScript

A while ago, I was working on a project based off the Atomic SPA Starter Kit, which uses TypeScript, React, and GraphQL. One of the features we needed to build was a file upload component that supported dragging and dropping a file from a separate window onto the UI.

Migrating an Ejected Create React App to TypeScript

I love Create React App, and I also love TypeScript. That means I really love react-scripts-ts, which is a great way to spin up a new SPA for experimental purposes.

Should You Use React Storybook?

Our team recently started using React Storybook for a large React app that we have been building. In this post, I’ll share what we learned and hopefully encourage you to consider incorporating Storybook into your next React project.

Practices for Harnessing SCSS with React

We have been hard at work on a client project using React. We haven’t made our way to implementing CSS Modules yet, but we’ve established a set of rules to help us keep the CSS in order.

Testing React App SEO using Fetch as Google

When developing a website, you might be interested in understanding how well search engines can crawl and understand it. Google offers a tool called Fetch as Google that can help answer that question. In this post, I’ll explain how to use Fetch as Google to test your website. It can be used for any website; […]

Atomic Spin

Atomic Object’s blog on everything we find fascinating.

react