Learning React with TypeScript by Building an API app
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.
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.
Next, in the Header.css file we will have simple styles for our Header component.
Next, in the App.tsx we will include the Header component.
Now, in the App.css file we will have the common styles, which we are going to use soon.
Now, a beautiful Header is been shown in our application.
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.
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.
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.
Now, in localhost the data from ListNotes component will be shown.
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.
We will also refactor the code in ListNotes.tsx file by passing the prop to Notes component.
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.
Now, will also add the styles for it in the Notes.css file.
Now, all the Notes are rendered from the jsonplaceholder site in our 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.
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.
Lastly, we will use this handleDelete in our Notes.tsx file.
Now, we are able to delete posts in our app and this completes our small project. You can find code for the same here.