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…

ReactJS: Code an image portfolio gallery like Pinterest and Pixabay

November 12, 2020 A 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…

React: Get form input value with useState hook

December 23, 2020 The Shadow

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

March 30, 2021 A 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)

October 25, 2020 A 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:…

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

May 5, 2020 A 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…

1 4 5 6 7