1 00:00:00,840 --> 00:00:02,460 In this video we're going to get React Native. 2 00:00:02,490 --> 00:00:04,870 Up and running on our own physical device. 3 00:00:04,890 --> 00:00:09,330 So this is going to be like your personal phone that's in your pocket or next to you right now. 4 00:00:09,330 --> 00:00:10,730 So let's get to it. 5 00:00:10,800 --> 00:00:12,780 Here's a series of steps we're going to go through. 6 00:00:12,930 --> 00:00:15,360 We're gonna do all this stuff right now inside this video. 7 00:00:15,360 --> 00:00:20,070 So hopefully by the end we'll have an application up and running now for the first project we're going 8 00:00:20,070 --> 00:00:20,550 to work on. 9 00:00:20,550 --> 00:00:25,530 We're going to use a starter pack a little starter project that I put together this starter project 10 00:00:25,530 --> 00:00:31,230 has a tiny bit of code inside of it just to get a start started and save a little bit of time later 11 00:00:31,230 --> 00:00:34,740 on side of course we're definitely going to be generating our own projects from scratch. 12 00:00:34,770 --> 00:00:39,570 But for right now we're going to use this starter project so hopefully you've found that starter project 13 00:00:39,660 --> 00:00:44,220 in the lecture before this one and hopefully you downloaded that zip file if you didn't please flip 14 00:00:44,220 --> 00:00:49,200 back to the previous video and download that zip file once you've downloaded that zip file you can then 15 00:00:49,230 --> 00:00:54,720 extract it you can place this project director right here into any workspace directory you have on your 16 00:00:54,720 --> 00:00:59,970 local machine when I say workspace directory I really just mean a folder that you like to put source 17 00:00:59,970 --> 00:01:05,160 code into you can put this folder anywhere on your local machine that you want it is totally up to you 18 00:01:06,260 --> 00:01:06,500 all right. 19 00:01:06,500 --> 00:01:11,240 So once we've got it extracted we're then going to open up our terminal and we're gonna change into 20 00:01:11,240 --> 00:01:13,620 that folder that we just created. 21 00:01:13,620 --> 00:01:22,030 It's going to open up my terminal right now and I'll change into that are in starter directory then 22 00:01:22,030 --> 00:01:28,270 inside of here we're going to run the command npm install when you run that command if you see an error 23 00:01:28,270 --> 00:01:28,850 message. 24 00:01:28,870 --> 00:01:34,480 I want you to know right away that you should first try to update or install node for the first time 25 00:01:34,810 --> 00:01:36,780 you can find a link to install or update. 26 00:01:36,790 --> 00:01:39,630 No J.S. Right there inside that red box. 27 00:01:39,800 --> 00:01:40,920 So back inside my terminal. 28 00:01:40,930 --> 00:01:44,380 Still inside my project directory I'll run npm install 29 00:01:47,290 --> 00:01:52,570 when you run this command node is going to automatically download a ton of different dependencies into 30 00:01:52,570 --> 00:01:54,520 your new starter project. 31 00:01:54,520 --> 00:01:56,890 You'll notice that my installation occurs very quickly. 32 00:01:56,890 --> 00:02:01,090 That's just because I already pre installed all the dependencies that are required just to save a little 33 00:02:01,090 --> 00:02:02,050 bit of time. 34 00:02:02,110 --> 00:02:06,460 Chances are for you you're going to see that the installation process takes anywhere from like 30 seconds 35 00:02:06,520 --> 00:02:12,070 up to two or three minutes totally fine if it takes a while as that installation is running you might 36 00:02:12,070 --> 00:02:14,340 see a couple of different warning messages appear. 37 00:02:14,470 --> 00:02:16,960 If you see any warnings that is also OK. 38 00:02:17,020 --> 00:02:18,180 Warnings are fine. 39 00:02:18,250 --> 00:02:22,750 And in fact I really expect that you're going to see some warnings like the ones you see right here 40 00:02:22,750 --> 00:02:24,580 on my screen. 41 00:02:24,620 --> 00:02:27,870 The only thing you need to worry about is if you see an error message. 42 00:02:27,890 --> 00:02:29,260 So if you see a big error message. 43 00:02:29,270 --> 00:02:33,470 Well that means that you need to pause this installation pauses video and we should do a little bit 44 00:02:33,470 --> 00:02:38,600 of troubleshooting the first bit of troubleshooting you want to do is to just google the error message. 45 00:02:38,600 --> 00:02:42,350 I'll be honest with you you're going to see a ton of errors as you get started with React Native and 46 00:02:42,350 --> 00:02:46,850 so you definitely want to be in the habit of googling the error messages you see because very frequently 47 00:02:46,970 --> 00:02:50,460 other people run into the same problems as you all right. 48 00:02:50,450 --> 00:02:55,580 So now that our npm install is complete we're then going to run the command NPM start inside that project 49 00:02:55,580 --> 00:02:57,590 directory when we run that command. 50 00:02:57,590 --> 00:03:01,980 We're going to open up something called the React Native bundler. 51 00:03:02,010 --> 00:03:06,600 This is essentially a program that's going to take all of our source code and get it ready to be ran 52 00:03:06,690 --> 00:03:08,130 on some mobile device. 53 00:03:09,030 --> 00:03:15,030 So now that my installation is complete I'll run NPM start once again inside of my aunt's starter project 54 00:03:15,030 --> 00:03:18,700 directory once I run this command. 55 00:03:18,700 --> 00:03:23,150 We're gonna see a browser window appear much like the one you see right here. 56 00:03:23,200 --> 00:03:28,240 So this is what we refer to as the interface to the React Native bundler or the Metro bundler. 57 00:03:28,240 --> 00:03:33,460 Again this is a program that's going to get your code running and ready to be executed on some mobile 58 00:03:33,460 --> 00:03:35,090 device. 59 00:03:35,090 --> 00:03:36,830 Now we've got this bundler up and running. 60 00:03:36,830 --> 00:03:41,410 We're gonna flip over to our physical device like our actual phone and do just a little bit of setup. 61 00:03:42,020 --> 00:03:45,810 So on our phone we're going to install an app called Expo. 62 00:03:45,860 --> 00:03:51,700 The Google Play store or the App Store depending on whether you have an IOW device or an android. 63 00:03:51,740 --> 00:03:56,030 We'll talk about what this expo thing is in just a moment but right now let's just finish up the setup 64 00:03:57,210 --> 00:03:57,560 okay. 65 00:03:57,590 --> 00:03:59,780 So I've got my actual physical phone right here. 66 00:03:59,780 --> 00:04:05,400 This is a screen cast of my very real iPhone so it's in some on ISIS. 67 00:04:05,440 --> 00:04:08,710 I'm going to open up the app store to install this app. 68 00:04:08,890 --> 00:04:13,060 Again if you're running Android that's totally fine you're going to open up the Google Play store instead 69 00:04:14,180 --> 00:04:21,030 so once you've got your respective app store open will then hit search and we'll do a search for Expo 70 00:04:21,340 --> 00:04:21,910 X.. 71 00:04:22,240 --> 00:04:29,340 Oh like so then do a search and we'll see something like Expo client. 72 00:04:29,410 --> 00:04:32,660 It should be either the first or second results. 73 00:04:32,680 --> 00:04:36,130 You'll notice that there's something else on here called expo with the big yellow logo. 74 00:04:36,130 --> 00:04:37,340 That's not what we want. 75 00:04:37,360 --> 00:04:37,820 We've got them. 76 00:04:37,900 --> 00:04:40,730 We want to get the one that has a logo like this right here. 77 00:04:41,390 --> 00:04:45,430 Now I've already got Expo installed on my phone once again to just save a little bit of time. 78 00:04:45,490 --> 00:04:50,330 So I got to open it right away but for you go ahead and install the app and you can of course pause 79 00:04:50,330 --> 00:04:57,910 this video while it's installing once you've got that app installed we're then going to go back inside 80 00:04:57,910 --> 00:05:00,590 of our browser of each that react native bundler. 81 00:05:00,880 --> 00:05:03,940 So here's might react native bundler right here. 82 00:05:03,940 --> 00:05:07,160 You'll notice that there's a QR code on the bottom left hand side. 83 00:05:07,330 --> 00:05:10,770 So we're going to scan that QR code to scan the QR code. 84 00:05:10,780 --> 00:05:16,240 You can open up the camera application on your phone you should not need a separate app just to scan 85 00:05:16,240 --> 00:05:21,070 a QR code so on my phone here's my phone right here. 86 00:05:21,070 --> 00:05:26,200 I'm going to flip on over to my camera application and going to scan the QR code. 87 00:05:26,210 --> 00:05:26,960 There we go. 88 00:05:26,960 --> 00:05:29,840 You can see that I get that pop up up here on the very top. 89 00:05:29,990 --> 00:05:35,520 As soon as I see that pop up I'm going to tap it and that will kick me over to the expo application. 90 00:05:35,510 --> 00:05:37,280 We just installed now right here. 91 00:05:37,280 --> 00:05:41,570 Let me pause right here and tell you it is incredibly likely that you're not going to see what I see. 92 00:05:41,570 --> 00:05:44,570 Notice how at the bottom it says building javascript bundle. 93 00:05:44,570 --> 00:05:47,440 If you don't see this message down here totally fine. 94 00:05:47,450 --> 00:05:47,760 Hi. 95 00:05:47,870 --> 00:05:52,550 Once again almost expect that you're going to see something that says like cannot find connection or 96 00:05:52,550 --> 00:05:57,440 cannot make connection or something like that or something like this is taking longer than it should. 97 00:05:57,620 --> 00:06:02,180 If you see a message like that then there's some immediate troubleshooting we can do back inside of 98 00:06:02,180 --> 00:06:03,440 the react native bundler. 99 00:06:03,440 --> 00:06:09,590 You'll find a connection setting right here for me by default it is set to land if land does not work 100 00:06:09,590 --> 00:06:13,220 for you then you can flip it over to tunnel instead. 101 00:06:13,220 --> 00:06:16,580 When you change it to tunnel you'll notice that the QR code right here changes. 102 00:06:17,180 --> 00:06:22,640 So flip it over to tunnel and then scan the QR code again when you reach scan that QR code hopefully 103 00:06:22,670 --> 00:06:24,540 then the application should start up. 104 00:06:24,920 --> 00:06:27,230 So either land or tunnel. 105 00:06:27,290 --> 00:06:32,090 I've also heard some people say that local works so we could change over to local and scan that QR code 106 00:06:32,240 --> 00:06:36,770 but in theory that should really not work on your mobile device or your physical device. 107 00:06:36,770 --> 00:06:40,290 You can give it a try but it really should be either tunnel or land. 108 00:06:40,760 --> 00:06:43,670 So try one or the other until you get it working. 109 00:06:43,670 --> 00:06:45,590 If neither of them works well that's fine. 110 00:06:45,590 --> 00:06:49,550 Once again you can flip over to the discussion on this video and we'll do a little bit of troubleshooting. 111 00:06:50,000 --> 00:06:54,560 I will say that if you can't get either tunnel or land to work one immediate solution that you can do 112 00:06:54,620 --> 00:06:58,730 if you want to continue with the course right now is to go to that appendix section and go through the 113 00:06:58,730 --> 00:07:02,330 setup to set up a local emulator or simulator. 114 00:07:02,330 --> 00:07:07,850 If you do that you should go to come back to this screen and get it working with a local device instead. 115 00:07:07,970 --> 00:07:08,580 All right. 116 00:07:08,580 --> 00:07:13,650 So if I now flip back over to my phone now flip back over. 117 00:07:13,650 --> 00:07:18,480 Here we go the screen cast after a while you'll notice it's taking a little bit of time here but eventually 118 00:07:18,480 --> 00:07:23,340 this downloading javascript bundle process will be completed and I should see these starter application 119 00:07:23,370 --> 00:07:24,650 appear on the screen. 120 00:07:24,760 --> 00:07:29,550 So I got to wait just a second or two for this to complete on your device you might see that this percentage 121 00:07:29,550 --> 00:07:31,130 is filling up much faster than mine. 122 00:07:31,140 --> 00:07:36,240 That's totally fine if you're seeing that it's running very very slow like ridiculously slow. 123 00:07:36,270 --> 00:07:41,080 You can also close down the expo application and re scan the QR code again. 124 00:07:41,100 --> 00:07:45,200 I found that that sometimes solves some lagging issues as well OK. 125 00:07:45,240 --> 00:07:50,400 So now eventually once that entire downloading process is complete we'll see these starter application 126 00:07:50,400 --> 00:07:51,100 appear. 127 00:07:51,120 --> 00:07:52,890 So this right here is the starter application. 128 00:07:52,890 --> 00:07:54,460 This is what we're trying to see. 129 00:07:54,530 --> 00:07:58,890 So hopefully you see the words Home Screen on what the word like app or something similar at the very 130 00:07:58,890 --> 00:07:59,820 top. 131 00:07:59,970 --> 00:08:01,370 And that's pretty much it. 132 00:08:01,380 --> 00:08:05,250 So we've now got our application up and running or at least hopefully we do. 133 00:08:05,280 --> 00:08:09,990 Once again if you ran into any issues during the set up process I really expect that is totally not 134 00:08:10,060 --> 00:08:11,310 to the realm of possibility. 135 00:08:11,400 --> 00:08:15,540 Very likely that you ran into some issues and we can always do some troubleshooting just hop over to 136 00:08:15,540 --> 00:08:17,470 the cube section. 137 00:08:17,500 --> 00:08:17,820 All right. 138 00:08:17,820 --> 00:08:22,240 And the last thing I want to mention very quickly is if you ever need to stop that react native bundler 139 00:08:22,480 --> 00:08:27,340 you can open up that terminal window that's running the bundler again in press control see and then 140 00:08:27,340 --> 00:08:31,900 if you ever need to start it back up again for any reason you'll once again run NPM start inside of 141 00:08:31,900 --> 00:08:36,810 your project directory from the terminal and then scan the QR code again on your mobile device. 142 00:08:36,970 --> 00:08:37,750 And that's pretty much it. 143 00:08:38,610 --> 00:08:38,830 OK. 144 00:08:38,860 --> 00:08:42,970 So now that we've got our app up and running hopefully let's take a pause right here and continue in 145 00:08:42,970 --> 00:08:43,600 the next video.