Easy way to start with React Js + Typescript for beginners

Arun17
Arun17
Nov 4 · 2 min read

I have been working with React JS for the past one year. Now I have started learning React with Typescript and I realized the uses and purpose of why we have to implement Typescript with our projects. So I decided to share something that I have learned in the beginning stage. I hope this post will help for the beginners.


If you want to learn more about Typescript please refresh this link.

Here we go, let's create a new React JS application by running the following command.

npx create-react-app app_name — typescript

By running this command React will automatically installed typescript dependencies in your project. So we don’t need to add typescript dependencies independently.

Once the React app created, then you can see all file extensions with .tsx. Which means all files come under typescript format. And your folder structure should look something like this,

Next, create a new file under the src folder and name it as ShowUserInfo.tsx, and copy the below code and paste it inside the ShowUserInfo.tsx file.

Here you can see, we are declaring the type object variable UserInfoT. This contains two attributes name, age with the respective data types. This is the main reason why we have to use Typescript with our application. It checks the props value with data types. If the values are mismatched with data types it will throw the error.

Next, Open src/App.tsx file and import this ShowUserInfo component. Copy and paste the below code in App.tsx file.

Now your coding part is over. Run npm start in your terminal and you will be redirect to localhost:3000 port and you can see the react application with displaying name and age.

So, In this article, I have described very basic React + Typescript example. How to pass some props from one component to another component with the typescript type declaration.

Thanks, guys. If you have any doubts feel free to ask in the comments section.

Code repo — Github.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade