How to determine mobile or desktop in React

July 6, 2020 React Man

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