00:00:02 Let's get started with developing our app by first setting up our development environment.

00:00:07 I've created a new empty folder on my desktop, called it Mobile Movie App, and opened it up within my IDE.

00:00:13 Throughout this course, I'll be using WebStorm, the most powerful JavaScript and TypeScript IDE.

00:00:19 Until recently, it was paid, so not everyone was able to use it.

00:00:23 But as of now, it is completely free for non-commercial use.

00:00:27 I'll leave the link in the description.

00:00:29 You can check it out and download it for your operating system.

00:00:32 Once you install it, you can set it up to look exactly how we want it to look.

00:00:35 Currently, I'm using the Material Deep Ocean theme.

00:00:38 And lately, I prefer using it over VS Code.

00:00:41 So once you create an empty folder in whichever editor you're using, we can create our new React Native application.

00:00:47 If you head over to reactnative.dev, click Get Started, you'll notice that there are a couple of different ways in which you can initialize your React

00:00:56 Native projects.

00:00:56 And as I've mentioned in the crash course, the recommended way, of course, is Expo.

00:01:00 It'll provide us with a lot of important features out of the box, making our development experience that much better.

00:01:07 So to start your React Native app with Expo, the only thing you have to do is run this command in your terminal.

00:01:13 So let's write it together by opening up the terminal and running mpx create-expo-app at latest and then add dot slash to install it in the current directory.

00:01:25 Now, it'll proceed to install all the necessary packages that we need to run our React Native application.

00:01:30 And you can see that it's also starting to create our file and folder structure.

00:01:34 Very soon, I'll explain exactly what all of these files and folders mean and what they do.

00:01:39 Once it gets installed, you'll be able to run it.

00:01:42 Now, going back to the docs, it says, hey, run this command and then continue with Expo.

00:01:47 And when you click it, it'll show you how you can set up your development environment no matter which device you're using.

00:01:52 In this case, I'll be using a real iOS device, but you can also use an Android.

00:01:57 Then it's asking you how you would like to develop, and we'll be using ExpoGo.

00:02:01 So depending on your operating system, you'll be able to scan the QR code to download it or visit the ExpoGo page on the App Store.

00:02:08 Once you install it, you'll be able to create your account and your screen should look something like this.

00:02:13 So the first thing we have to do is start a development server by running mpx expostart.

00:02:19 So back within our terminal, let's do just that.

00:02:21 Run mpx expostart, and you'll be able to see different letters that allow you to do different things, but you don't have to press any of them.

00:02:29 What you have to do is just scan this QR code.

00:02:32 So I'll open up my camera and scan it right here.

00:02:36 It'll say bundling.

00:02:37 And in a couple of seconds, the app will run on your phone.

00:02:41 There we go.

00:02:42 We are alive.

00:02:43 As I mentioned, we don't need to rely on heavy tools like Android Studio or Xcode.

00:02:48 Instead, we're using this easiest method to develop apps with React Native, which of course includes this Expo app on your phone.

00:02:55 And as you can see, I can switch between different pages, touch different elements on the screen, and it feels like I'm using a real mobile application.

00:03:03 Now, if you're not seeing what I'm seeing on the screen, then that must mean that you're having some problems.

00:03:08 And thankfully, there's a couple of quick fixes.

00:03:10 First, make sure that you're on the same Wi-Fi network on your computer and your device.

00:03:16 And if it still doesn't work, it may be due to the router configuration, common for public networks.

00:03:21 On iOS, you might have to grant the local network permission to the ExpoGo app, or you can try using this mpx-expo-start-dash-dash-tunnel,

00:03:30 or just read whatever the Expo app is saying and try resolving it step by step.

00:03:34 But with that in mind, we are now ready to make our first change.

00:03:37 To do that, we can head over within our app, tabs, index.tsx, and if you see this welcome-themed text, you can say something like,

00:03:47 welcome to my movie app, because that's exactly what we're building.

00:03:53 If you save it, you can see that it'll change immediately, and we can remove this wave.

