How to create React app with TypeScript?
Hey reader! In this article, we will look at how to integrate typescript in a react application, you all are thinking why do we want to create react app with typescript?🤔 So to answer your question let’s first understand what is typescript anyway?
const nname = "codedamn"
This will work fine but if I change the value and give it a number or boolean it will work perfectly.
const name = 12
Now by defining the variable type if I try to change the value and give it a number or something else other than a string. It gives you an error.
This approach is always good to have because by defining the variable or function type it is easy to maintain the code workflow policy and it also doesn’t break any code due to entering bogus values.
const name:string = "codedamn"
Typescript provides all the type-safety features that you can use to make your program a bit more implicit.
Let’s get started in creating react app already with typescript by default. Configuring typescript applications is a little bit complicated, especially the first time you are dealing with typescript. Don’t worry I am here to simplify and make your development journey a little hassle-free.
In this article, we will be using Codedamn Playground and I’ll also show you in Visual Studio Code editor, how to create a react-based typescript application.
Codedamn provides you with an interactive web-based free in-browser IDE environment where you can code and run your application anywhere without worrying about any software installation and setup. It works flawlessly on any laptop and it doesn’t require a heavy processor to run your application. You can manage your code workflow from anywhere and anytime.
Creating react app with typescript is simply very easy in the codedamn playground. Follow the below-mentioned steps to create one.
- Open Playground and click on From Github tab
- Copy this link https://github.com/codedamn-classrooms/react-vite-typescript and paste it into the Repo Url section.
- Don’t forget to give a nice name to your playground in the Playground Title section and click on Create Playground
- Voila! Your react-based typescript application is ready 🎉🎉
Codedamn Playground makes it easier to set up the application environment.
Visual Studio Code
Steps to Follow
Step 1– Go to nodejs.org and download nodejs you going to need that for npm to install your packages.
Step 2 – Open vscode and create one folder where we will install our react-based typescript application.
Step 3 – Open the terminal and verify that you are in the right folder that you created in the above step.
Step 4 – Type the command mentioned below to create your react-based typescript application. This might take a couple of minutes for installing all the packages on the meantime go check out Codedamn Platform 😎
npx create-react-app codedamn --template typescript
Step 5– Go to the folder directory using the cd command and type npm start this will initialize your application.
Step 6– Delete the unnecessary files for now and keep them as shown in the image. Congrats you have successfully created react app with typescript. 🎉
Free money-back guarantee
Unlimited access to all platform courses
100's of practice projects included
ChatGPT Based Instant AI Help (Jarvis)
Structured React.js/Next.js Full-Stack Roadmap To Get A Job
Exclusive community for events, workshops
Sharing is caring
Did you like what Anas Khan wrote? Thank them for their work by sharing it on social media.
- React useState Hook Typescript