Menu

Testing React Hooks With Enzyme and React Testing Library

November 29th, 2019

As you begin to make use of React hooks in your applications, you’ll want to be certain the code you write is nothing short of solid. There’s nothing like shipping buggy code. One way to be certain your code is bug-free is to write tests. And testing React hooks is not much different from how…

Working with Fusebox and React

November 8th, 2019

If you are searching for an alternative bundler to webpack, you might want to take a look at FuseBox. It builds on what webpack offers — code-splitting, hot module reloading, dynamic imports, etc. — but code-splitting in FuseBox requires zero configuration by default (although webpack will offer the same as of version 4.0). Instead, FuseBox…

Understanding How Reducers are Used in Redux

October 24th, 2019

A reducer is a function that determines changes to an application’s state. It uses the action it receives to determine this change. We have tools, like Redux, that help manage an application’s state changes in a single store so that they behave consistently. Why do we mention Redux when talking about reducers? Redux relies heavily…

Demonstrating Reusable React Components in a Form

October 2nd, 2019

Components are the building blocks of React applications. It’s almost impossible to build a React application and not make use of components. It’s widespread to the point that some third-party packages provide you with components you can use to integrate functionality into your application. These third-party components tend to be reusable. The difference between them…

Using Immer for React State Management

August 7th, 2019

We make use of state to keep track of application data. States change as users interacts with an application. When this happens, we need to update the state that is displayed to the user, and we do this using React’s setState. Since states are not meant to be updated directly (because React’s state has to…

Fetching Data in React using React Async

July 31st, 2019

There will always be delays when handling requests over the network. That’s just part of the deal when it comes to making a request and waiting for a response. That’s why we often make use of a loading spinner to show the user that the expected response is loading. See the Pen ojRMaN by Geoff…

Getting to Know the useReducer React Hook

June 26th, 2019

useReducer is one of a handful of React hooks that shipped in React 16.7.0. It accepts a reducer function with the application initial state, returns the current application state, then dispatches a function. Here is an example of how it is used; const [state, dispatch] = useReducer(reducer, initialState); What’s the good for? Well, think about…

Managing State in React using Unstated-Next

June 17th, 2019

In a previous post, we saw how to manage state using Unstated. As you might recall, Unstated uses React’s built-in setState to allow you create components that can consume state by subscribing to a provider — like the React’s Context API. Well, we’re going to build off that last post by looking at Unstated Next,…

Using Cypress to Write Tests for a React Application

June 12th, 2019

End-to-end tests are written to assert the flow of an application from start to finish. Instead of handling the tests yourself — you know, manually clicking all over the application — you can write a test that runs as you build the application. That’s what we call continuous integration and it’s a beautiful thing. Write…

Creating Animations Using React Spring

June 4th, 2019

Have you ever needed animation in your React application? Traditionally, implementing animation has not an easy feat to accomplish. But now, thanks to Paul Henschel, we there’s a new React tool just for that. react-spring inherits from animated and react-motion for interpolations, optimized performance, and a clean API. In this tutorial, we will be looking…