Creating a React and TypeScript component

In Chapter 1, Introducing React, we built an alert component using React. In this section, we will use TypeScript to make the component strongly typed and experience the benefits. We start by adding a type to the alert component’s props and then experiment with defining a type for its state. After completing the alert component, we will inspect the component using React’s DevTools.

Adding a props type

We will continue using the React and TypeScript project created in the last section with Create React App. Take the following steps to add a strongly typed version of the alert component:

1. Open the project in Visual Studio Code if it isn’t already open. Make sure you open the project in the app name folder so that package.json is at the root.
2. Create a new file in the src folder called Alert.tsx. Paste in the JavaScript version of the alert component, which can be found on GitHub at https://github.com/PacktPublishing...