Up & Running with React Native & TypeScript
React Native
React
TypeScriptIn this video we learn how to get started in a new React Native project using TypeScript, create types, run, & refresh the application.
'/%3E%3C/svg%3E)
Level Up!
Access all courses & lessons on egghead today and lock-in your price for life.
Autoplay
React NativeReactTypeScript
Code
You must be a Member to view code
Access all courses and lessons, track your progress, gain confidence and expertise.
Transcript
Instructor: 00:01 To get started, we'll initialize a new React Native project running React Native Init and the name of the project. To make this a TypeScript project, we'll also add the -- template flag set to TypeScript.
00:20 Next, we'll change into the directory and take a look. Here, we'll see the files that we have in our project, included are app.js, app.tsx, and this additional setup.js file.
00:38 To complete setting this project up for TypeScript, we can now execute the setup.js file. After running setup.js, we'll notice a few files have been removed from our project including app.js and the read me.
00:54 Next, we'll open the project in our text editor and test it out. We'll first create a type to describe our state. In our state, we'll set a name property as a string and an ID property as a number.
01:34 Next in our class, we'll initialize some initial state. Notice that if we set the ID property to a string, we could get an error message that says type string is not assignable to type number.
01:53 If we try to assign a number to the type name, we'll get an error message that says type number is not assignable to type string.
02:08 To run the project, we can still run React Native Run iOS or React Native Run Android. We can continue to make changes in our file and refresh our application using the same React Native workflow that you are used to if you've been working with JavaScript.
