Why Use Typescript In React?
Typescript brings some awesome features that extend JavaScript in powerful ways, including the ability to define the structure of an object in a variety of ways.
Create React App Using create-react-app
When you normally create a react app you run :
# with npm
npx create-react-app my-app
# with yarn
yarn create react-app my-app
But, if you want to create a react app with Typescript run :
# with npm
npx create-react-app my-app --template typescript
# with yarn
yarn create react-app my-app --template typescript
Defining Props
Create A New Component
Components in React Typescript are different from React Javascript. To define a component in React Typescript create a file with the .tsx extension let's just create Component/User.tsx with the following code
import React from "react";
export const User: React.FC = ({}) => {
return <div>User Component</div>;
};
Now we have a user component, now go to App.tsx and render the User component with the following code
import React from "react";
import { User } from "./Component/User";
export const App: React.FC = ({}) => {
return (
<div>
App Component
<User />
</div>
);
};
export default App;
Run The App On Localhost
Now we can run our app on localhost to see if it's working
# with npm
npm run start
# with yarn
yarn start
On your browser open localhost:3000 and you are going to see this
To take props in the User component add your props in <> like this
export const User: React.FC<{firstName: string, lastName:string, userId:number}>
But, a better way to do this is to create an Interface like this
interface Props = {
firstName: string,
lastName: string,
userId: number
}
export const User:React.FC<Props>
Now if you want to use these props pass them in function like this
interface Props = {
firstName: string,
lastName: string,
userId: number
}
export const User:React.FC<Props> = ({firstName, lastName, userId}) => {
return (
<h1>User Info</h1>
<div>First Name: {firstName}</div>
<div>Last Name: {lastName}</div>
<div>User ID: {userId}</div>
)
}
Because now our User component wants these props where we are rendering this component we need to pass the props like in App.tsx
<User firstName="Nouman" lastName="Rahman" userId={12} />
Now our app looks like this