00:03:57 So this means that we have established a connection between our code and our device, so we can see all the changes live.

00:04:04 Now that our project is running, let me quickly explain what each one of the files and folders here does, so you have a better understanding of the entire

00:04:11 code base, so you can more confidently make changes to your application later on.

00:04:15 Let's start from the bottom to the top.

00:04:17 First, we have the tsconfig, which contains the rules that TypeScript will use to enforce type safety throughout the project.

00:04:24 And no worries, you don't need to know TypeScript to be able to proceed with this course.

00:04:28 I'll teach it to you as we go.

00:04:30 Next, we have the readme, which is a text file containing some information about the project.

00:04:35 Then there's the package.lock and package.json, which contains the project scripts, dependencies, and additional metadata.

00:04:43 After that, there's the app.json file.

00:04:47 which contains the configuration options for the project and is often called the app config.

00:04:52 These options change the behavior of your project while developing, building, submitting, or updating your app.

00:04:59 Everything starts with an expo object, which is the root object containing all the app configuration.

00:05:05 Then, of course, there's the app name shown on the home screen or the app screen.

00:05:10 Very important in case you want to make it custom.

00:05:13 Then there's the slug, which is a unique identifier for the project used by Expo.

00:05:17 It's used when defining the URL if you want to show your project on the web.

00:05:21 There's the version of the project, the orientation, which defines whether your app should initially open in portrait, landscape,

00:05:29 or the default screen orientation mode.

00:05:31 The icon is the full path to the image you want to display.

00:05:35 The scheme is a custom URL to enable deep linking.

00:05:39 In this case, let's set it to movies.

00:05:42 So later on, we can do something like movies colon forward slash forward slash some path.

00:05:48 There's also the user interface style, which we can leave to automatic.

00:05:52 This determines the dark or light mode.

00:05:55 And then there's this new arch enabled, which enables the new architecture of React Native for better performance.

00:06:01 It was that thing that I talked to you about in the crash course part, regarding JSI, turbo modules, and more.

00:06:07 And what's best is that Expo immediately supports this new architecture without you having to do anything.

00:06:14 Along with this, you're also getting the newest React features like transitions.

00:06:18 Moving on, we have iOS-specific features that you can extend specifically on iOS devices.

00:06:24 In this case, you can define whether it supports tablet devices.

00:06:28 And then there are also Android-specific properties, such as app's adaptive icon, path of the image, color, and more.

00:06:36 And similarly, there's also additional options for the web.

00:06:39 Now, coming out of the app.json, There's of course the gitignore, which allows us to ignore some environment variables or git-related things.

00:06:48 There's the scripts folder, currently having just one part, which allows us to reset the project to the bare minimum code.

00:06:54 And then there's some boilerplate code, like custom hooks, constants, some components, assets, and finally the app folder,

00:07:04 which allows us to route to different pages, similarly to Next.js.

00:07:09 or in this case, we're not calling them pages, we're calling them screens.

00:07:13 You can see this tabs group, in which we have more files.

00:07:16 Within here, you'll be able to manage the layouts for different pages, and very soon, I'll show you exactly how it works.

00:07:23 There is a lot of code, but you don't have to memorize all of this boilerplate code, because I'll teach you how everything works from scratch.

00:07:31 So let's use this nice script that Expo has given to us called reset project, which will set the project to its bare minimum.

00:07:39 I'll stop the application from running and then I will run npm run reset-project.

00:07:45 It's going to ask you whether you want to move everything to the example folder.

00:07:49 I'll say no, just go ahead and delete it.

00:07:52 So as you can see, all of these folders have been deleted and some new files, very bare bones, have been created.

00:07:58 We can once again run mpx-expostart to start the development server.

00:08:05 And then you can just press the letter R to reload it automatically on your device.

00:08:09 Now, if you check it out, it'll look much simpler.

00:08:12 The app only consists of a very simple layout and an even simpler index.tsx page where we can say welcome, and we can dive right into extending it to build

00:08:24 our movie application.

00:08:25 Great job on completing the setup.