React + TypeScript: Making a Custom Context Menu
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…
React + TypeScript: Multiple Select example
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…
How to Correctly Use Bootstrap 5 in Next.js
This article shows you how to correctly use Bootstrap 5 in a Next.js project. By the end of this article, we will be able to: Use all CSS classes provided by Bootstrap 5 whereever you want….
How to Use Bootstrap 5 and Bootstrap Icons in React
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…
React + TypeScript: onMouseOver & onMouseOut events
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…
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: onLoad: This event occurs when an image…
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 few ways to comment out 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…
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…