{"id":28653,"date":"2023-02-22T16:18:52","date_gmt":"2023-02-22T10:48:52","guid":{"rendered":"https:\/\/mobisoftinfotech.com\/resources\/?p=28653"},"modified":"2026-04-22T12:16:48","modified_gmt":"2026-04-22T06:46:48","slug":"learn-typescript-with-react-by-building-a-crud-application","status":"publish","type":"post","link":"https:\/\/mobisoftinfotech.com\/resources\/blog\/learn-typescript-with-react-by-building-a-crud-application","title":{"rendered":"Learn TypeScript with React By Building a CRUD Application"},"content":{"rendered":"

TypeScript is a powerful programming language that enhances the development of complex web applications by adding a static type system to JavaScript. React is a popular JavaScript library used for building user interfaces. Combining these two technologies can take your web development to the next level. <\/span><\/p>\n\n\n\n

In this article, you will learn the basics of TypeScript with React in the first sections of the article. And then you will learn to build a contact manager app using React and TypeScript.<\/span><\/p>\n\n\n\n

So by the end of this article, you will have a clear understanding of how to properly use TypeScript with React.<\/span> If you want to refer the code for this entire project, you can download it from here<\/a>.<\/p>\n\n\n\n

So let’s get started.<\/span><\/p>\n\n\n\n

React And TypeScript Basics<\/h2>\n\n\n\n

When learning React with TypeScript, the first thing you should understand is the file extension.<\/span><\/p>\n\n\n\n

Every React + TypesSript file need to have a .tsx<\/code> extension.<\/span><\/p>\n\n\n\n

If the file does not contain any JSX-specific code, then you can use the .ts<\/code> extension instead of the .tsx<\/code> extension.<\/span><\/p>\n\n\n\n

To create a component in React with TypeScript, you can use the FC<\/code> type from the react<\/code> package and use it after the component name.<\/span><\/p>\n\n\n\n

Create a new file with the name Header.tsx <\/code>and add the following code:<\/span><\/p>\n\n\n

import<\/span> { FC } from<\/span> 'react'<\/span>;\nconst<\/span> Header: FC = ()<\/span> =><\/span> {\n  return<\/span> <h1>Welcome, Mike!<\/h1>;\n};\nexport default Header;\n<\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Here, we’re just displaying a welcome message in a functional component.<\/span><\/p>\n\n\n\n
Now, If we want to pass a dynamic name <\/code>as a prop we can do that like this:<\/span><\/p>\n\n\n
import<\/span> { FC } from<\/span> 'react'<\/span>;\n\ninterface<\/span> HeaderProps {\n  name: string<\/span>;\n}\n\nconst<\/span> Header: FC<HeaderProps> = ({ name<\/span> }<\/span>) =><\/span> {\n  return<\/span> <h4>Welcome, {name}!<\/h4>;\n};\n\nexport default Header;<\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Here, we have declared HeaderProps<\/code> as an interface that has a name<\/code> property and for the Header<\/code> component, we have added angle brackets to use that interface.<\/span><\/p>\n\n\n\n
This way TypeScript will know that the Header <\/code>component needs a name <\/code>prop which is a required prop.<\/span><\/p>\n\n\n\n
And we can call the component like this:<\/span><\/p>\n\n\n
<Header name='Jerry'<\/span> \/><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
If you miss any of the required props like name <\/code>in our case, then TypeScript will throw an error as can be seen below:<\/span><\/p>\n\n\n\n