Getting Started with React and TypeScript

React is a JavaScript library that helps us build the frontend of an app. It allows us to structure our apps using powerful and reusable components. It helps us manage the data that the components use, and their state, in a structured fashion. It uses something called a virtual DOM to efficiently render our frontend.

TypeScript can work beautifully with React, giving us the ability to add static types to our React components. The types help our code editor to surface problems while we write our React components, and give us tools to safely refactor them.

In this chapter, we'll look at two different ways to create a React and TypeScript project. We'll create our first React component, which will be a confirmation dialog. Early topics we'll cover are JSX and strongly typed props. We'll look at handling the dialog's button click events.

We'll then look at declaring and interacting with strongly typed states, which will be used to hide and show the dialog. We'll discuss component life cycle methods, and touch on the ones that have been removed in React 17.

Finally, we'll look at function components, and when these are used.

In this chapter, we'll cover the following topics:

• Creating a React and TypeScript project
• Creating a class component
• Handling class component events
• Class component states
• Class component life cycle methods
• Creating a function component