React

If you are using React Router Dom for navigation and routing in your React app then you will have to handle scroll restoration on your own because the library no longer ships default scroll management (it used to provide an out-of-the-box......

This article walks you through a complete example of displaying an image preview before uploading. We are going to use React hooks and pure Javascript. No third-party packages are necessary. The Example Preview The React app......

A select element is a drop-down list with multiple options. In this article, we will examine an end-to-end example of handling the onChange event of a select element in a React web app that written with TypeScript. The......

This article walks you through a complete example of making an autosize (or auto-resize) textarea in a React project that uses TypeScript. We will use modern React with functional components and the following hooks: useState,......

This article shows you a couple of different ways to comment out (and uncomment) a single line or a block of code in React and JSX. Using Keyboard Shortcuts If you are using VS Code (Visual Studio Code) to develop your React app......

This article walks you through a complete example of making a password strength checker in React and TypeScript. We will build it from scratch and will NOT use any third-party packages. In addition, we will use modern features of React......

This article walks you through an end-to-end example of handling dynamic checkboxes in a React application written in TypeScript. We’ll use hooks and functional components, not class components as well as old-fashioned......

The end-to-end example below shows you how to handle image events in a React app that uses TypeScript. There are 2 events that we are going to work with: onLoad: This event occurs when an image has been loaded. onError: This......

This article is about the onMouseOver and onMouseOut events in a React project written in TypeScript. We’ll go through the fundamentals of these events then examine a complete example of using them in practice. Overview The......

This article shows you a couple of different ways to use Bootstrap 5 (the latest version of Bootstrap) and Bootstrap icons in a React project. Using Bootstrap Official Packages 1. To use Bootstrap 5, you can install the......

The example below describes how to use a multiple select in a React project written in TypeScript. You will learn to get the selected values as well as display them on the screen. Everything will be made from scratch without any......

This article walks you through an end-to-end example of creating a custom context menu in a React app that is written in TypeScript. We’ll use new features of React like hooks and functional components. You won’t see......