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:
- 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. - Create a new file in the
src
folder calledAlert.tsx
. Paste in the JavaScript version of the alert component, which can be found on GitHub at https://github.com/PacktPublishing...