1 00:00:02,240 --> 00:00:05,200 So now that we have an idea of what React Native is, 2 00:00:05,390 --> 00:00:11,330 we can get started with React Native and I'd say let's get started by building our first little React 3 00:00:11,330 --> 00:00:15,530 Native app or by getting our first React Native app up and running. 4 00:00:15,620 --> 00:00:20,750 So we want to create a new React Native app and as it turns out, we actually got two options for that. 5 00:00:21,750 --> 00:00:27,690 If you search for React Native, you'll find the official page and on that official page if you click, 6 00:00:27,690 --> 00:00:31,520 on get started, you actually have two options here. 7 00:00:31,560 --> 00:00:36,630 You have the Expo CLI quick start and the React Native CLI quick start. 8 00:00:36,630 --> 00:00:43,080 Now what's the difference and which approach should you use and why and what will we use in this course? 9 00:00:44,400 --> 00:00:51,180 So we can use the Expo CLI, the expo tool for generating and managing our React Native app or we use 10 00:00:51,180 --> 00:00:52,870 the React Native CLI. 11 00:00:53,010 --> 00:00:58,260 Now if you first have that choice, you would probably go for the React Native CLI because you want 12 00:00:58,260 --> 00:01:00,810 to build a React Native app after all, right? 13 00:01:00,870 --> 00:01:03,020 Well let's have a look at what expo is. 14 00:01:03,090 --> 00:01:06,150 It's a third-party service which is completely free to use, 15 00:01:06,150 --> 00:01:11,430 you don't need to sign up to get started and you don't have to pay to build an app which you can publish 16 00:01:11,430 --> 00:01:12,150 to the App Store, 17 00:01:12,180 --> 00:01:18,580 so it's really free to use. What expo gives you is kind of a managed app development workflow. 18 00:01:18,630 --> 00:01:24,840 It takes a lot of the complexity away from you because building React Native apps can be very complex, especially 19 00:01:24,840 --> 00:01:31,410 when it comes to integrating certain native device features like accessing the camera and expo simply 20 00:01:31,410 --> 00:01:33,070 gives you a lot of convenience there, 21 00:01:33,090 --> 00:01:37,920 it makes development of React Native apps a breeze and so much easier. 22 00:01:37,920 --> 00:01:44,820 The downside is that you're limited to the expo ecosystem because expo in the end is like a wrapper you 23 00:01:44,820 --> 00:01:52,110 could say around your app, a thin extra layer between your app and the native raw React Native experience 24 00:01:52,680 --> 00:01:57,810 and you still get a native app in the end and you still use React Native under the hood, that's all 25 00:01:57,810 --> 00:02:04,530 happening but expo abstracts away some of the complexity, which also means it of course removes some 26 00:02:04,530 --> 00:02:11,450 of the finegrained control you would normally have if you build a raw React Native app because if we 27 00:02:11,450 --> 00:02:17,390 have a look at that other workflow, the React Native CLI, that's in the end managed by the React Native team 28 00:02:17,420 --> 00:02:19,580 or parts of the React Native community 29 00:02:19,640 --> 00:02:25,670 and there you have a barebone development setup, which means you get a native app, you need to install 30 00:02:25,700 --> 00:02:32,420 Android Studio, you need to install Xcode to build that app and you need to configure and manage a lot 31 00:02:32,420 --> 00:02:33,190 on your own. 32 00:02:33,290 --> 00:02:38,990 As soon as you start adding certain native device features, like let's say as soon as you want to use 33 00:02:38,990 --> 00:02:44,540 the device camera, you will have to bring in third-party packages where the set up process can be quite 34 00:02:44,540 --> 00:02:47,600 complex and therefore, this can be more cumbersome. 35 00:02:47,600 --> 00:02:53,570 You have pretty much no convenience or utility features to tap into but of course, the advantage would 36 00:02:53,570 --> 00:03:00,050 be that you have full control, you can control every tiny piece, you can easily write your own native 37 00:03:00,080 --> 00:03:03,210 Android and iOS code and connect this to your Javascript code, 38 00:03:03,230 --> 00:03:05,390 that's not really possible with expo. 39 00:03:05,600 --> 00:03:10,340 So if you are a super advanced developer and you already know you'll be building a very complex app 40 00:03:10,370 --> 00:03:17,270 where you need to do a lot of manual workarounds, a lot of finegrained configuration, then you definitely 41 00:03:17,360 --> 00:03:20,150 want the full bare bones experience on the right. 42 00:03:20,240 --> 00:03:25,820 If you are getting started or if you're building a normal app, then the Expo CLI will very likely 43 00:03:25,820 --> 00:03:27,020 give you everything you need, 44 00:03:27,050 --> 00:03:32,060 it gives you wrappers for the most common native device features you need, like using the camera, like 45 00:03:32,060 --> 00:03:32,870 using maps, 46 00:03:32,870 --> 00:03:35,330 that's all made super simple 47 00:03:35,330 --> 00:03:42,740 and if you ever get to a point where you find out oh I need more control, then you can always also switch 48 00:03:42,800 --> 00:03:45,620 from the expo workflow to the native workflow, 49 00:03:45,620 --> 00:03:52,160 you can eject and then you have the full flexibility. Therefore, nothing speaks against getting started 50 00:03:52,160 --> 00:03:56,840 with expo, you can always switch to the other experience if you need to and we'll use expo in this 51 00:03:56,840 --> 00:04:02,030 course because it's simpler, because it gives you everything you need for most apps, because it's so much 52 00:04:02,030 --> 00:04:05,370 more convenient to work with it and because you can always switch. 53 00:04:05,510 --> 00:04:11,750 Now later down in the course, I will also give you an introduction to the more bareboned workflow and 54 00:04:11,840 --> 00:04:17,850 what that would mean for you but for the majority of the course, we'll work with expo. Behind the scenes, 55 00:04:17,850 --> 00:04:24,390 this expo tool work such that you have your native device or your simulator, so your iPhone or your Android 56 00:04:24,390 --> 00:04:27,740 phone and you have your app, your React Native app 57 00:04:27,750 --> 00:04:28,700 you'll be writing, 58 00:04:28,710 --> 00:04:35,310 so your Javascript code where you write your React Native app. Now on your native device or on the simulator, 59 00:04:35,550 --> 00:04:42,030 you will install extra app from the App Store, the expo client app and we'll do that together in the 60 00:04:42,030 --> 00:04:43,830 next lecture. 61 00:04:43,830 --> 00:04:50,340 Now your app can then be loaded into the client app which is this extra wrapper to see it there, to run 62 00:04:50,340 --> 00:04:51,500 it there, to test it there 63 00:04:51,510 --> 00:04:54,180 and that's of course great for development. 64 00:04:54,180 --> 00:05:02,070 You can also publish your app as expo app so that other people who have the expo client installed can 65 00:05:02,130 --> 00:05:03,500 easily run your app, 66 00:05:03,510 --> 00:05:07,550 they don't even need to install it from the Google Play Store or the Apple App Store 67 00:05:07,740 --> 00:05:12,870 but of course typically you want to build an app which you can publish to these app stores and no worries, 68 00:05:12,990 --> 00:05:14,880 that's possible with expo too. 69 00:05:15,120 --> 00:05:20,190 That extra client app which you have, which wraps your app, is great for development because it speeds 70 00:05:20,190 --> 00:05:21,800 up the entire development workflow 71 00:05:22,080 --> 00:05:28,350 but if you want a standalone app, so an app that is not relying on the expo client, which most of your potential 72 00:05:28,350 --> 00:05:36,260 users probably won't have installed, well then expo also allows you to build and publish standalone apps, 73 00:05:36,330 --> 00:05:43,350 so apps that do not rely on the expo client being installed. So therefore with expo, you can build normally 74 00:05:43,350 --> 00:05:49,950 apps which are distributed to the normal app stores standalone where your users don't need any special 75 00:05:49,950 --> 00:05:55,390 app installed but you have that extra convenience during development which is great 76 00:05:55,440 --> 00:06:02,040 and as I mentioned before, if you would need to, you can always switch or eject as it's called to the 77 00:06:02,040 --> 00:06:04,020 non-expo development flow as well.