React: Make a simple line chart with Ant Design

November 4, 2020 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 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 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

October 21, 2020 Linda Walker

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 Ken Fisher

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 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 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 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 Ken Fisher

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

September 16, 2020 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 Voldermort

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 ReactJS

July 6, 2020 Ken Fisher

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…

ReactJS: Code an image portfolio gallery like Pinterest and Pixabay

June 23, 2020 Goodman

In this tutorial, we’ll create a beautiful, responsive image portfolio gallery like Pinterest and Pixabay. with an amazing library named react-masonry-component. Here’s what you will see at the end: Prerequisites To follow this tutorial, you will…

ReactJS: Get form input value with useState hook

June 22, 2020 Linda Walker

The simple example below shows you how to get the value from an input field in React. Example Create a brand new React app, delete everything in the App.js file, and add the code below: Try…

Understand React useContext hook through example

May 28, 2020 Goodman

The React Context API is useful for passing data (including number, object, function… ) deeply throughout a React app. It makes your life much easier than using multi-level props. The useContext hook is available in React…

3 great libraries to make pie charts in React (including examples)

April 30, 2020 Goodman

There are various libraries out there to help you create a beautiful pie chart (AKA circle chart, pie graph e.t.c) in React without any pain. victory-pie A very-easy-to-use chart drawing library. Example Install victory-pie by executing:…

Understanding the useReducer hook in React through a simple example

April 21, 2020 Goodman

The useReducer hook is used for state management in React. When your app has complex state logic that involves multiple sub-values or when the next state depends on the previous one, you should use the useReducer…

Passing data from a child component to a parent component in React

February 17, 2020 Goodman

In React, passing data from a parent component into a child component is quite easy with “props”. On the other hand, passing data from a child component to a parent component is a little more complicated…

How to use react-ga to track your React website traffic

February 5, 2020 Goodman

This tutorial shows you how to track your React app (or website) traffic with Google Analytics. Prerequisites A Google Analytics account Basic React knowledge Installation Code Create a file and call it MyGa.js: Usage Simple way:…

How to use Font Awesome icons in React

January 28, 2020 Goodman

This article will show you how to use Font Awesome icons in a React app. Firstly, let’s install the necessary packages. Next, import the icons you need into your React component. Note that if an icon…