Adding React and TypeScript

Explore how to add React and TypeScript to your project manually by installing core libraries and setting up the TypeScript configuration file. Understand important compiler options and create a root React component with TypeScript to prepare for further development.

We'll cover the following...

- Adding React
- Adding TypeScript
- Adding a root React component
- Wrap up

Adding React #

We can install React into our project by running the following command in the terminal:

npm install react react-dom

This installs the core React library as well the React library for interacting with the browser.

Adding TypeScript #

TypeScript can be installed in our project as a development dependency by running the following command in the terminal:

npm install --save-dev typescript

Why do you think we have installed TypeScript as a development dependency rather than a full dependency that is available at runtime?

1.Why TypeScript?

2.Using basic types

3.Creating types

4.Working with generic types

5.Creating strongly-typed function component props

6.Creating strongly-typed function component state

7.Creating strongly-typed class components

8.Creating strongly-typed component events and event handlers

9.Creating strongly-typed context

10.Creating strongly-typed refs

11.Creating React projects with TypeScript using Create React App

12.Creating a React and TypeScript project manually

13.Putting everything together

Adding React and TypeScript

Adding React #

Adding TypeScript #