react | Atomic Spin

React / Redux

How to Create and Export Text Files from a React Frontend

Regardless of why you may want to do it, it is possible to create and export files directly from a React frontend without a request to the backend.

TypeScript

How to Add a Loading Component in Typescript with React Hooks

This demonstration uses React hooks to implement a loading component that displays while the client loads the results of a function call.

React / Redux

How to Fire an Event-Driven GraphQL Query with Apollo Client for React

If you need to be able to fire a GraphQL query when an event occurs, look no further than Apollo Client’s useLazyQuery hook.

React / Redux

Why You Should Probably Think Twice About Using React.FC

Read about why React.FC can introduce problems to your components and an alternative you can use when making childless components.

React / Redux

How to Rehabilitate an Old React Webapp

Mature React apps built with Redux often suffer from three common kinds of problems. Here's a proven set of techniques to improve them.

React / Redux

Resolving Error: “Objects are not valid as a React child”

React throws an "Objects are not valid as a React child" error when trying to render an object directly. Only render primitives to resolve this error.

React / Redux

How to Customize Styles in Material UI Components

Material UI is great for out-of-the-box components, while the className and classes props are useful for reaching into different levels of an MUI component.

Development Practices

Runtime Configuration for SPAs

We recently had a need for runtime configuration in our web app’s frontend. In this post I’ll describe what that means and how we achieved it.

React / Redux

Choosing the Best Form Library for Your React Project

The form library you choose to use for your project should depend on your application and how your form fits into it. My choice? React Hook Form.

React / Redux

How to Create a Portrait Mode Only Mobile-First Web App

Some web apps are meant to be used in only one orientation on phones. Here is one way to make a single orientation mobile-first React web app using CSS media queries.

React / Redux

Animate App Components with React Transition Group

Animating app components can improve the user experience, but achieving this in React can be cumbersome. That’s where react-transition-group comes in.

Web Apps

Mithril.js – The Smallest, Fastest SPA Framework You’ve Never Used

Mithril's strengths mirror React's weaknesses. It's fast, comes with simple utilities, and offers a very concise API for a SPA framework.