React: Finding Elements by className

August 16, 2022 Snowball

In React, you can find elements with a certain className using the document.getElementsByClassName() method: If you only to get the first element in a bunch of elements that have the same className, do like so: For…

React: How to Disable a Button after One Click

August 16, 2022 Snowball

This example below shows you how to disable a certain button after it is clicked once in React. This can be useful in cases where you want to prevent the user from repeatedly clicking it multiple…

Displaying the Current Year in React

August 16, 2022 Snowball

In React, you can render the current year like this: The complete example below presents a copyright symbol along with the current year (you can see this everywhere on the internet). Screenshot: The code: Further reading:…

React: Using forEach()/for…of to Render a List

August 16, 2022 Snowball

When you need to render an array of objects in React, the most popular solution is to use the Array.map() method. However, there are other possible ways to get the same result, such as using the…

React + TypeScript: Using setTimeout() with Hooks

August 15, 2022 A Goodman

This succinct, practical article walks you through a complete example of using the window.setTimeout() and window.clearTimeout() methods in a React application that is written in TypeScript. We’ll use functional components with hooks (useState, useEffect, and useRef)….

React + TypeScript: setInterval() example (with hooks)

August 15, 2022 A Goodman

This practical article walks you through a complete example of using the window.setInterval() method in combination with hooks (useState, useEffect, and useRef) in a React application that is written in TypeScript. No more rambling; let’s unveil…

React: Load and Display Data from Local JSON Files

August 13, 2022 A Goodman

This practical, succinct article shows you how to load and render data from a local JSON file in React. Without any further ado, let’s get started. Importing Local JSON Files In a React project created with…

How to Create a Word Counter in React (with Hooks)

August 12, 2022 A Goodman

This practical article shows you how to create a word counter in React (in addition, we’re going to add a character counter, since it doesn’t take much effort). A Quick Note There is a common pitfall…

React: How to Check Internet Connection (Online/Offline)

August 12, 2022 A Goodman

This succinct, practical article shows you how to check the internet connection in React by using hooks. No third-party libraries are required. What Is The Point? In Javascript, there is an object called navigator that can…

React: How to Detect Caps Lock is On

August 11, 2022 A Goodman

The complete example below shows you how to find out if the caps lock is currently ON when you are typing something into an input field in a React application. This will be useful in many…

React: How to Create an Image Carousel from Scratch

August 11, 2022 A Goodman

This practical walks you through the steps to implement an image carousel (slider) in React. We’ll make it from the ground up without any third-party NPM packages. No more ramble; let’s get our hands dirty. Prerequisites:…

React: How to Create a Responsive Navbar from Scratch

August 10, 2022 A Goodman

This article walks you through a complete example of creating a responsive top navigation menu in React. We’ll build everything from the ground up with only native features of React and pure CSS. Neither NPM packages…

1 2 3 4 10