1×
Become a member
to unlock all features
Autoplay

    Up & Running with React Native & TypeScript

    nader dabitnader dabit
    react-nativeReact Native
    reactReact
    typescriptTypeScript

    In this video we learn how to get started in a new React Native project using TypeScript, create types, run, & refresh the application.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    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.

    Discuss

    Discuss