00:00:02 Before we start setting up our application, we first need to set up and initialize our project using Expo.

00:00:10 Expo is an ecosystem of tools that helps you develop, review, and deploy native applications with React that run on Android,

00:00:20 iOS, and on the web.

00:00:22 So to get started, let's head over to the docs.

00:00:26 And right at the top, you'll see a quick start.

00:00:29 MPX create-expo-app at latest.

00:00:33 So let's copy it or follow along and type it with me by heading over to your IDE and creating a new empty folder, which you can call however you'd like.

00:00:43 I called it fast food.

00:00:44 Throughout this course, you'll see me use WebStorm, a truly powerful JavaScript and TypeScript IDE.

00:00:50 For the longest time, WebStorm was a paid editor, which means that mostly companies and enterprises used it.

00:00:57 But as of recently, it became completely free for non-commercial use.

00:01:01 And for that reason, I would highly recommend you to check it out and download it.

00:01:05 I'll leave the link down in the description.

00:01:07 So whenever there's some interesting tooltips or visual hints happening right here within the editor, if you don't have it on yours,

00:01:13 it's most likely coming from WebStorm.

00:01:15 Oh, and on top of it, I'll also show you how to use Juni, JetBrains's smart coding agent.

00:01:21 It'll significantly speed up your coding process where you can just tell it what to do and it'll apply the changes across hundreds of files within your application,

00:01:30 not just changing a couple of lines within a single file.

00:01:33 So more on that soon.

00:01:34 So once you've set it up, you can open up a new terminal window and we can set up Expo.

00:01:40 I'll do it by pasting the command I just copied over from expo, mpx create-expo-app-add-latest, and I'll also add the dot slash at the end so it creates

00:01:51 it in this current folder called fastfood that I created before.

00:01:55 And just press enter.

00:01:57 It'll ask you whether you want to install the expo installer.

00:02:00 So I'll say, yes, please do.

00:02:02 And then it'll extract all the files and the run MPM install for you to automatically install all the dependencies needed for you to run your application.

00:02:11 While it's getting installed, let's create an account on AppRite as we'll need it later on while building our app.

00:02:17 I've put a special link down in the description that'll let you follow along and see exactly what I'm seeing in this video.

00:02:24 And even though AppRite is completely free, you'll even get some additional free credits if you ever decide to take your app public.

00:02:31 Just create an account, as we'll use AppRite to authenticate our users, store menu items, and manage our images.

00:02:39 We'll also use Sentry, an application monitoring software considered not bad by 4 million developers.

00:02:46 And it's my favorite way of shipping bug-free production code.

00:02:51 I also use it on jsmastery.com.

00:02:54 Sentry is also free, but if you think you'll need 50,000 more errors, you can get them with my special link in the description.

00:03:02 Then sign up with Google or GitHub, and you're good to go.

00:03:06 Oh, and Sentry recently announced Seer.

00:03:09 their AI agent that solves the bugs for you.

00:03:12 So I'll show you how to use it too.

00:03:14 Now, the first command we have to run is mpx expostart.

00:03:19 Now, mpx stands for download if necessary, and then execute the expostart command.

00:03:26 This command will start the Metro Bundler, the JavaScript Bundler that ships with Expo.

00:03:31 You'll see a couple of things appear right here.

00:03:34 First, we have a large QR code, and then we have shortcuts for various actions, such as opening on Android, iOS, or web,

00:03:42 opening the debugger, reloading the app, and doing all sorts of things.

00:03:47 But the beauty of Expo is that you don't need to rely on heavy tools like Android Studio or Xcode.

00:03:53 Instead, we can opt for the easiest method to develop with React Native, which involves using the ExpoGo app on your phone.

00:04:01 And it doesn't matter whether you're using an Android or iOS.

00:04:04 ExpoGo is a mobile app that lets you quickly develop test and prototype applications on both Android and iOS built with JavaScript and React Native.

00:04:15 So you just have to head over to your App Store on your device, whether it's the Google Play Store or the Apple's App Store,

00:04:21 and then search for Expo Go and just install it.

00:04:25 Once you install it, just open it up, and you'll have to create an account.

00:04:29 Once you do that, you can see that it says that we can run MPX Expo Start, which we have already done.

00:04:34 And then if you're on Android, you will be able to scan your code directly from the app.

