Learning React with TypeScript by Building an API app

Photo by Lautaro Andreani on Unsplash

We are going to learn TypeScript in a ReactJS project by creating a simple API app. TypeScript add strict type definitions in a project, which is helpful to get the error earlier.

This project can be found on the YouTube channel here -

To create a ReactJS project with TypeScript, we need to add template typescript to the create-react-app command. So, use the below command to create a new typescript-apiapp project.

npx create-react-app typescript-apiapp --template typescript

Now, in a React project with TypeScript, all the files are tsx instead of the regular js file. So, after starting the project in the App.tsx file remove everything and add a h1 for ReactJS TypeScript.

App.tsx

Next, create a new components folder inside the src folder. Inside it create two files Header.tsx and Header.css.

In the Header.tsx file put the below content. Here, everything is like a normal React component only, but we need to mention that it is a Function Component and also need to tell about the props, which we don’t have any in this component.

Header.tsx

Next, in the Header.css file we will have simple styles for our Header component.

Header.css

Next, in the App.tsx we will include the Header component.

App.tsx

Now, in the App.css file we will have the common styles, which we are going to use soon.

App.css

Now, a beautiful Header is been shown in our application.

Beautiful Header

Now, we are soon going to get our data from the famous jsonplaceholder site. Now, we will create a note.model.ts file first inside a models folder in src folder.

note.model.ts

Next, create a ListNotes.tsx file inside the components folder. Here, we are again using a TypeScript based React Functional component. The notes props passed to it is of type Note.

We are just looping through the notes array and showing the title and the body.

ListNotes.tsx

Now, back in the App.tsx file we will be using a notes as a state and will use the Note model again.

We are passing this notes array to the ListNotes.

App.tsx

Now, in localhost the data from ListNotes component will be shown.

ListNotes

Now, we will get the data from jsonplaceholder and for that we will do the API call to the posts endpoint in App.tsx file.

App.tsx

We will also refactor the code in ListNotes.tsx file by passing the prop to Notes component.

ListNotes.tsx

Now, in the Notes.tsx file we will create a simple functional component and again use the Note model and will render the note title and body.

Notes.tsx

Now, will also add the styles for it in the Notes.css file.

Notes.css

Now, all the Notes are rendered from the jsonplaceholder site in our localhost.

localhost

Now, we will add the functionality for the delete button to complete our app. For this first need to send the setNotes as a props in ListNotes from App.tsx file.

App.tsx

Next, in the ListNotes.tsx file, we will use the setNotes. Notice that here, we have to mention it type in the props. We are also passing a handleDelete props here.

ListNotes.tsx

Lastly, we will use this handleDelete in our Notes.tsx file.

Notes.tsx

Now, we are able to delete posts in our app and this completes our small project. You can find code for the same here.

localhost