How to start using TypeScript With React NativeFebruary 25, 2021 Publish By : EXPERT APP DEVS 5 min read Viewed By : 990
What is TypeScript -
Typescript has following important features -
- TypeScript also supports JS libraries.
- TypeScript is portable.
What is React -
React is building to work with different browsers, operating systems, and devices. React is for - you can learn once and code anywhere.
If you are familiar with web development concepts then for you it is easy to understand. It has following functionality -
- Learn once write everywhere
For react you must have basic knowledge about following -
Why we use TypeScript with React Native -
Someone truly says that TypeScript and React native development match are made in heaven, What is the meaning of a required property? TypeScript will tell you have a typo somewhere. If you do not know which properties you need then you find the list of properties or it can autocomplete.
TypeScript and React are a perfect fit for application creation. If you combine both technologies together then you get a huge productivity in applications.
Here we assume that you are familiar with both React and TypeScript. So here we will focus on the combination of the technologies.
You can use TypeScript features only where it is needed. TypeScript is a brilliant type language where you get a lot of features like autocompletion and type safety.
By Using very little setups and tools. TypeScript has a transpiler and a JSX compiler, so the only thing we need is some extra bundling.
Important part of React -
- Prop Types
- Render Props
- Children Render Props
Install and create react app with typescript -
Here we are going to install the react and typescript by using npm or yarn which one is already installed in your machine, so let’s start.
Following is a command for creating apps.
yarn create-react-app app_name --template typescript
npx create-react-app app_name --template typescript
Following are the main files -
- .tsx files
How to start the server -
For running the server you need to open your terminal and run the following command.
yarn start #or
Why TypeScript -
There are many benefits of using TypeScript. Let's discuss some of the following.
- Code Suggestions
- Highlights the error
- Documented code
Components in react -
Following are some of the main components used with react, so let’s see some of them.
- Functional Component
- Class Component
- Default props
How to start using typescript with React Native Development-
I think now you understand the importance of typescript, now typescript is in demand and react native mobile app development is also in demand, so let’s take a tour for integrating typescript and react native together…
Now I am going to start the project which uses the react native and typescript, here we create a very basic project where you see how we integrate typescript and react native, so follow each step carefully for and step by step and if you face any issue please comment.
Note - for running this project successfully it is important that your react native environment is set up properly, so i assume that your setup is ready to run this project.
Step 1 : Creating the react native typescript project
Here we are going to create a new react native mobile development project with typescript, for creating a typescript project you need to run this command.
npx react-native init MyApp --template react-native-template-typescript
After this your screen is look like -
Step 2 : Check the react native typescript project directory
Now you need to check the folder structure of your project of your react native mobile development project, here you see a folder _tests_ which looks like.
Step 3 : Run the server
In this step we are going to run the npm server, for running the server you need to open the terminal and then run the command.
Step 4 : Migrating the app file to typescript
Now you need to rename your App.js and __tests_/App-test.js files to App.tsx. index.js needs to use the .js extension and now you create all your files with the .tsx/.ts extension, like below image.
So for now this is done, i hope you like the blog then like and share the blog. if any query then please comment.
Need a consultation?
Drop us a line! We are here to answer your questions 24/7.