A short React tutorial by example for beginners about creating a select in React. First of all, a select is just an HTML select element which can be rendered in React's JSX: What may be missing is an associated label to signal the user what value is changed with this select: In your browser, this select can already change its select state by…
Type Guards in TypeScript are needed whenever you want to allow only a certain type for a routine in TypeScript. In this TypeScript tutorial, you will learn how to check for user defined types by using so-called user-defined type guards . We will start with two types and two objects annotated respectively with these types: In this TypeScript…
A brief walkthrough on how to set up React Testing Library in Vitest when using Vite. The tutorial assumes that you have already created a React project with Vite either in JavaScript or TypeScript. Next, install Vitest on the command line: Then in your package.json file, add another script which will run the tests eventually: Create a test…
Generics in TypeScript are not easy to understand when just starting out with TS. Personally I had my struggles with them in the beginning, however, once you get how they are used, they make you a more complete TypeScript developer. In this TypeScript tutorial, you will learn how to use generics in TypeScript . We will start with defining a…
Sooner or later every React developer has to handle forms. The following tutorial will give you a comprehensive overview about forms in React. You will learn how to manage form state in React, the difference of controlled and uncontrolled forms (state vs reference), how to submit a form (e.g. callback handler), and how to reset a form (e.g. after…
When using React's useState Hook in TypeScript, the method usually infers the implicit type for the returned state from the provided argument automatically. In the following example, React's useState Hook in a function component knows that it deals with a number type. Hence the returned state (here: count ) has the type number in addition to…
A brief summary of how to use React's useRef Hook for using a ref with TypeScript. First, a ref in React is mainly used to assign a HTML element to it. The assigned HTML element gives us imperative read and write operations on it which allows us to programmatically call functions. Take the following example for focusing an input element: When using…
Thoughts about the intersection of gaming and entrepeneurship ... It's been more than 15 years since I last actively played PC games. Back in the days it was all about Diablo (I/II), Warcraft (I/II/III), and Starcraft for me. When my classmates socialized in the physical world after school, I would just hang out with my guild in the World of…
React Elements, Components, and Instances are different terms in React which work closely together. This guide will walk you through all three terms and explain them step by step. We will start off with the following code snippet as example: A React component is literally the declaration of a component as we see it in the previous code snippet…
Let's start with a story: when people outside of my professional bubble ask me about what I am doing, I say "I build websites" . If they are curious, I add that these websites are rather complex. If they keep on asking, I try to elaborate with some examples: Facebook, Spotify, Twitter. It's not that I work for these companies, but I hope that it…
