1 00:00:02,240 --> 00:00:08,750 So that was a lot of introduction to React Native and expo but I find it important that you understand 2 00:00:08,750 --> 00:00:11,540 what you're working with before you get started. 3 00:00:11,540 --> 00:00:18,470 Now with that, it's time to get started though and for this, visit expo.io. There you can click on 4 00:00:18,470 --> 00:00:22,020 get started and you'll find the starting steps here. 5 00:00:22,190 --> 00:00:24,290 Now you don't really need that first step, 6 00:00:24,290 --> 00:00:30,920 we can jump right into step number two which is that you need NodeJS. Now you need NodeJS which is a 7 00:00:30,920 --> 00:00:36,800 Javascript runtime that allows you for example to build server-side apps with Javascript. You don't need 8 00:00:36,800 --> 00:00:39,980 that because we're about to write any NodeJS code in this course, 9 00:00:39,980 --> 00:00:41,020 it's not a Node course, 10 00:00:41,030 --> 00:00:42,550 no worries, you don't need to know 11 00:00:42,590 --> 00:00:50,750 NodeJS but it's a package which allows us to run Javascript on our machine and for example, the expo 12 00:00:50,750 --> 00:00:54,680 client behind the scenes also runs on Javascript, 13 00:00:54,680 --> 00:00:57,410 it's totally not related to React Native, 14 00:00:57,410 --> 00:01:00,100 that's just for this tool to work correctly. 15 00:01:00,230 --> 00:01:05,050 Also for this command to install the tool, npm, that's the Node Package Manager 16 00:01:05,150 --> 00:01:08,320 and that's also made available by NodeJS. 17 00:01:08,330 --> 00:01:14,300 So the first step is that you visit nodejs.org and there, download the latest version, 18 00:01:14,300 --> 00:01:20,300 in my case 12.6 from there to get started and whatever your latest version is when you're viewing 19 00:01:20,300 --> 00:01:22,840 that, simply download that version, install it, 20 00:01:22,880 --> 00:01:28,080 it gives you a normal installer you can simply walk through by clicking through all these steps there, 21 00:01:28,100 --> 00:01:29,420 nothing too fancy. 22 00:01:29,420 --> 00:01:32,220 It's available for MacOS and Windows and Linux. 23 00:01:32,270 --> 00:01:38,330 So simply download it here, walk through the installer and once it is installed, you can proceed to this third 24 00:01:38,330 --> 00:01:39,760 step here. 25 00:01:39,830 --> 00:01:46,130 So with NodeJS installed, let's copy that command here and then open your normal terminal or on Windows, 26 00:01:46,130 --> 00:01:49,770 your command prompt and paste that command in here. 27 00:01:49,790 --> 00:01:54,530 Now on Mac and Linux, you might need to add a sudo in front of this, on Windows 28 00:01:54,530 --> 00:01:57,820 this will not be required, to get the right permissions. 29 00:01:57,830 --> 00:01:59,090 So here I'll enter it, 30 00:01:59,120 --> 00:02:03,630 then you might be prompted for your password, simply enter it if you are 31 00:02:03,740 --> 00:02:09,290 and now this will install the expo CLI which is this tool that helps us create and manage React 32 00:02:09,290 --> 00:02:15,080 Native projects with the help of expo globally on your machine, so that you can use it from anywhere 33 00:02:15,230 --> 00:02:16,280 on your machine, 34 00:02:16,280 --> 00:02:19,190 so from anywhere in your terminal. 35 00:02:19,280 --> 00:02:21,540 So let's wait for this installation to finish, 36 00:02:21,560 --> 00:02:26,180 you can ignore any warnings you might be getting in between and I'll be back once this installation 37 00:02:26,180 --> 00:02:27,470 finished. 38 00:02:27,560 --> 00:02:33,170 You can also ignore such in-between errors here by the way, as long as the overall doesn't crash with 39 00:02:33,170 --> 00:02:35,990 an error but finishes with a message like this one in the end, 40 00:02:35,990 --> 00:02:38,030 you were successful. 41 00:02:38,030 --> 00:02:43,760 So with this, we got Expo CLI installed, the next step is to create our project, so step number four 42 00:02:43,760 --> 00:02:44,510 here. 43 00:02:44,510 --> 00:02:46,280 We do this by running expo init 44 00:02:46,340 --> 00:02:52,250 and then any project name of your choice and for that, first of all make sure that you use the cd command 45 00:02:52,310 --> 00:02:58,890 to navigate into the folder here on your machine where you want to create that project. So I did that 46 00:02:58,890 --> 00:03:04,440 here, I'm in that folder and now I can run expo init and I'll name this rn-first-app because it's 47 00:03:04,440 --> 00:03:09,870 our first React Native app here after all. Simply hit enter, that name of course is totally up to you 48 00:03:09,870 --> 00:03:11,250 which you have here 49 00:03:11,250 --> 00:03:16,530 and this will now create a new folder in the place where you ran this command and set up a React Native 50 00:03:16,800 --> 00:03:18,810 app there using expo. 51 00:03:18,900 --> 00:03:22,290 Now you probably are asked which template you want to use 52 00:03:22,350 --> 00:03:25,480 and there you can go with the blank template for now. 53 00:03:25,560 --> 00:03:32,700 Make sure you don't choose bare minimum because that would be a setup without the expo environment with 54 00:03:32,700 --> 00:03:34,060 all the convenience features, 55 00:03:34,080 --> 00:03:36,570 so definitely go with blank here. 56 00:03:36,570 --> 00:03:42,570 Now next, you'll probably be asked to enter a name for your app and I'll just enter rn-first-app 57 00:03:42,570 --> 00:03:43,050 here, 58 00:03:43,080 --> 00:03:47,770 that's in the end the name which is displayed in the task switcher of your app on the home screen and 59 00:03:47,770 --> 00:03:48,540 so on. 60 00:03:48,570 --> 00:03:52,130 You can leave the slug as it is and simply hit enter again, 61 00:03:52,140 --> 00:03:58,650 now I'm also you using yarn on my machine which is an alternative to npm, you might not be asked whether 62 00:03:58,650 --> 00:04:00,780 you want to use yarn which is totally fine, 63 00:04:00,780 --> 00:04:03,210 I will also choose no here to use npm 64 00:04:03,390 --> 00:04:08,550 and therefore now, this will go ahead, create this project folder, install all required dependencies in 65 00:04:08,550 --> 00:04:14,970 there like React and React Native and give us a React Native project which we can use to build a native 66 00:04:14,970 --> 00:04:15,330 app. 67 00:04:15,570 --> 00:04:17,960 So let's wait for this to finish now. 68 00:04:17,970 --> 00:04:23,610 Now once it did finish, you see the next instructions here. You can navigate into the newly created folder 69 00:04:23,610 --> 00:04:31,230 with the cd command and then in there, simply run npm start. Npm start will now start up the expo 70 00:04:31,230 --> 00:04:38,410 development tool, the expo dev tools and a new tab should open up in your browser. 71 00:04:38,570 --> 00:04:43,420 Here is that tab which did open, if you are any issues here, you can ignore that for now, 72 00:04:43,550 --> 00:04:49,070 this here is the expo development tool or the expo dev tools as it's called. 73 00:04:49,280 --> 00:04:55,610 It's a window which allows you to run your app on different connected devices or add simulators 74 00:04:55,760 --> 00:05:00,740 and it allows you to generally manage parts of your app, you see some output from your app 75 00:05:00,740 --> 00:05:02,650 here, some warnings you might be getting 76 00:05:02,750 --> 00:05:09,200 and this is a very convenient window for managing your app and for running your app. Now 77 00:05:09,210 --> 00:05:15,780 also make sure that here in the terminal where you ran npm start, you'll leave that process running. 78 00:05:15,810 --> 00:05:21,000 You might see that it didn't finish, you don't see that input line again where you can enter commands, 79 00:05:21,630 --> 00:05:27,630 instead here, you can't type or you can press some of the shortcuts you see here but you can't type new 80 00:05:27,630 --> 00:05:28,500 commands. 81 00:05:28,500 --> 00:05:33,960 You can always quit this process by hitting control and c simultaneously but you should leave this 82 00:05:33,960 --> 00:05:37,640 process up and running for as long as you're working on your project 83 00:05:37,740 --> 00:05:42,660 and if you are then done for the day, you can quit it and restart it on the next day because this process 84 00:05:42,660 --> 00:05:47,850 will also watch your code and whenever you change something in your code and you save that change, it 85 00:05:47,850 --> 00:05:52,530 will automatically save this and publish it to your connected device. 86 00:05:52,560 --> 00:05:58,680 But speaking of that, let's connect the device and for that, the easiest way of getting started is to 87 00:05:58,680 --> 00:06:01,940 use your iPhone or Android phone which you own. 88 00:06:01,950 --> 00:06:08,290 So in my case, it's an iPhone here and here's my real phone and I'm in the App Store, now it's in German 89 00:06:08,290 --> 00:06:12,730 because I have a German phone but this is the normal App Store. Now in there, you can go to the search 90 00:06:12,730 --> 00:06:19,900 area and search for expo. Now once you did that, you should find that expo client here and you can simply 91 00:06:20,020 --> 00:06:26,680 download that to your device, it's free to use. Simply install it onto your device and wait for this installation 92 00:06:26,680 --> 00:06:28,430 to finish of course 93 00:06:28,450 --> 00:06:30,690 and once this is finished, 94 00:06:30,700 --> 00:06:37,030 you can open this and now with the expo app installed, you don't need to sign up here, 95 00:06:37,370 --> 00:06:42,880 instead on Android you should be able to scan that barcode right from inside your expo app. On iOS, 96 00:06:42,880 --> 00:06:49,230 simply open up the camera app and then you can go also to the dev tools here and you'll see that 97 00:06:49,230 --> 00:06:58,190 barcode here, simply hold your camera onto that on iOS or the expo app scanner here on Android and you 98 00:06:58,190 --> 00:07:03,510 should be prompted whether you want to open an app in expo then. Simply hit open there 99 00:07:03,800 --> 00:07:07,730 and now this should open your app here in the expo client which you installed, 100 00:07:07,760 --> 00:07:14,810 again without signing up, just by holding your iPhone camera over that barcode or on Android by doing that 101 00:07:14,810 --> 00:07:19,350 from directly inside the expo app where you will have that option to do so. 102 00:07:19,370 --> 00:07:24,050 So now this will build the Javascript bundle as you see here at the bottom or put in other words, 103 00:07:24,050 --> 00:07:30,260 this will now take your app and compile it basically and prepare it and then load it here over expo's 104 00:07:30,320 --> 00:07:36,920 servers into your app and you can simply hit got it here on the first screen and then this is your starting 105 00:07:36,920 --> 00:07:38,130 React Native app. 106 00:07:38,270 --> 00:07:43,220 And now let's actually view the code for this and see how we can change something in the code to see something 107 00:07:43,220 --> 00:07:45,110 different here on this screen.