Up & Running with React Native & TypeScript

nader dabit
Instructornader dabit
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

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

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.

egghead
egghead
~ 22 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today