Before starting everything, we must know why we will Create React App with TypeScript.
In simple words, code written in TypeScript is easy to read and understand. Which will greatly reduce the complexity of your React project in the long run. And TypeScript is more memory efficient. Overall it improves project code quality.
React projects can be done in both ways: Vanilla JavaScript or TypeScript. However, TypeScript provides more functionality and flexibility than JavaScript. Because of this, it is very popular and important to most developers.
This tutorial is for the beginner learner of React. In this blog post, you will learn how to create a React project with Create React App (CRA) and TypeScript.
You can also learn how to code the basics of React such as Components, State Management, Routing and Navigation, API, and Form handling through TypeScript.
Relevant to Read:
Table of Contents
Environment Setup for Create React App with Typescript
First of all, we need to install Node.js to work with React.
Node.js Installation
To install Node.js first we need to download the Node.js executable file from its official website.
After entering the website you can see two versions of Node.js. The first is the LTS (Long Time Support) version. The second is the Current version.
You will select the LTS version as a beginner because it is more stable than the Current version. Basically, you can compare the Node.js Current version with the beta version of the software.
Anyway, after selecting the LTS version, download it according to your operating system i.e. Windows, macOS, or Linux.
After downloading, install Node.js in the normal process like any other software.
To know if Node.js and npm are installed correctly, open your terminal and check the version of Node and npm.
To check the Node version, type the following command in your terminal and press enter.
node -vTo check the NPM version, type the following command in your terminal and press enter.
npm -vCreate A New React Project with TypeScript
Since you have successfully installed Node.js. Now you’re ready to create a new React project with TypeScript.
Open a terminal in the folder where you want to start your React project. It can be any terminal. You can open the terminal in that folder through your Linux terminal, Windows PowerShell, or VS Code Terminal. Let’s create a new React project called react_app_with_typescript.
To initialize a new React project with TypeScript simply follow the command:
npx create-react-app react_app_with_typescript --template typescriptThe code will create a folder named react_app_with_typescript inside your desired folder. Inside this react_app_with_typescript folder will be everything about your newly created React project.
You can replace react_app_with_typescript with any name you like. The project folder will be created with the name you give. But one caveat in this case is that all letters in the name must be lowercase. Because npm doesn’t support uppercase letters.
When you create your new React project with TypeScript, sometimes you may encounter this error “npm ERR! code ERR_SOCKET_TIMEOUT“.
Don’t worry, this is a common error. Many times this error appears due to various network-related reasons. If you face this error then execute the below simple command in your terminal.
npm config set fetch-retry-mintimeout 30000
npm config set fetch-retry-maxtimeout 210000Execute this code and try again to create a new React project. Hopefully this error “npm ERR! code ERR_SOCKET_TIMEOUT” will be resolved.
It’s nothing but, just increases the fetching timeout of the npm node module. Sometimes npm fails to download node modules due to some internet problems. So if you increase the fetching timeout, npm gets enough time to download the modules.
You can open your newly installed React App in a browser to see if your React project has been installed successfully.
To do this, open your terminal inside the folder named react_app_with_typescript. Or go into the folder where you created the React project. And open the terminal.
After that enter the following command.
npm startWait for some time after entering the code. After some time your localhost server will be ready and will show a success message in your terminal.
To access your react app just visit localhost:3000 in your favorite browser. Or you may have a different local host port. You can also find your localhost link in the terminal.
To stop the localhost:3000 server, open a new terminal and enter the following command:
npx kill-port 3000This will ask to install a dependency named kill-port. Just follow the instructions given in the terminal, and the kill-port will be installed automatically.
After that, your localhost server with port 3000 will shut down.
But if you already have kill-port installed then don’t need to do any installation. kill-port will directly stop the server.
If you are facing various types of errors or problems while creating React projects with TypeScript. Then you can try installing Create React App (CRA) globally first.
After installing CRA globally you can try again to create React project with TypeScript. In the next part of this article, we will learn how to install CRA globally.
Install Create React App Globally
Sometimes NPX shows us various errors and fails to create React projects with TypeScript. A simple hack to deal with such situations is to install Create React App globally.
But one caveat in this case is that if you install Create React App globally now, it will install the current latest version. But if you create a new React project in the future, it won’t automatically give you the latest version of CRA. In that case, you need to update the Create React App (CRA) manually.
Another thing is that this method is no longer officially supported by React.
To install globally first open your terminal window. Then copy and paste the code given below or type and hit enter.
npm install -g create-react-appIf you notice in the above code you will see ( -g) is written. Basically, this (-g) means that the package will be installed globally.
Update Create React App Globally
If you installed Create React App (CRA) globally, you need to update it manually.
Always try to use the updated version of your CRA to use the latest features and get better security.
To update CRA, first uninstall your existing CRA globally.
npm uninstall -g create-react-appAfter uninstalling, re-install CRA globally.
npm install -g create-react-appNPM will install the latest version of CRA globally for you with the above command. This way you can update CRA manually.
Project Structure and Configuration
Before configuring your React project with TypeScript, let’s take a look at what kind of files and folders the React project contains by default.
In the above screenshot, we can see that by default there are three folders and five files. The three folders are node_modules, public, and src respectively. The other files are .gitignore, package-lock.json, package.json, README.md, and tsconfig.json respectively.
Among the three folders, the first folder named node_module basically means all types of dependencies or libraries of Node.js. The packages you install with npm are stored in this folder.
The public folder will contain files like HTML, CSS, and images of your project. In React, there is no mandatory rule for which files should be placed in which folder. But if all the files are organized properly, the project will be much more efficient.
The src folder is your React app’s code, components, hooks, etc. Again, there is no mandatory rule. It is better to arrange it just for the convenience of working.
Among the remaining files package-lock.json and package.json files are various information files of your Node.js. There will be information such as the name, type, version, and which dependencies are used in your App.
And the tsconfig.json file is your TypeScript configuration file. This configuration file needs to be created when you are going to use TypeScript in a project. However, you don’t need to create a new tsconfig.json file in this project. Because when you create a React project with TypeScript template. It automatically configures the tsconfig.json file by default.
Adding TypeScript to Pre-Existing React Project
Sometimes we need to work with default React projects where TypeScript is not added beforehand. In that case, if we want to work with TypeScript, we need to add TypeScript to the project.
To add TypeScript to a pre-existing React project, first go to your project folder then open the terminal.
npm install --save--dev typescript @types/node @types/react @types/react-dom @types/jestAfter executing this command, TypeScript will be added to your React project.
Now you can rename your existing JavaScript files to TypeScript files (.js to .tsx). Here .tsx is the extension of the TypeScript file.
For example: Rename the App.js file to App.tsx in the src folder of your React project.
Or if you like, you can create a new file with a .tsx extension. Do whatever you like the most.
Conclusion
If all the above steps are done correctly, you can easily create a React project with TypeScript. I have tried to present all the essentials in a simple way.
Now start your React journey. I wish you all the best. And of course, continue your studies about TypeScript and React.
To learn more about React and TypeScript, check out the following resources:
FAQ
What’s the Difference Between create-react-app and create-react-app –template typescript?
Projects created via “create-react-app” allow you to write only vanilla JavaScript. Other side, “create-react-app –template typescript” allows you to write JavaScript and TypeScript.
Are there any Performance Differences Between using TypeScript and Plain JavaScript with React?
TypeScript is more memory efficient and makes code easier to read. It’s important to make your code easy to read, especially when you’re working on large and complex projects.
Plain JavaScript, on the other hand, can be used in relatively small and simple projects. Plain JavaScript will give you better speed than TypeScript. However, the speed can be seen as insignificant because there is not much difference.
Can I Add TypeScript to an Existing Create React App Project?
Yes. Open a terminal to your project folder. Then execute this: “npm install –save–dev typescript @types/node @types/react @types/react-dom @types/jest“. It will add TypeScript to the current React project.
Do I have to Use TypeScript for Every File in My Project?
No. Creating React projects with TypeScript lets you work with both TypeScript and plain JavaScript. You can work on different types of files at your convenience.
What is tsconfig.json?
tsconfig.json is the configuration file of your TypeScript project. All project-related settings will be found in this file. Which compiler, which version, which library is being used, and which folder is included all the information will be there.
Where Can I Find More Resources for Learning to Create React App with TypeScript?
You can check the official documentation for React and TypeScript. You can also ask on StackOverflow if you get stuck or have any questions.
If you want, you can ask your questions in the comment box below this blog post. I will try my best to answer your questions.
