Setting up a React + TypeScript Project

Here, we will not set it all up by ourselves. We will use the create-react-app tool for this.

Refer: https://create-react-app.dev/docs/adding-typescript/

I can make a new app using:

npx create-react-app first-app --template typescript

NOTE: Put the app name according to your needs instead of first-app above.

Now, if I see the created folder structure:

Screenshot 2022-12-17 at 5.21.18 PM.png

Here, you can see the tsconfig.json. Now, in the source folder:

Screenshot 2022-12-17 at 5.22.13 PM.png

Here, you can see there are a lot of tsx files. The .tsx simply is been chosen here, because these are files where you cannot just write TypeScript code, but also JSX code, which just is special React, JavaScript syntax, where you write HTML markup inside of your JavaScript, or in this case, TypeScript code.

If I clean up a bit:

Screenshot 2022-12-17 at 5.30.51 PM.png

App.tsx:

Screenshot 2022-12-17 at 5.31.00 PM.png

index.tsx:

Screenshot 2022-12-17 at 5.31.31 PM.png

index.css:

Screenshot 2022-12-17 at 5.31.47 PM.png