Getting Started with Expo

[00:00:00]
>> So, some of you have already set up your Expo environment and if you have that's great. But I'm just gonna run this through from scratch, so we can do it together if you haven't yet. Cool, so find a good place. Yeah, so first thing, basically, I always refer to the React Native docs or Expo docs.

[00:00:23]
Like these React Native docs particularly are the bread and butter. I use them all the time. And the best guides in my opinion are these Quickstarts? So I always use these because they update these whenever they release new versions. Cool, so basically what we are doing is this.

[00:00:44]
So we'll need a computer, a smartphone and node. If you already have node installed, that's great. If you don't, you'll have to install it. You can check if you already have node installed by typing node that actually into your terminal. If it returns the node version number, you're golden.

[00:01:01]
If not, you might have to go and install it. And if you need to install node, you just go send node website and download this here. I always go for the LTS version, LTS stands for long term support. So generally the even numbers were node our long term supports and the odd ones are not.

[00:01:23]
Cool, alright, so next thing we do is we install the expo-cli and we install this globally so we could have the expo-cli command available for us everywhere. Depending on your internet connection this might take sometime. Cool, we're done, right. And now we're just gonna initialize our project. So let's do expo init and then your project name, so I'm gonna name mine, AwesomeProjectExpo.

[00:02:00]
Right and you'll get some options here. And you can have a TypeScript, if you're TypeScript fan, you can have TypeScript already added and you can also have react navigation or the pre configured. We're going to address react navigation ourselves later. So we're just gonna go with the most blank template.

[00:02:22]
So now, you can use yarn. If you have yarn installed or just, I think it's actually npm run start, I'm gonna have to fix my documentation. Cool so this opens to the package m, now we're halfway there. So now what you do, is you're going to be using your phone.

[00:02:43]
You can take your phone, fact, I'm gonna mirror mine so you can see what I'm up to. So I'm gonna go to the App Store, and if your App Store. If you're on Google, go on Google Play and then just search for Expo. And we'll have an application that looks like this, it's called the Expo Client.

[00:03:04]
And install it if you're done already otherwise you can open it. You might have to log in as well. Cool, so now we have this installed and now notice that this debug screen that Expo launched for us has this handy QR code. So what we do now is, if you're on an Android phone, there will be a button on your screen that says scan QR code.

[00:03:29]
But if you're on an iOS phone, like me, What you do is you open the camera app. And it will give you a little push like push notification that tells you to open the app in Expo. Now you can see in the bottom it says building JavaScript bundle, this is actually here.

[00:03:43]
This is what it's doing, cool and that's basically our hello world application, lets have a look at the folders structure that is created So this is all this creative which is actually not a lot. If you're already familiar with JavaScript, you definitely know node modules. So node modules is basically where all the many modules that have installed for Expo and for React Native, then we have this assets directory.

[00:04:18]
So notice this was the screen that we had earlier while Expo was building. And this is basically where you can add all the assets that you want to include the applications, any images, any funds, any icons. And then these two are just expo specific, little folders that you can pretty much just ignore for now.

[00:04:40]
Then we have some babel and app configs, which we can also ignore. The main thing, the only thing that we really care about here is this, which is our App.js, which is where we'll start writing all our code.