React + TypeScript: Image onLoad & onError Events
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: Example App Preview The app we are…
React + TypeScript: Handling onClick event
The onClick event occurs when an element is clicked. This element can be a button, a div element, an image, etc. This article walks you through a couple of different examples of handling the onClick event…
React + TypeScript: Handling Keyboard Events
This article walks you through the basics and a few practical examples of handling keyboard events in a React app that is written in TypeScript. We’ll use modern React features including hooks and functional components. You…
React + TypeScript: Multiple Dynamic Checkboxes
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 stuff. The Example Overview…
React + TypeScript: Password Strength Checker example
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…
VS Code: Making Comments in React and JSX
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…
React + TypeScript: Using Inline Styles Correctly
When using inline styles in a React project that is written in TypeScript, you may encounter some annoying problems. For example, the code below: will result in an error like this: Similar errors can also occur…
React + TypeScript: Create an Autosize Textarea from scratch
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, useEffect,…
React + TypeScript: Handling Select onChange Event
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…
React: Show Image Preview before Uploading
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…
React Router Dom: Parsing Query String Parameters
If your React web application uses React Router for navigation and routing, you use the useLocation hook to get the location object that represents the current URL. Once you have the location object, you can retrieve…
React Router Dom: Scroll To Top on Route Change
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…