WEBVTT 00:00:00.000 --> 00:00:02.014 In response to numerous requests, 00:00:02.080 --> 00:00:02.680 I'm thrilled to present 00:00:02.746 --> 00:00:05.050 a comprehensive walkthrough of setting up 00:00:05.120 --> 00:00:07.930 React Native CLI on your Windows machine. 00:00:08.000 --> 00:00:09.200 To begin this journey, 00:00:09.266 --> 00:00:10.720 we're setting our course for 00:00:10.786 --> 00:00:13.730 React Native's official documentation. 00:00:13.800 --> 00:00:15.520 For this, you're going to need to open up 00:00:15.586 --> 00:00:20.680 your browsers and go to reactnative. 00:00:20.746 --> 00:00:21.850 dev. 00:00:21.920 --> 00:00:23.800 Once you get here, you're going to click 00:00:23.866 --> 00:00:29.000 on the Development tab and then Guides. 00:00:29.560 --> 00:00:30.760 Here you're going to find 00:00:30.826 --> 00:00:32.490 Environment Setup. 00:00:32.560 --> 00:00:33.920 Click on this and go 00:00:33.986 --> 00:00:36.290 to Set up your Environment. 00:00:36.360 --> 00:00:38.050 We already discussed what Expo 00:00:38.120 --> 00:00:40.730 is and why we are not using it 00:00:40.800 --> 00:00:42.210 in the previous videos. 00:00:42.280 --> 00:00:43.360 Therefore, if you're planning 00:00:43.426 --> 00:00:45.330 on using Expo, this course 00:00:45.400 --> 00:00:47.570 is not going to be useful for you. 00:00:47.640 --> 00:00:50.080 There's a bunch of other courses on Udemy 00:00:50.146 --> 00:00:52.610 where you can use Expo if you want. 00:00:52.680 --> 00:00:54.090 You can always get a refund 00:00:54.160 --> 00:00:56.050 and purchase those courses. 00:00:56.120 --> 00:00:57.770 If you want to test your applications 00:00:57.840 --> 00:01:00.650 in the iOS environment as your target OS, 00:01:00.720 --> 00:01:03.330 you're going to have to have macOS, 00:01:03.400 --> 00:01:05.530 and I blame this disadvantage 00:01:05.600 --> 00:01:08.930 for Windows users on Steve Jobs. 00:01:09.000 --> 00:01:10.774 One more thing I want to mention here 00:01:10.840 --> 00:01:12.200 is that instead of looking at this video 00:01:12.266 --> 00:01:14.490 to write the commands in the terminal, 00:01:14.560 --> 00:01:16.570 I as you go to the documentation 00:01:16.640 --> 00:01:17.610 yourself as well. 00:01:17.680 --> 00:01:19.694 It's going to be easier for you to copy 00:01:19.760 --> 00:01:21.200 those commands from the documentation 00:01:21.266 --> 00:01:23.250 that we're going to be using. 00:01:23.320 --> 00:01:25.400 This will also make sure that you do not 00:01:25.466 --> 00:01:27.000 have any typos for the commands 00:01:27.066 --> 00:01:28.290 that you're going to run, 00:01:28.360 --> 00:01:29.440 and therefore, you're not 00:01:29.506 --> 00:01:31.850 going to face with any unexpected issues. 00:01:31.920 --> 00:01:33.520 Other than that, the React Native 00:01:33.586 --> 00:01:35.810 documentation updates very frequently. 00:01:35.880 --> 00:01:38.040 I always try to stay on top of these 00:01:38.106 --> 00:01:40.280 updates, and I try to release new videos 00:01:40.346 --> 00:01:42.290 as the newer instructions come out. 00:01:42.360 --> 00:01:43.760 But just in case you're watching 00:01:43.826 --> 00:01:45.240 this video when the new version 00:01:45.306 --> 00:01:47.280 is still fresh, you might see 00:01:47.346 --> 00:01:49.240 outdated information on my screen. 00:01:49.306 --> 00:01:50.960 The installation process is probably 00:01:51.026 --> 00:01:52.080 going to be the same, but you 00:01:52.146 --> 00:01:56.170 might need to run newer version commands. 00:01:56.240 --> 00:01:58.760 I recommend to follow me and 00:01:58.826 --> 00:02:01.650 the documentation at the same time. 00:02:01.720 --> 00:02:03.934 Now that that's clear, I want to get into 00:02:04.000 --> 00:02:05.400 the dependencies that we're going 00:02:05.466 --> 00:02:08.850 to be installing for React Native. 00:02:08.920 --> 00:02:11.530 Let's go to the Android tab here, 00:02:11.600 --> 00:02:14.250 and we're going to see that we need 00:02:14.320 --> 00:02:16.520 React Native command line interface, 00:02:16.586 --> 00:02:19.930 a JDK, and an Android Studio. 00:02:20.000 --> 00:02:21.960 Now, I don't want to mention that in order 00:02:22.026 --> 00:02:24.200 to install Node, we're going 00:02:24.266 --> 00:02:26.130 to have to install chocolatey, 00:02:26.200 --> 00:02:28.770 which is an installation assistant. 00:02:28.840 --> 00:02:30.640 Basically, it is a package manager 00:02:30.706 --> 00:02:32.120 for Windows that simplifies 00:02:32.186 --> 00:02:35.330 the installation of softwares and tools. 00:02:35.400 --> 00:02:37.960 Think of it as a tool that would help you 00:02:38.026 --> 00:02:41.040 install every other dependency for React 00:02:41.106 --> 00:02:43.770 Native applications to run smoothly. 00:02:43.840 --> 00:02:46.480 It is going to help us in installing JDK 00:02:46.546 --> 00:02:48.090 and Node, which is required 00:02:48.160 --> 00:02:50.970 for React Native development. 00:02:51.040 --> 00:02:53.640 Now, for experienced developers who 00:02:53.706 --> 00:02:55.760 might already have set up Node and JDK 00:02:55.826 --> 00:02:58.600 on their computers, please pay attention 00:02:58.666 --> 00:03:02.290 that your Node is hired than version 18. 00:03:02.360 --> 00:03:05.520 Also, make sure that your JDK version 00:03:05.586 --> 00:03:09.690 is 17, as with higher JDK versions, 00:03:09.760 --> 00:03:12.050 you might encounter problems. 00:03:12.120 --> 00:03:13.800 If you do not have these versions 00:03:13.866 --> 00:03:15.160 available, you're going 00:03:15.226 --> 00:03:17.690 to have to install or update them. 00:03:17.760 --> 00:03:20.200 Now, if you already have Node installed, 00:03:20.266 --> 00:03:22.690 you want to have multiple versions of it, 00:03:22.760 --> 00:03:25.560 then you're most welcome to use Nvm, 00:03:25.626 --> 00:03:28.130 which stands for Node Version Manager, 00:03:28.200 --> 00:03:30.094 and it would allow you to have multiple 00:03:30.160 --> 00:03:31.280 multiple versions of node 00:03:31.346 --> 00:03:33.330 and switching between them. 00:03:33.400 --> 00:03:35.090 I will also place a link 00:03:35.160 --> 00:03:37.280 to the Nvm documentation inside 00:03:37.346 --> 00:03:39.880 the resources folder for this video. 00:03:39.946 --> 00:03:41.934 Otherwise, if you're totally new 00:03:42.000 --> 00:03:43.360 to React Native and have none 00:03:43.426 --> 00:03:45.214 of these tools installed, just 00:03:45.280 --> 00:03:46.360 follow me and we're going to 00:03:46.426 --> 00:03:49.210 install everything together from scratch. 00:03:49.280 --> 00:03:51.240 As we discussed, the first thing that 00:03:51.306 --> 00:03:54.890 we're going to install is the chocolatey. 00:03:54.960 --> 00:03:56.130 For that, you can just 00:03:56.200 --> 00:03:57.854 click on this link here. 00:03:57.920 --> 00:03:59.320 As the first step, we're going 00:03:59.386 --> 00:04:01.160 to see the subscription here, 00:04:01.226 --> 00:04:03.130 and I'm not going to subscribe. 00:04:03.200 --> 00:04:05.120 I'm going to close this tab, 00:04:05.186 --> 00:04:07.867 and I'm going to go to the step 2. 00:04:07.933 --> 00:04:09.920 After that, please make sure that you have 00:04:09.986 --> 00:04:12.370 the individual tab selected here. 00:04:12.440 --> 00:04:13.800 The first thing that we're going 00:04:13.866 --> 00:04:15.240 to need to do is make sure 00:04:15.306 --> 00:04:18.680 that we are not restricted and all 00:04:18.746 --> 00:04:20.570 of our permissions are set correctly. 00:04:20.640 --> 00:04:21.920 For that, you're going to 00:04:21.986 --> 00:04:25.410 need to look for Windows PowerShell. 00:04:25.480 --> 00:04:27.450 You can just look for it 00:04:27.520 --> 00:04:29.760 through the search bar, and you need 00:04:29.826 --> 00:04:31.960 to run this as an administrator. 00:04:32.026 --> 00:04:33.330 Make sure to click on this. 00:04:33.400 --> 00:04:35.000 Now that this is opened, let's 00:04:35.066 --> 00:04:37.690 move this out of the way and get started 00:04:37.760 --> 00:04:39.490 with the permission check. 00:04:39.560 --> 00:04:42.370 Let's copy this and paste it here 00:04:42.440 --> 00:04:44.210 and see what it outputs. 00:04:44.280 --> 00:04:45.840 Here, we're seeing that 00:04:45.906 --> 00:04:47.450 we're getting restricted value. 00:04:47.520 --> 00:04:50.000 The documentation says that if it returns 00:04:50.066 --> 00:04:55.170 restricted, then we should run this here. 00:04:55.240 --> 00:04:57.210 Let's just copy this, 00:04:57.280 --> 00:05:00.320 paste it in our PowerShell, 00:05:00.720 --> 00:05:03.290 and we're going to say yes to all. 00:05:03.360 --> 00:05:07.010 To say yes to all, you need to click on A 00:05:07.080 --> 00:05:10.730 on your keyboard and then press Enter. 00:05:10.800 --> 00:05:13.920 Now we can rerun this command again 00:05:13.986 --> 00:05:15.490 to make sure that everything 00:05:15.560 --> 00:05:17.450 went smoothly for us. 00:05:17.520 --> 00:05:20.050 Copy this again, paste it here, 00:05:20.120 --> 00:05:22.000 click on Enter, and we 00:05:22.066 --> 00:05:24.210 see that everything is signed. 00:05:24.280 --> 00:05:25.520 Now that we're all set, 00:05:25.586 --> 00:05:28.170 we want to run this command. 00:05:28.240 --> 00:05:30.040 Just copy this command and paste I 00:05:30.106 --> 00:05:32.890 paste it here and click on Enter. 00:05:32.960 --> 00:05:35.360 Here we see that we are running 00:05:35.426 --> 00:05:39.010 the Chocolatey version 00:05:39.080 --> 00:05:41.774 2.4.1. We should be all set. 00:05:41.840 --> 00:05:43.040 We don't need this window anymore, 00:05:43.106 --> 00:05:44.240 and we can just continue with 00:05:44.306 --> 00:05:47.050 the React native installation process. 00:05:47.120 --> 00:05:48.160 I'm going to close this window 00:05:48.226 --> 00:05:50.333 and we can continue from here. 00:05:50.400 --> 00:05:51.840 Right now, we're going to use 00:05:51.906 --> 00:05:53.370 this chocolatey that we just 00:05:53.440 --> 00:05:58.970 installed to install node and open JDK 00:05:59.040 --> 00:06:02.050 through this command presented here. 00:06:02.120 --> 00:06:05.120 In order to do this, we are going 00:06:05.186 --> 00:06:08.170 to need to run command prompt 00:06:08.240 --> 00:06:10.930 as an administrator as written here. 00:06:11.000 --> 00:06:13.530 If you are looking for command prompt, 00:06:13.600 --> 00:06:15.410 you can just go to the search bar, 00:06:15.480 --> 00:06:18.410 type in command prompt, and make sure 00:06:18.480 --> 00:06:20.867 to run it as an administrator. 00:06:20.933 --> 00:06:22.200 You're going to need 00:06:22.266 --> 00:06:23.520 the command prompt a lot. 00:06:23.586 --> 00:06:25.330 If you already don't have it 00:06:25.400 --> 00:06:26.970 pinned to your taskbar, 00:06:27.040 --> 00:06:29.970 make sure to pin it like this. 00:06:30.040 --> 00:06:31.680 Now we can get this out of the way 00:06:32.000 --> 00:06:34.090 and get started with our installation. 00:06:34.160 --> 00:06:36.210 Just copy this command 00:06:36.280 --> 00:06:40.210 and paste it here and click on Enter. 00:06:40.280 --> 00:06:41.480 Now, while this is completing, 00:06:41.546 --> 00:06:44.170 I do want to say what node is. 00:06:44.240 --> 00:06:46.440 Think of node as the engine 00:06:46.506 --> 00:06:48.730 that powers your React Native projects. 00:06:48.800 --> 00:06:50.810 React Native is based on JavaScript, 00:06:50.880 --> 00:06:52.960 and Node allows you to run JavaScript 00:06:53.026 --> 00:06:56.360 outside of a web browser, making it ideal 00:06:56.426 --> 00:06:59.370 for building cross-platform applications. 00:06:59.440 --> 00:07:01.640 We're installing node to ensure React 00:07:01.706 --> 00:07:05.250 Native journey is off to a solid start. 00:07:05.320 --> 00:07:07.520 Now, we're also installing JDK, which is 00:07:07.586 --> 00:07:10.130 the toolkit for Java-based applications, 00:07:10.200 --> 00:07:11.370 and we need it because it's 00:07:11.440 --> 00:07:13.450 pivotal component for Android. 00:07:13.520 --> 00:07:15.040 If you're new to development, 00:07:15.106 --> 00:07:16.960 you should know that Java and JavaScript 00:07:17.026 --> 00:07:19.970 are completely different languages. 00:07:20.040 --> 00:07:22.200 Installing JDK ensures 00:07:22.266 --> 00:07:24.490 compatibility between your code 00:07:24.560 --> 00:07:26.570 and the Android platform. 00:07:26.640 --> 00:07:28.000 By installing this, we 00:07:28.066 --> 00:07:29.290 are laying the foundation 00:07:29.360 --> 00:07:31.610 for seamless Android development. 00:07:31.680 --> 00:07:33.414 Now, let's wait for this 00:07:33.480 --> 00:07:34.720 to complete and you can come back 00:07:34.786 --> 00:07:36.570 to the video once this is done. 00:07:36.640 --> 00:07:37.880 Right now, we can see that 00:07:37.946 --> 00:07:39.280 this is already completed, 00:07:39.346 --> 00:07:41.610 so we can move on to the next steps. 00:07:41.680 --> 00:07:43.560 There were some environment changes 00:07:43.626 --> 00:07:45.640 with this, and I suggest that 00:07:45.706 --> 00:07:48.633 you close your command prompt, actually, 00:07:49.100 --> 00:07:52.610 and you reopen it to not face any issues. 00:07:52.680 --> 00:07:56.534 Let's just search for command prompt again 00:07:56.600 --> 00:07:57.480 and make sure to run it 00:07:57.546 --> 00:07:58.760 as an administrator. 00:07:58.867 --> 00:08:01.290 Now, we can continue with the next steps. 00:08:01.360 --> 00:08:02.440 The next step is 00:08:02.506 --> 00:08:04.480 Android development environment setup. 00:08:04.546 --> 00:08:05.930 Let's just do this. 00:08:06.000 --> 00:08:08.080 Let's click here 00:08:08.146 --> 00:08:10.067 to download and install Android Studio. 00:08:10.467 --> 00:08:13.000 Just click on Download Android Studio 00:08:13.066 --> 00:08:14.560 and make sure to go through 00:08:14.626 --> 00:08:16.930 the steps of terms and conditions, 00:08:17.000 --> 00:08:20.850 click on Agree and click on Download. 00:08:20.920 --> 00:08:22.410 Now, this might take a while, 00:08:22.480 --> 00:08:24.450 so just come back to the video 00:08:24.520 --> 00:08:26.130 once the download is done for you. 00:08:26.200 --> 00:08:26.520 Great. 00:08:26.586 --> 00:08:28.010 The download process has finished 00:08:28.080 --> 00:08:29.880 for me, so we can just go here 00:08:29.946 --> 00:08:33.490 and and click on the Android Studio file 00:08:33.560 --> 00:08:35.650 to begin our installation process. 00:08:35.720 --> 00:08:38.210 Here we can just click on Next, 00:08:38.280 --> 00:08:41.610 Next, Next, and Install. 00:08:41.680 --> 00:08:43.320 This will also take some time, 00:08:43.386 --> 00:08:44.810 so just come back to the video 00:08:44.880 --> 00:08:46.210 once your installation is done. 00:08:46.280 --> 00:08:49.033 Now, let's click on Next and Finish. 00:08:49.100 --> 00:08:52.050 This will start up the Android Studio. 00:08:52.120 --> 00:08:54.040 I don't want to send any 00:08:54.106 --> 00:08:55.134 statistics to Google. 00:08:55.200 --> 00:08:56.040 If you want to do so, 00:08:56.106 --> 00:08:57.160 you're free to do so. 00:08:57.226 --> 00:08:59.080 We're going to have to follow this wizard, 00:08:59.146 --> 00:09:02.090 so let's just click on Next 00:09:02.160 --> 00:09:04.290 and then Next here again, 00:09:04.360 --> 00:09:06.410 and then let's click on Next again. 00:09:06.480 --> 00:09:07.410 We're going to accept 00:09:07.480 --> 00:09:10.480 all of these licenses, and then 00:09:10.546 --> 00:09:12.200 we can click on Finish. 00:09:12.360 --> 00:09:13.360 Now, it's going to start 00:09:13.426 --> 00:09:15.050 downloading your components. 00:09:15.120 --> 00:09:16.770 It's going to take a while, 00:09:16.840 --> 00:09:18.520 so you can just come back to the video 00:09:18.586 --> 00:09:20.170 once this is done for you as well. 00:09:20.240 --> 00:09:20.560 Great. 00:09:20.626 --> 00:09:22.640 All the components have been downloaded 00:09:22.706 --> 00:09:23.920 as of now, so let's just 00:09:24.000 --> 00:09:26.450 click on Finish here, and we're welcomed 00:09:26.520 --> 00:09:28.330 to the Android Studio. 00:09:28.400 --> 00:09:29.280 That's great. 00:09:29.346 --> 00:09:30.160 Let me just I'm going to close 00:09:30.500 --> 00:09:33.334 this command, prompt to move this here. 00:09:33.400 --> 00:09:34.520 We don't need this window 00:09:34.586 --> 00:09:35.960 anymore, so let's just close it 00:09:36.026 --> 00:09:37.450 and follow the next steps, 00:09:37.520 --> 00:09:40.330 which is installing the Android SDK. 00:09:40.400 --> 00:09:41.720 To do that, we need to click on 00:09:41.786 --> 00:09:44.370 More Actions and then SDK Manager. 00:09:44.440 --> 00:09:45.930 More Actions is right here. 00:09:46.000 --> 00:09:48.050 Let's click on SDK Manager, 00:09:48.120 --> 00:09:50.370 and we're redirected to the screen. 00:09:50.440 --> 00:09:53.360 Here we need to find the Android 15 00:09:53.426 --> 00:09:55.210 vanilla ice cream entry. 00:09:55.280 --> 00:09:57.370 If the documentation differs, 00:09:57.440 --> 00:10:00.090 please follow that and not my video. 00:10:00.160 --> 00:10:01.520 And we can see that this 00:10:01.586 --> 00:10:03.770 is actually already checked off. 00:10:03.840 --> 00:10:05.600 We need to make sure that 00:10:05.666 --> 00:10:08.530 the following items are selected. 00:10:08.600 --> 00:10:10.800 To see those, we need to click on Show 00:10:10.866 --> 00:10:13.210 Package Details, which is right here. 00:10:13.280 --> 00:10:15.090 Let's click on this. 00:10:15.160 --> 00:10:16.680 And now we can see the details. 00:10:16.746 --> 00:10:20.410 And we need Android SDK platform 35. 00:10:20.480 --> 00:10:22.734 And that's already selected here, 00:10:22.800 --> 00:10:24.010 so I don't need to click here. 00:10:24.080 --> 00:10:26.400 And we need the Intel System Image 00:10:26.466 --> 00:10:29.170 or Google API System Image. 00:10:29.240 --> 00:10:30.040 I'm actually going I'm 00:10:30.106 --> 00:10:31.250 going to check both. 00:10:31.320 --> 00:10:32.570 I'm going to click here 00:10:32.640 --> 00:10:34.610 and I'm going to click here. 00:10:34.680 --> 00:10:38.680 Then we need to click on SDK Tools tab and 00:10:38.746 --> 00:10:42.210 go to Show Package Details as well here. 00:10:42.280 --> 00:10:44.170 Let's do that first. 00:10:44.240 --> 00:10:47.840 Show details, and we need to find 00:10:47.906 --> 00:10:51.640 35.0.0 here and we need to select it. 00:10:51.720 --> 00:10:52.840 Make sure to do what 00:10:52.906 --> 00:10:54.730 the documentation says. 00:10:54.800 --> 00:10:57.450 We're going to click on Apply. 00:10:57.520 --> 00:11:00.000 This is going to some 00:11:00.066 --> 00:11:02.290 time to get installed. 00:11:02.360 --> 00:11:05.000 Wait for this to complete and come back 00:11:05.066 --> 00:11:06.570 to the video after that. 00:11:06.640 --> 00:11:07.850 This has been completed. 00:11:07.920 --> 00:11:09.330 Just make sure to click on Apply 00:11:09.400 --> 00:11:11.840 after hitting the Finish button 00:11:11.906 --> 00:11:14.130 on your installation process, 00:11:14.200 --> 00:11:16.210 and then click on OK. 00:11:16.280 --> 00:11:17.770 And now we can move on to the third 00:11:17.840 --> 00:11:19.640 step, which is configuring 00:11:19.706 --> 00:11:22.690 the Android Home Environment variable. 00:11:22.760 --> 00:11:24.000 Now, we have all the directions 00:11:24.066 --> 00:11:25.330 that we need here. 00:11:25.400 --> 00:11:26.840 The only thing that you could do to 00:11:26.906 --> 00:11:28.880 save some time is just go to More Actions 00:11:28.946 --> 00:11:31.690 one more time Click on SDK Manager 00:11:31.760 --> 00:11:36.170 and make sure to copy this address. 00:11:36.240 --> 00:11:37.720 Let's just copy this 00:11:37.786 --> 00:11:40.130 and click on OK one more time. 00:11:40.200 --> 00:11:42.080 We're going to go to the 00:11:42.146 --> 00:11:43.250 Windows Control Panel. 00:11:43.320 --> 00:11:44.170 To go there, you can 00:11:44.240 --> 00:11:46.570 just search for it here. 00:11:46.640 --> 00:11:50.450 Open that and then go to User Accounts. 00:11:50.520 --> 00:11:53.610 Then click on User Accounts one more time. 00:11:53.680 --> 00:11:54.960 Then we're going to change 00:11:55.026 --> 00:11:57.050 our environment variables. 00:11:57.120 --> 00:12:00.160 Go here and we need to add 00:12:00.226 --> 00:12:02.720 the Android Home variable here. 00:12:02.786 --> 00:12:05.840 Click on New, and then we can paste 00:12:05.906 --> 00:12:07.450 the value that we had here, 00:12:07.520 --> 00:12:10.290 and we can call this Android Home. 00:12:10.360 --> 00:12:12.970 Let's just type it ourselves, 00:12:13.040 --> 00:12:14.800 Android Home. 00:12:14.866 --> 00:12:16.920 Just make sure that you don't have 00:12:16.986 --> 00:12:21.050 any typos here, and then click on OK. 00:12:21.120 --> 00:12:23.160 And once you do that, another thing 00:12:23.226 --> 00:12:25.280 we need to do is make sure 00:12:25.346 --> 00:12:27.760 to add platform tools to our path 00:12:27.826 --> 00:12:29.680 variable, which is located here. 00:12:29.746 --> 00:12:33.290 Click on this path variable, 00:12:33.360 --> 00:12:36.490 click on Edit, and then New, 00:12:36.560 --> 00:12:39.450 and then paste this value again. 00:12:39.520 --> 00:12:41.330 If you lost it, just go back 00:12:41.400 --> 00:12:44.610 to more actions, SDK manager, 00:12:44.680 --> 00:12:46.450 and copy it from here. 00:12:46.520 --> 00:12:49.320 And once you do that, we're just going to 00:12:49.386 --> 00:12:52.730 go here and add platform tools to this. 00:12:52.800 --> 00:12:56.010 Let's copy this, go here, 00:12:56.080 --> 00:13:00.320 click on Edit, and add the rest. 00:13:00.386 --> 00:13:03.530 Oops, I missed the slash. 00:13:03.600 --> 00:13:04.410 Great. 00:13:04.480 --> 00:13:06.650 Now, let's click on OK. 00:13:06.720 --> 00:13:08.294 We have the path variable, 00:13:08.360 --> 00:13:09.890 we have the Android home variable, 00:13:09.960 --> 00:13:12.880 and now all we need to do is click 00:13:12.946 --> 00:13:14.690 on OK, and this should be saved. 00:13:14.760 --> 00:13:17.000 To ensure that everything went well, 00:13:17.066 --> 00:13:19.210 you can just copy this command 00:13:19.280 --> 00:13:21.010 and then go to PowerShell 00:13:21.080 --> 00:13:26.680 and then run it as an administrator. 00:13:27.040 --> 00:13:30.050 Here we're going to paste this command 00:13:30.120 --> 00:13:31.800 and we can see 00:13:31.866 --> 00:13:34.290 the Android Home variable is here. 00:13:34.360 --> 00:13:35.240 We should be all set. 00:13:35.306 --> 00:13:37.090 We can just close this. 00:13:37.160 --> 00:13:39.320 Now we're ready to prepare 00:13:39.386 --> 00:13:41.267 our Android device. 00:13:41.480 --> 00:13:43.040 We're going to use that device 00:13:43.106 --> 00:13:46.000 to actually run our React Native project 00:13:46.066 --> 00:13:47.970 that we're about to create. 00:13:48.040 --> 00:13:50.650 You can just click on more actions here, 00:13:50.720 --> 00:13:54.334 go to Virtual Device Manager, and here 00:13:54.400 --> 00:13:55.930 we're going to create a new device. 00:13:56.000 --> 00:13:57.570 We're going to use this device 00:13:57.640 --> 00:14:00.330 throughout our whole course. 00:14:00.400 --> 00:14:02.650 Click on Create New Device. 00:14:02.720 --> 00:14:05.250 We're going to search for Pixel 4A 00:14:05.320 --> 00:14:07.170 because that's my favorite phone. 00:14:07.240 --> 00:14:09.530 I actually had it and owned it. 00:14:09.600 --> 00:14:12.290 Now we're going to click on Next. 00:14:12.360 --> 00:14:13.440 Vanilla ice cream is 00:14:13.506 --> 00:14:14.840 automatically selected. 00:14:14.906 --> 00:14:16.920 If something's missing for you, 00:14:16.986 --> 00:14:19.570 just make sure that you get 00:14:19.640 --> 00:14:22.530 the same version that's mentioned here. 00:14:22.600 --> 00:14:24.250 So match it with this one 00:14:24.320 --> 00:14:26.410 and match it with this one. 00:14:26.480 --> 00:14:29.610 Then click Next. 00:14:29.680 --> 00:14:31.730 Now We can just click on Finish. 00:14:31.800 --> 00:14:33.610 Now we can just launch this 00:14:33.680 --> 00:14:35.890 from the Start icon here. 00:14:35.960 --> 00:14:38.680 Then if you face any issues 00:14:38.746 --> 00:14:41.090 with running this emulator, just 00:14:41.160 --> 00:14:43.760 close Android Studio and reopen it. 00:14:43.826 --> 00:14:46.080 It should solve it for you. 00:14:46.160 --> 00:14:46.490 Great. 00:14:46.560 --> 00:14:48.680 So this has been opened. 00:14:48.746 --> 00:14:50.250 I don't need this window anymore, 00:14:50.320 --> 00:14:51.720 nor do I need this window. 00:14:51.786 --> 00:14:52.850 I can close it. 00:14:52.920 --> 00:14:54.610 I'm going to move this here. 00:14:54.680 --> 00:14:56.320 Now we are ready to install 00:14:56.386 --> 00:15:00.050 our first React Native project. 00:15:00.120 --> 00:15:04.810 For that, open the command prompt, and 00:15:04.880 --> 00:15:08.200 let's go to the desktop here by changing 00:15:08.266 --> 00:15:13.650 our directory cd, and then desktop. 00:15:13.720 --> 00:15:17.170 Here we want to use the React Native 00:15:17.240 --> 00:15:23.080 Create command that goes like this, 00:15:28.120 --> 00:15:28.520 npx @react-native-community/cli 00:15:28.586 --> 00:15:39.600 init AwesomeProject let's click on Enter, 00:15:39.720 --> 00:15:41.690 and you might be asked 00:15:41.760 --> 00:15:43.290 if you want to proceed. 00:15:43.360 --> 00:15:44.760 If you're asked that question, 00:15:44.826 --> 00:15:47.120 just click on Y on your keyboard 00:15:47.186 --> 00:15:49.370 and then click on Enter. 00:15:49.440 --> 00:15:51.600 Then you should see this huge React Native 00:15:51.666 --> 00:15:53.530 logo pop up in your terminal. 00:15:53.600 --> 00:15:55.880 This means that everything's going well 00:15:55.946 --> 00:15:58.130 and we're downloading the template. 00:15:58.200 --> 00:15:59.760 Again, this might take some time, 00:15:59.826 --> 00:16:02.530 so you need to wait for this to complete. 00:16:02.600 --> 00:16:04.720 Once this is done, you can come back 00:16:04.786 --> 00:16:06.560 to the video and we're going 00:16:06.626 --> 00:16:07.770 to actually run this. 00:16:07.840 --> 00:16:08.210 Great. 00:16:08.280 --> 00:16:10.280 Now my emulator is open. 00:16:10.346 --> 00:16:12.880 As you can see, I have the instructions 00:16:12.946 --> 00:16:16.490 to run the application on Android. 00:16:16.560 --> 00:16:18.760 The first thing that we see here 00:16:18.826 --> 00:16:20.000 is that they're asking us 00:16:20.066 --> 00:16:22.050 to have an Android emulator running. 00:16:22.120 --> 00:16:23.680 We already run this device, 00:16:23.746 --> 00:16:26.010 but if you ever need to just 00:16:26.080 --> 00:16:28.360 rerun it somehow, what you need to do is 00:16:28.426 --> 00:16:31.833 go to Android Studio on your computer, 00:16:31.900 --> 00:16:33.240 and then you're going to go 00:16:33.306 --> 00:16:36.770 to More Actions, Virtual Device Manager, 00:16:36.840 --> 00:16:39.000 and just click on the Start button here, 00:16:39.066 --> 00:16:41.930 and it should start your emulator. 00:16:42.000 --> 00:16:42.960 Great. 00:16:43.026 --> 00:16:44.850 So since we have this step completed, 00:16:44.920 --> 00:16:47.050 we can change our directory from desktop 00:16:47.120 --> 00:16:50.880 now and go and run this command, which 00:16:50.946 --> 00:16:54.410 basically runs your project on Android. 00:16:54.480 --> 00:16:58.010 Just copy this and then paste it here. 00:16:58.080 --> 00:16:59.300 Click on Enter. 00:16:59.367 --> 00:17:01.240 So this This is called Metro 00:17:01.306 --> 00:17:03.400 Bundler, and I'm going to mention it 00:17:03.466 --> 00:17:05.410 in other videos as well. 00:17:05.480 --> 00:17:06.840 Please do not turn this off 00:17:06.906 --> 00:17:09.010 when you're working on your application. 00:17:09.080 --> 00:17:10.530 What this terminal does 00:17:10.600 --> 00:17:12.480 is it constantly checks on 00:17:12.546 --> 00:17:15.730 any file updates in your project. 00:17:15.800 --> 00:17:18.400 If any of them changes, it will update 00:17:18.466 --> 00:17:20.610 your application in the emulator. 00:17:20.680 --> 00:17:22.400 If you turn this off when you're 00:17:22.466 --> 00:17:24.360 working on your app, the changes 00:17:24.426 --> 00:17:26.440 that you're going to make are not 00:17:26.506 --> 00:17:28.650 going to be reflected in the emulator. 00:17:28.720 --> 00:17:31.440 Definitely make sure this is on at all 00:17:31.506 --> 00:17:33.690 times when you're working on the project. 00:17:33.760 --> 00:17:36.320 Now, we just got an error here, 00:17:36.386 --> 00:17:39.210 and I wanted you to see this error 00:17:39.280 --> 00:17:41.120 because React Native actually 00:17:41.186 --> 00:17:44.010 has an issue with Gradle. 00:17:44.080 --> 00:17:45.920 If you're having issues with the Gradle, 00:17:45.986 --> 00:17:49.730 you're going to see it in that terminal. 00:17:49.800 --> 00:17:52.200 I'm not sure exactly why they haven't 00:17:52.266 --> 00:17:55.480 updated their code and why they don't 00:17:55.546 --> 00:17:57.130 keep up with the Gradle versions. 00:17:57.200 --> 00:17:58.574 If you don't have this issue, 00:17:58.640 --> 00:17:59.960 then great, they might have already 00:18:00.026 --> 00:18:02.050 They updated everything they needed to. 00:18:02.120 --> 00:18:04.210 But just in case you see this, 00:18:04.280 --> 00:18:08.650 currently for React Native version 0.76, 00:18:08.720 --> 00:18:10.810 which is what we installed, 00:18:10.880 --> 00:18:17.170 the Gradle version is going to be 8.11.1. 00:18:17.240 --> 00:18:18.730 If you're having issues with this, 00:18:18.800 --> 00:18:22.640 please do comment on the video and we can 00:18:22.706 --> 00:18:24.650 get you the Gradle version that you need. 00:18:24.720 --> 00:18:26.200 I'm actually updating this video 00:18:26.266 --> 00:18:27.930 because of this issue. 00:18:28.000 --> 00:18:30.320 To fix this, just open your Awesome 00:18:30.386 --> 00:18:34.160 project and then go to Android, then go 00:18:34.226 --> 00:18:38.040 to Gradle, Rapper, and then Gradle Rapper 00:18:38.106 --> 00:18:41.730 file that is properties file. 00:18:41.800 --> 00:18:45.960 Click on Edit, and then And here, 00:18:46.026 --> 00:18:52.400 you're going to change this to 8.11.1. 00:18:53.200 --> 00:18:54.840 Then you're going to save this. 00:18:54.906 --> 00:18:56.333 Don't forget to save it. 00:18:56.400 --> 00:18:59.320 We can just close this and we can rerun 00:18:59.386 --> 00:19:01.970 the same that we ran before. 00:19:02.040 --> 00:19:03.600 To rerun the same command, 00:19:03.666 --> 00:19:05.800 by the way, you can click on up arrow 00:19:05.866 --> 00:19:09.370 on your keyboard and then click on Enter. 00:19:09.440 --> 00:19:10.840 This should rerun, and I think it 00:19:10.906 --> 00:19:13.560 will be successful now. 00:19:13.640 --> 00:19:16.214 As a recommendation, if you 00:19:16.280 --> 00:19:17.160 need other Gradle versions 00:19:17.226 --> 00:19:22.080 and 8.11.1 is also not sufficient, you 00:19:22.146 --> 00:19:25.560 can go and google Gradle Distributions. 00:19:27.040 --> 00:19:30.930 You can go to the GitHub link right here. 00:19:31.000 --> 00:19:32.800 This is going to have information 00:19:32.866 --> 00:19:34.810 about all of the releases they did. 00:19:34.880 --> 00:19:37.490 You don't want any pre-release items. 00:19:37.560 --> 00:19:38.760 Maybe the latest version 00:19:38.826 --> 00:19:40.760 could work, but it didn't 00:19:40.826 --> 00:19:42.930 work for me now, so I didn't use it. 00:19:43.000 --> 00:19:44.440 We're skipping the ones 00:19:44.506 --> 00:19:47.090 that say pre-release. 00:19:47.160 --> 00:19:49.160 Then I just checked this version 00:19:49.226 --> 00:19:50.890 and it worked out, so that's great. 00:19:50.960 --> 00:19:52.240 I'm sorry that it's a pain. 00:19:52.306 --> 00:19:54.450 If it's not a pain anymore, that's great. 00:19:54.520 --> 00:19:56.800 But if it is, you can just check it 00:19:56.866 --> 00:19:59.930 out here and see which one works out. 00:20:00.000 --> 00:20:01.570 Let's wait for this to be completed 00:20:01.640 --> 00:20:02.720 and you can come back to 00:20:02.786 --> 00:20:04.533 the video once that's done. 00:20:04.600 --> 00:20:04.960 Great. 00:20:05.026 --> 00:20:06.490 You see that our build was successful 00:20:06.560 --> 00:20:08.240 and our application actually 00:20:08.306 --> 00:20:11.050 loaded already in the emulator. 00:20:11.120 --> 00:20:12.880 You can scroll and see how 00:20:12.946 --> 00:20:15.450 the initial application looks like. 00:20:15.520 --> 00:20:19.250 We completed our first project 00:20:19.320 --> 00:20:21.240 and installed the application 00:20:21.306 --> 00:20:23.810 and got it running on Android. 00:20:23.880 --> 00:20:26.280 Now, you're going to see me working with 00:20:26.346 --> 00:20:28.890 macOS, mainly in the following videos. 00:20:28.960 --> 00:20:30.694 And if there are going to be 00:20:30.760 --> 00:20:32.360 any differences that are very important 00:20:32.426 --> 00:20:33.880 to mention, I will mention them 00:20:33.946 --> 00:20:35.890 for Windows specifically. 00:20:35.960 --> 00:20:38.734 Otherwise, most of the commands that I'm 00:20:38.800 --> 00:20:40.494 going to use are going to be the same. 00:20:40.560 --> 00:20:41.490 So don't worry. 00:20:41.560 --> 00:20:43.090 Just follow the videos. 00:20:43.160 --> 00:20:45.130 You're going to have no issues. 00:20:45.200 --> 00:20:46.854 Just make sure that if I go 00:20:46.920 --> 00:20:48.280 into the terminal and I'm trying 00:20:48.346 --> 00:20:50.650 to do something in the iOS folder, 00:20:50.720 --> 00:20:52.440 you don't do the same because you don't 00:20:52.506 --> 00:20:56.170 have Xcode, which is a tool on macOS 00:20:56.240 --> 00:20:59.090 that cannot be installed on Windows. 00:20:59.160 --> 00:21:01.520 I'm going to this in the notes as well 00:21:01.586 --> 00:21:03.040 for Windows, and I will attach 00:21:03.106 --> 00:21:05.610 those notes to every video in the course 00:21:05.680 --> 00:21:06.960 just in case you need to look at it 00:21:07.026 --> 00:21:09.530 when viewing specific videos. 00:21:09.600 --> 00:21:10.960 So don't ever do anything 00:21:11.026 --> 00:21:13.080 for iOS folder inside your project 00:21:13.146 --> 00:21:15.290 and just worry about Android. 00:21:15.360 --> 00:21:16.840 In the next video, we're going 00:21:16.906 --> 00:21:19.160 to go over the differences between macOS 00:21:19.226 --> 00:21:21.450 and Windows, so please do watch that, 00:21:21.520 --> 00:21:23.610 and it will save you a lot of time. 00:21:23.680 --> 00:21:24.934 Follow the course, and I 00:21:25.000 --> 00:21:26.490 hope that you're going to love it. 00:21:26.560 --> 00:21:27.920 If you have any questions, 00:21:27.986 --> 00:21:29.170 certainly reach out. 00:21:29.240 --> 00:21:30.734 If you encounter any issues 00:21:30.800 --> 00:21:31.930 with the Windows in the course, 00:21:32.000 --> 00:21:33.160 please do let me know or 00:21:33.226 --> 00:21:35.450 write a question in the Q&A section. 00:21:35.520 --> 00:21:37.000 I'm here to support you, 00:21:37.066 --> 00:21:39.040 and we have also a huge community 00:21:39.106 --> 00:21:40.890 that can answer your questions. 00:21:40.960 --> 00:21:42.640 I'll try to do my best to help you 00:21:42.706 --> 00:21:44.770 resolve your issues as well. 00:21:44.840 --> 00:21:47.614 So thank you so much for watching, and 00:21:47.680 --> 00:21:49.160 I hope you have a great rest of the day.