Now for the rest of this course, I'm gonna have the simulator open on the window so that you can see exactly what I'm seeing, but like I mentioned in the last video you can definitely run the application directly on your phone. When I'm building my own mobile apps, that's usually the approach that I take.

So I'm gonna start by starting up the Expo server once again so if you are using VSCode, then you can type Control + Tilde to open up the terminal right here, and then just type expo start and that's gonna start up the server, and it's going to allow us to open up the simulator either on the computer if you've installed the necessary packages for that, or it'll allow us to start it directly on our phones.

So you can click Run on iOS Emulator if you're on a Mac and you've installed Xcode and all of the dependencies, you can run Android, or you can just take a picture, like we did in the last video.

So this is starting up the simulator here, and while that's going on, I'm going to open up Visual Studio Code. I'm going to close this, so we can close this, and the server's still gonna be running in the background and the way that you can do that is you can either click the X on the top right hand corner of the terminal or you can type Control + Tilde, and that toggles the terminal. So that is a really nice shortcut, that's usually what I use to open and close that.

So with all of that in place, let's take a look at the files that were created. So a few of them were generated that start with a dot. These are files in directories that you are not gonna have to do anything with, so you can open them up, and you can see that there are some base settings and some packager files. We are not gonna have to touch those throughout the entire course, and same thing with expo-shared, we're not going to have do anything with those.

Now, the assets directory, this is where we are able to put in any images, and those kinds of assets that we want to use inside of our application, and we are gonna be doing that as we go through the material. By default, we simply have a icon, and if you click this you will see that it's just a blank white icon and then a splash screen. Both of these are going to be things that we will replace whenever we get close to actually deploying our app to the App Store. So I'm gonna close those out, close our assets, and then node_modules.

When we ran our Expo install, our yarn install command, and installed all of our dependencies, the way that this works is the same exact process that a typical npm JavaScript or Yarn project is going to be run. The system is gonna look at the package.json file, so when Expo was created and this application was generated, it created this expo file for us. What it did is it came up with a path to the main app entry point, then from there it came up with a set of scripts. So this is why we were able to run expo start, and that is what starts the entire system for us, and you also have the ability to start in iOS, in web, or in Android, and you can also eject Expo out of the entire project and have it be a standalone, what's called a detached project. We're not gonna do that in this course, we're gonna be using Expo for the entire application.

Now below that, we have our dependencies. So we have Expo, right now while I'm filming this, this is version 36. We have React, React-Dom, React-Native, React-Native-Screens, and React-Native-Web.

Each of these are simply normal JavaScript dependencies. The way you can tell is if you, let's click React-Native-Screens here copy that, and switch to the browser, and go to npmjs.com, and paste in the React-Native-Screens, and you'll see that this is just a NPM library.

It's just a JavaScript code library, and you can see all about it and what it does. So each one of these is a dependency that is brought in and is used to build the applications. So when we ran the command to install the dependencies, what happened is the system looked at our package.json file, at our regular dependencies and our devDependencies, and it went up to NPM JS and it pulled down each one of those packages, and the only exception to that is if you notice here, React-Native is pointed to a direct GitHub link.

So it's going to GitHub instead of NPM to pull down the version of React-Native. So that is how the node_modules was created. It's the same for any type of JavaScript application. If you're taking this course, that means you took a standard React course, and you probably built out a number of React or JavaScript applications and you've already followed this process, so this is just a review for that.

So let's look at a few of the other files. It generated a gitignore file for us automatically, because it assumes that we're gonna be using version control so for that we are going to ignore node_modules. Any files or directories that start with .expo, because those are just gonna be used in our local machine along with a number of other files right here, and then the next file we're gonna take a look at is the app.json file.

Now, this is a very important file when it comes to deploying this application to either the Android Play Store, or to the iOS App Store, because this is where all your configuration values are gonna go. This is where you're going to say that we have a splash screen and we have a background color and this is where you're also going to put in some very important configuration options that we'll talk about later on in the course. We're not gonna have to worry about that right now as we're building it out, because what we're building right now is not gonna have to really touch this. This is what is used to generate the code that is going to get uploaded to those app stores.

Now we're gonna look at the very entry point to the application. This is gonna be the first component that we're gonna work with, and we can even work with it right now. So if you have the server running, I'll also open up the simulator here. Now you can see right here on the screen is it says open up App.tsx to start working on your app, so let's do that. So I can come right here and I can change this text, so I can say Text changed. Hit Save, and you'll see the simulator is automatically refreshing, and it is now reflected, and the changes that we made are now reflected on that screen.

We can also do things like change some of the styles. So say right now the background color is this #FFF, which is white. I can just change that to be red, and the background color is gonna change. So this is the first component we're working with. This is where the entire Expo system in React-Native is opening up this file, and this is the entry point for all of the code that we're gonna be building. So for right now you can just think of it at a high level as this is really the first screen or the first component that the application is going to work with.

Just a couple other files here that we're gonna go through. The README is pretty self-explanatory, that's just where you write in some of the explanations on what the program does. Now tsconfig, this is one we might go and update as we are working through the program. The tsconfig file is specific to typescript, so the way that it works is because this is a typescript application, we are going to be writing typescript code and that is going to be translated down into JavaScript code. The compiler, or I should say the text editor, is going to analyze all of the code we're writing in realtime.

As we're typing things out, let's say that we go to this app file right here, say that I go and I type const x equals, and I just say it's equal to asdf. If I try to say const x equals, and then something else here, you'll see that we get errors, and these are typescript errors.

This is the editor telling us, hey, we looked at your typescript code, and it looks like it's not working properly. Another would be if we say, oh you know what? And the reason why this is an error is because you can't override, you can't declare two const variables of the same name. So let's say that it's a specific type error. So we say, you know what? X is supposed to be a number.

Well, now we get an error, because x is not a number, we're saying that it's a string. That's typescript at work inside of the application giving us some hints on how we should be writing our code. So because of that, the editor is giving us those nice hints, tsconfig is where we can customize what we want typescript looking at, and how we want to it to work. So any custom overrides or anything like that are gonna be placed inside of the compiler options list here, and we may or may not have to make a few of those changes as we go through the program.

Now, as you make changes to that tsconfig file, one important thing to note is that you will have to stop and then restart the server in order for those changes to be picked up. The tsconfig file is not watched the way, say, the App.tsx file is watched, so it's not going to refresh, you have to restart the server, just a little note.

Then lastly, the Yarn lock file. So when we're working with a Yarn project, the way that it works is when we run the Yarn install command or expo install command and we install all of the dependencies, it generates the node_modules directory which we've already talked about, that's where it's bringing in all of the code from NPM. But it also creates this yarn.lock file. What this does is it gives us a much deeper look into not just the dependencies we brought in, but also all of the nested dependencies.

So as you may have noticed, in our package.json file, this is our list of high-level dependencies, but each one of these libraries has their own set of nested libraries. What yarn.lock does is it gives us the ability to look at all of those nested dependencies, what their versions are, and what the source is. You never make any changes to this yarn.lock file, it's simply there for you to reference. The other reason why the yarn.lock file's important is that when you push up your code to GitHub and you're working on a team, and other team members are pulling down that code to work on features for your application, the yarn.lock file is included in version control.

So when they run their own yarn install command, they're not going to have any of those node modules, so the system's gonna look at the package.json file and the yarn.lock file to know and understand which dependencies to install, and the same thing's going to happen when we run the build that eventually generates the code that gets pushed up to the app store. So that was a nice little deep dive into working through all of the files that were generated when we run that expo init command, and when we generate all of the dependencies. So with all of that in place, let's start building out a few screens.