How to Create a React Native App Project With Expo

Creating your project with Expo

Get the project source code below, and follow along with the lesson material.

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Lesson Transcript

[00:00 - 00:06] In this lesson, we start from the absolute basics. We are going to install all the necessary libraries and set up our project.
[00:07 - 00:15] If you have previously worked with JavaScript, then you probably have no install on your device. If not, please visit the Node.js website and install it.
[00:16 - 00:26] If you want to check your current Node.js version, simply use this command in your terminal. I recommend using Node.js version 10, since this is the one I will be using in this course.
[00:27 - 00:48] For creating our Reignative project, we are going to use Expo, which is an open source platform for making native apps for Android and iOS using JavaScript and React. There is also a way to create projects using Reignative command line interface, but it has some drawbacks and if you are a beginner, I would not recommend doing it that way just yet.
[00:49 - 01:16] Expo simplifies most of the time-consuming work, like building your app and releasing it to the App Store and Google Play. It also doesn't require you to modify any of the native code using Xcode or Android Studio. Before creating the project, we need to install Expo command line tools using this command. Once this is done, we have all the tools we need to create our project. Open the terminal as your desired project destination and run this command.
[01:17 - 01:26] When creating our project, we have a few templates to choose from. We are going to select blank. If you prefer TypeScript, there is also a template for you.
[01:27 - 01:36] After a few minutes, your project will be ready. You should see the following output. It is always a good idea to check if you are able to run your app and see if it works.
[01:37 - 01:47] If you want to open up on an iOS simulator, you can run the following command. You can also open the app on an Android emulator by running the command npm run Android.
[01:48 - 01:59] Since I'm on the Mac, I prefer using the iOS simulator because it performs better and loads faster. After a successful build, you should see your application.
[02:00 - 02:15] If everything works, take a look at the project in your editor. Starting at the bottom, we have our packet JSON file where we can see a list of all available scripts and currently installed dependencies. Installing any new library will update this file.
[02:16 - 03:09] In every Expo project, we also have an app JSON file, which contains all the metadata for our app, like the app's name, bundle indentifiers, and more. During this course, we are going to edit this file several times. Lastly, we have our appjs file, which is an entry point for our application. We'll start building our application from here. As you can see, changing text inside the text component immediately changes content in our app. We can delete the status bar component, since we are not going to use it in our project. One thing I like to start with is creating a source folder where all our components and screens will be. At this point, we are almost ready to get started with our application. In the next lesson, we are going to add some of my favorite libraries that make the whole experience of developing apps more pleasant and elegant.
[03:10 - 03:11] Thank you and see you in the next lesson.

[00:00 - 00:06] In this lesson, we start from the absolute basics. We are going to install all the necessary libraries and set up our project.

[00:07 - 00:15] If you have previously worked with JavaScript, then you probably have no install on your device. If not, please visit the Node.js website and install it.

[00:16 - 00:26] If you want to check your current Node.js version, simply use this command in your terminal. I recommend using Node.js version 10, since this is the one I will be using in this course.

[00:27 - 00:48] For creating our Reignative project, we are going to use Expo, which is an open source platform for making native apps for Android and iOS using JavaScript and React. There is also a way to create projects using Reignative command line interface, but it has some drawbacks and if you are a beginner, I would not recommend doing it that way just yet.

[00:49 - 01:16] Expo simplifies most of the time-consuming work, like building your app and releasing it to the App Store and Google Play. It also doesn't require you to modify any of the native code using Xcode or Android Studio. Before creating the project, we need to install Expo command line tools using this command. Once this is done, we have all the tools we need to create our project. Open the terminal as your desired project destination and run this command.

[01:17 - 01:26] When creating our project, we have a few templates to choose from. We are going to select blank. If you prefer TypeScript, there is also a template for you.

[01:27 - 01:36] After a few minutes, your project will be ready. You should see the following output. It is always a good idea to check if you are able to run your app and see if it works.

[01:37 - 01:47] If you want to open up on an iOS simulator, you can run the following command. You can also open the app on an Android emulator by running the command npm run Android.

[01:48 - 01:59] Since I'm on the Mac, I prefer using the iOS simulator because it performs better and loads faster. After a successful build, you should see your application.

[02:00 - 02:15] If everything works, take a look at the project in your editor. Starting at the bottom, we have our packet JSON file where we can see a list of all available scripts and currently installed dependencies. Installing any new library will update this file.

[02:16 - 03:09] In every Expo project, we also have an app JSON file, which contains all the metadata for our app, like the app's name, bundle indentifiers, and more. During this course, we are going to edit this file several times. Lastly, we have our appjs file, which is an entry point for our application. We'll start building our application from here. As you can see, changing text inside the text component immediately changes content in our app. We can delete the status bar component, since we are not going to use it in our project. One thing I like to start with is creating a source folder where all our components and screens will be. At this point, we are almost ready to get started with our application. In the next lesson, we are going to add some of my favorite libraries that make the whole experience of developing apps more pleasant and elegant.

[03:10 - 03:11] Thank you and see you in the next lesson.

LessonEditor