00:04:39 And on iOS, you can just open your camera app, and then scan over the QR code.

00:04:45 And there you go.

00:04:46 If everything worked out well, your app should now be running on your phone.

00:04:50 It is possible that you have to enable some additional settings on your device.

00:04:54 On the iPhone, for example, I know that you have to head over to the settings, head over to the Expo Go application, and then allow it access to the local

00:05:03 network if it hasn't asked you that already.

00:05:05 Also, you can search for VPN, And head over to the setting that you can see and then disable it.

00:05:12 Sometimes if it's turned on, it has trouble connecting with the application that we're running.

00:05:16 With all of that done, you should have your application up and running on your phone.

00:05:21 Now, before we start adding all of these amazing features, let's open up our file explorer and let me teach you what all of these files that got installed

00:05:30 for us by Expo actually do.

00:05:32 Let's start near the bottom where we have our tsconfig.json.

00:05:38 This file contains the rules that TypeScript will use to enforce type safety throughout the project.

00:05:44 Then there's the package.json, which contains all of the project's dependencies, scripts, and metadata.

00:05:52 There's also the app.json, which contains the configuration options for the project and is called the app config.

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

00:06:07 And a lot of stuff is happening in this file.

00:06:10 So let's go through it together.

00:06:11 The Expo object is the root object containing all of the app's configuration.

00:06:16 It contains the app's name, which is very important as that is the name that'll appear on the home screen or the app list when you actually load it within

00:06:24 your phone.

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

00:06:30 It's used for defining the URL of your project if you're running this app on the web.

00:06:35 Then there's the version of your application, the default screen orientation mode, which I will leave as portrait, Then there's the path to the icon,

00:06:44 a scheme to enable deep linking.

00:06:48 This will be very important later on, so just change it to the same thing that I have right here, so you can follow along nicely.

00:06:54 It is just fast food.

00:06:55 Then we have the user interface style, which determines the UI mode, either automatic, light or dark.

00:07:03 And then there's this cool new Arch thing enabled, which enables the new architecture of React Native for better performance.

00:07:10 It actually includes a lot of stuff that makes your app run faster.

00:07:14 Moving ahead, we have the iOS and Android specific settings.

00:07:19 For example, you can decide whether your app supports tablet devices or not.

00:07:24 And then here, you can choose the icons for your Android devices.

00:07:28 There are also settings for the web.

00:07:30 Now, coming out of the app.json, we have a few more files like the eslenconfig, which just makes sure that our code is clean.

00:07:39 A getignore file, which ignores environment variables and makes sure that we don't push them over to production accidentally.

00:07:45 There's also the scripts folder, which has a single script for resetting the project to bare minimum code.

00:07:52 And then there's some boilerplate code like hooks, constants, components, assets, app, and more.

00:07:59 As you can see within the app, there's also a tabs folder in parentheses, which is a group within which we have more files.

00:08:08 If you head over into the tabs index.tsx and open that file, now if we change this text right here from welcome to welcome to RN,

00:08:19 as in React Native, the change will happen instantly on your device.

00:08:23 There's a lot of code, but we don't have to dive into this as I'll teach you how to do everything from scratch.

00:08:31 So let's run this single script that was provided to us by Expo called reset project.

00:08:38 This will reset the app to the bare minimum status.

00:08:40 So just open up your terminal, press control C to stop it from running, and then run npm run reset project.

00:08:49 Just like that.

00:08:50 It'll ask you whether you want to delete all the files and I'll simply say, yes, delete them.

00:08:57 Perfect.

00:08:58 Project reset complete.

00:08:59 Next run MPX Expo start to start it.

00:09:03 Then edit the app index DSX and then delete the app example directory.

00:09:09 Let's do just that.

00:09:10 MPX Expo start.

00:09:13 It'll open it up right here.

00:09:14 And you can press R to reload the app on your phone.

00:09:18 It'll ask you whether you want to give it your permissions.

00:09:20 I'll say yes.

00:09:21 And now we can delete the app example as we no longer need it.

00:09:26 And then if you head over to app index.tsx, you can now change this over to welcome to react native.

00:09:36 And there you have it.

00:09:37 In a matter of seconds, the text got changed.

00:09:40 This leaves us with a bare minimum app so that we can extend it and turn it into your mobile app.