Menu

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…

Getting Started with React Testing Library

May 22nd, 2019

I can guess what you are thinking: another React testing library? But react-testing-library is not just another testing library. It’s a testing library, yes, but one that’s built with one fundamental principle that separates it from the rest. The more your tests resemble the way your software is used, the more confidence they can give…