This article shows you how to draw a simple line chart in React with the help of the Ant Design Chart library. 1. Installing 2. Implementing the line chart Simple as that 🙂

This article shows you how to implement a simple side drawer navigation in React by using the Ant Design library. Getting Started Run the following command to install Ant Design and its icon kit: Import Ant…

Ant Design Pro is described as an Out-of-box UI solution for enterprise applications but it is open-source and totally free. Ant Design Pro is licensed under the MIT License. What is the difference between Ant Design…

This article shows you how to use Ant Design Buttons in a React application. Installation 1. Install the required package Install the icon package (optional): 2. Import the packages into your React code Implement 1. A…

This article shows you how to use Ant Design Icons in a React.js project. 1. Install the required package: 2. Import the icons you need, for example: Note: To see the full list of available icons,…

This article shows you how to validate email addresses while the user is typing in React (live validation). Summary We’ll use Javascript regular expression so that no third-party library is required. We’ll use the functional component…

Problem After starting a Docker container with a React app inside by performing the following command: Your React app may exit immediately with the output like this: This error is not on your side but caused…

In this article, we’ll create a simple React project with a checkbox and a button: If the checkbox is unchecked, the button will be disabled and can not be clicked. If the checkbox is checked, the…

The example below shows you how to use Font Awesome 5 with Next.js. 1. Create a new Next.js project then install the required packages: 2. Edit the page/_app.js file (create one if it doesn’t exist): Note…

This article shows you how to add a favicon into a Next.js project through a few easy steps listed below. Step 1: Copy your favicon file (my one named favicon.ico) to the public folder located at…

An easy solution to determine whether your React app is rendering on a mobile device or a computer is to use a library called react-device-detect. Example Installation: The code: Check it out with Chrome developer tool:…

This article shows you how to code a modal box from scratch in ReactJS without any third-party libraries. Prerequisites: Basic ReactJS knowledge Basic CSS knowledge This is how our modal works: The Code Create a new…