React: Make a simple line chart with Ant Design

November 4, 2020 A Goodman

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 🙂

React: Making a side Drawer with Ant Design

November 4, 2020 A Goodman

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…

Is Ant Design Pro free?

November 4, 2020 A Goodman

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…

Using Ant Design Buttons with React.js

November 4, 2020 The Shadow

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…

How to use Ant Design Icons with React.js

October 21, 2020 The Plumber

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,…

Live email validation in React (with Regex)

October 8, 2020 A Goodman

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…

React App Exits Immediately with Docker Run Command

October 1, 2020 A Goodman

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…

React: “I agree to terms” checkbox example

September 21, 2020 A Goodman

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…

How to use Font Awesome 5 with Next.js

September 16, 2020 The Plumber

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…

How to add Favicon to a Next.js app

January 12, 2021 A Goodman

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…

How to determine mobile or desktop in React

July 6, 2020 The Frog

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:…

How to make a modal box from scratch in React

January 8, 2021 The Plumber

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…

1 2 3 4