The new Hooks API solves a lot of problems. But it does not solve the problem why we need Redux and Higher Order Components. This article explains why.
Consider a React app with independent container components: ‘Module A’, ‘Module B’, ‘Module C’ and so on. When I say independent, what I mean is Module A does not share state with Module B or Module C.…
Redux is a global state manager. React Redux provides bindings for React apps. In this article, I will show how we can manage global state using reducer functions just like how Redux does.
useReducer hook has a few limitations. We cannot use the hook with the same reducer more than once. Because of the limitation, a React app using useReducer hook passes down props from the container components down to leaf level components.…
Parcel is a zero configuration bundler for React apps. By default, it applies transforms like Babel and is capable of bundling styles and images. It is much easier and faster to scaffold a React app with Parcel compared to create-react-app or CRA. In this tutorial, I will provide step-by-step instructions to scaffold a React app using Parcel bundler. The tutorial helps to build demo React apps for learning or reproducing a bug.…
Global state lifts state and puts it outside React components. This helps in sharing state between components. Most React apps use Redux or Mobx for global state management. In this article, we will learn how to use the new React Hooks API and useReducer function for global state management.
This article is yet another tutorial or lab. So, I encourage readers to try out this tutorial after reading it.…
There are several packages to create a Bar chart in React. But consider the scenario where we want to create a highly specialised Bar chart in one of our pages. In this case, my recommendation is to avoid community packages which are usually bloated with too many features or does not have the feature that we need. In this tutorial, I will show how to create a Bar chart in React using SVG components, D3 functions for math and react-move for animations.…
Most landing pages have a huge background image. Within that background image, there is some text and a button which prompts the user to take an action.
Usually, the problem is that of contrast. The text is white in color and the background image may also be light causing a problem with contrast. We can solve the problem with minor CSS adjustments.…
It is 25 years since the first websites spawned the internet. There is a lot of knowledge involved in making a website. There are huge advancements in technology: HTML 5, CSS 3 and JavaScript 6+. The path to becoming a good Web developer is still somewhat straight-forward. Knowing the path, it is easy to become a good Web developer within 6 months.…
Push notification is a message that pops up on a mobile device. The message is usually a prompt to start using the app. An app can receive a push notification when it is in foreground state, background state or even when it is killed.
In this article, we will integrate Firebase Cloud Messaging to an Android React native app. Adding FCM to iOS app is similar.…
With earlier CRA version, it was not possible to use SASS out-of-the-box. But the new version 2 supports SASS without ejecting. This was one of my prime motivations to start using CRA version 2 for my hobby project.
The upgrade is smooth. I did pretty much everything in a single commit within 20 minutes.
In package.json, replace the version of react-scripts to 2.0.3.…
There are several ways to do Input Validation in React. I recommend using plain JavaScript instead of bloated packages like redux-form.
The following video shows how we validate an email field usually.
In the above video, as soon as the user starts typing into the email field, the error message pops up.…