#react page 1

Leaflet Marker Clustering

Performance can begin to degrade pretty quickly when you are trying to show large amounts of data on a map. Even at hundreds of markers…

Google Maps Marker Clustering

Performance can begin to degrade pretty quickly when you are trying to show large amounts of data on a map. Even at hundreds of markers…

Mapbox Marker Clustering

Performance can begin to degrade pretty quickly when you are trying to show large amounts of data on a map. Even at hundreds of markers…

Replacing Redux with React Hooks

Redux has been the go-to way to manage state within your React application for years. It's popularity is due in large part because when it…

How Does SWR Work?

SWR is a great package from Zeit to help make it easier to fetch remote data with hooks. It is based on the stale-while-revalidate RFC…

Using the useEffect hook

useEffect is meant to handle any sort of "side effect" (making a change in some external system, logging to the console, making an HTTP…

Async Axios in React Testing Library

In this article we'll take a look at how to handle async code in React Testing Library, specifically at how to test and mock a call using…

Firing Events in React Testing Library

In this article we'll see how to fire and test events in our React components using the React Testing Library. With React Testing Library it…

Introduction to the React Testing Library

React Testing Library is an amazing yet simple testing library from Kent Dodds . It works alongside the testing library Jest to provide…

React Hooks with Apollo GraphQL

With React 16.7 we were introduced to hooks . A way to allow things like state, refs, and lifecycle functions to live inside functional…

Using apollo-link-rest to use GraphQL with your RESTful endpoints

So you've updated your React code to use GraphQL, but there's those 2 RESTful API endpoints that you still have to integrate with... what do…

React and Purity

React gets its name from being reactive to changes in your data. When data changes, the UI reacts to those changes to re-render the page to…

How to use GraphQL with React

GraphQL is an amazing new(ish) paradigm for communicating with APIs, made popular by Facebook but since then used by many companies…

Map, Reduce, Filter, and Pie Charts

Data comes in all sorts and sizes, and one of the key skills a developer can have is how to convert it into the required format and shape…

Mocking Axios in Jest + Testing Async Functions

In our tests we don't want to perform an actual HTTP request. To start with it is slow, but there are certain calls you really can't make…

Testing Asynchronous Components with Mocks in Jest

In this article below we will test a component which runs asynchronous code inside of its componentDidMount lifecycle event. We'll look at…

Introducing the React Context API

The new React Context API is touted (at least on Twitter and a number of articles) as solving the need to use a state management tool…

Error Boundaries and Render Props

Error boundaries were introduced in React 16.2 and provide a sort of declarative try/catch pattern for you to handle errors which occur…

Testing React with Jest, Enzyme, and Sinon

In this article we'll look at how to get up and running with testing React in a create-react-app . We'll look at how to configure your…

Introduction to React Motion Tutorial

React Motion is an animation library loved within the React community. I have to say that having some experience with libraries like GSAP…

Easy MobX and Redux Comparison

In this article/video we'll start with a simple React app made with create-react-app that uses component state (setState) as its state…

MobX Async Actions

I've always loved MobX because of it's lack of boilerplate in comparison to Redux. It just seems so effortless to modify state... so how…

Using Refs in React

Currently there are 3 distinct ways of using refs in React. A ref gives you access to the underlying DOM element. This is especially…

Introduction to MobX State Tree

MobX State Tree takes something which is awesome (MobX) and brings it to the next level. You can now define your own typed models, made up…

MobX in Create React App Without Ejecting

You do not have to eject from create-react-app to get support for decorators and other babel plugins. MobX works fantastic with decorators…

Create React App with MobX using Decorators

Create React App is a great way to get up and running with React. It comes configured with sane defaults which are great for most people…

Introduction to Mobx and React

In this video tutorial I show how to get up and running with Mobx in a React app. We will go from create-react-app all that way to having…