WEBVTT 00:00.080 --> 00:02.120 Hi everyone, and welcome back. 00:02.120 --> 00:07.130 In this video, we're going to get started with installing all the necessary tools to work with React 00:07.130 --> 00:08.390 Native CLI. 00:08.420 --> 00:14.330 Before we begin, it's important to note that the installation process may change over time as React 00:14.330 --> 00:16.220 Native releases newer versions. 00:16.220 --> 00:18.920 I will always try to update these videos. 00:18.920 --> 00:25.430 However, it is always best to refer to the official documentation for the most up to date instructions. 00:25.430 --> 00:31.670 If this video differs from the documentation, always follow the documentation as your primary resource. 00:31.700 --> 00:37.040 I'm going to place a link to the documentation in the resources folder with this video. 00:37.040 --> 00:42.500 And today we're going to be focusing on setting up the CLI environment for macOS. 00:42.530 --> 00:46.460 It is recommended to have around ten gigabytes of free space. 00:46.460 --> 00:51.860 And please make sure that you have the latest macOS version for smooth installation. 00:51.860 --> 00:59.480 If your macOS is not the latest, you might face issues because of the latest React Native releases. 00:59.480 --> 01:04.070 While I believe this video will guide you through the process without any issues. 01:04.100 --> 01:10.190 It's worth mentioning that everyone's computer usage can be different if you have prior development 01:10.190 --> 01:15.320 experience, or have already installed some tools for Expo, Flutter or React Native. 01:15.350 --> 01:18.350 Please note that there might be some clashes. 01:18.350 --> 01:24.320 We are not going to be using Expo in this course, and we already went through the reasons of why in 01:24.320 --> 01:25.610 the previous videos. 01:25.610 --> 01:32.300 If you want to use Expo, you can always get a refund and choose the course that best fits your needs. 01:32.390 --> 01:38.060 If you encounter any issues during the installation, you can always ask your questions in the Q&A section 01:38.060 --> 01:38.840 below. 01:38.870 --> 01:46.220 Now, let's jump right into the documentation and find out how to get macOS ready for iOS development. 01:46.220 --> 01:47.720 So first things first. 01:47.720 --> 01:51.500 As I mentioned, we're going to go to the React Native documentation. 01:51.500 --> 01:56.930 So for that we're going to go to React native.dev website. 01:57.680 --> 02:00.410 And here we're going to find the development tab. 02:00.410 --> 02:06.500 We're going to click on guides Environment setup and then set up your environment. 02:06.500 --> 02:08.750 We're going to see that automatically. 02:08.750 --> 02:15.020 Mac OS will be selected as development OS and the target OS will be iOS. 02:15.050 --> 02:16.970 This is exactly what we want. 02:17.000 --> 02:24.530 We're going to have to start with installing node watchman, React Native, CLI, Xcode, and Cocoapods. 02:24.530 --> 02:26.930 For this we're going to need a terminal. 02:26.930 --> 02:33.530 And if you've never used a terminal on your Mac OS, just click on Command Space, then type in terminal 02:33.530 --> 02:36.710 and just click on the first software that appears here. 02:36.770 --> 02:43.520 I would suggest for you to drag this over here just because we're going to be using it a lot. 02:44.030 --> 02:44.630 Great. 02:44.630 --> 02:48.080 So the first thing that I want to try is to install homebrew. 02:48.110 --> 02:54.470 We're going to be using homebrew to install a bunch of other things that we need for React Native CLI. 02:54.500 --> 03:01.370 To do that, we're going to need to go to this website, and we're going to copy this command and paste 03:01.400 --> 03:02.030 it here. 03:02.060 --> 03:03.230 click on enter. 03:03.260 --> 03:05.870 Then you're going to be asked for your password. 03:05.870 --> 03:06.980 Please enter it. 03:06.980 --> 03:11.510 You might not see it being written, but know that you are writing it. 03:11.510 --> 03:16.370 So just enter your password and click on enter and then click on enter. 03:16.370 --> 03:19.880 One more time and it's going to start the installation process. 03:19.880 --> 03:23.090 Meanwhile I'm going to tell you a bit about homebrew. 03:23.120 --> 03:29.450 So homebrew is a package manager for macOS that allows you to easily install and manage various software 03:29.450 --> 03:30.320 packages. 03:30.350 --> 03:36.230 It simplifies the process of installing tools that we need mentioned in the documentation, such as 03:36.230 --> 03:41.360 node, watchman, and other dependencies required for React Native CLI. 03:42.020 --> 03:47.360 With homebrew, you can conveniently keep your development environment up to date, and that is why 03:47.360 --> 03:49.670 we're installing this in the first place. 03:49.670 --> 03:54.800 So once yours is installed as well, you can come back to this video and continue watching it so that 03:54.800 --> 04:00.500 we get into installing the other tools that we need for React Native CLI iOS development. 04:00.680 --> 04:01.430 Great. 04:01.460 --> 04:07.520 Now that this is installed, we are given next steps to finish the installation process. 04:07.550 --> 04:08.930 Please do not skip this. 04:08.930 --> 04:10.460 This is super important. 04:10.460 --> 04:15.380 If you disregard this, your environment is not going to be working correctly. 04:15.380 --> 04:21.200 So just select this, copy it and paste it here and click on enter. 04:21.200 --> 04:24.020 And you're going to be all set with homebrew. 04:24.050 --> 04:34.010 If you want to make sure that homebrew is installed, you can just type in brew and then dash V and 04:34.010 --> 04:35.030 click on enter. 04:35.030 --> 04:39.380 And you're going to see that now you're using new homebrew version. 04:39.410 --> 04:40.460 Great. 04:40.700 --> 04:46.130 The next thing that we're going to need to do is actually install the node. 04:46.130 --> 04:49.490 So for that we're going to be using the same brew command. 04:49.490 --> 04:51.620 And we're going to do brew install node. 04:51.620 --> 04:55.130 So let's just select this and copy it. 04:55.160 --> 04:57.890 Paste it here click on enter. 04:57.890 --> 05:02.180 And now I'm going to talk about what node is exactly. 05:02.210 --> 05:07.400 Node is a JavaScript runtime built on Chrome's JavaScript engine. 05:07.430 --> 05:13.850 It allows you to execute JavaScript code outside of a web browser, making it essential for running 05:13.850 --> 05:18.560 React Native CLI, as React Native is dependent on JavaScript. 05:18.590 --> 05:24.800 Node provides the necessary environments to build, test, and run your React Native applications, 05:24.800 --> 05:27.260 so that is why we need to install it. 05:27.650 --> 05:32.840 Once this is installed for you, please come back to the video and we're going to continue the installation 05:32.840 --> 05:33.650 process. 05:33.920 --> 05:34.310 Great. 05:34.340 --> 05:37.970 Now that node is installed we're going to start installing watchman. 05:37.970 --> 05:43.130 So let's just copy this and paste it here and click on enter. 05:43.130 --> 05:43.730 And Watchman. 05:43.730 --> 05:45.680 Installation is going to begin. 05:46.070 --> 05:49.160 And I'm going to tell you a bit about watchman as well. 05:49.190 --> 05:56.990 Watchman is a tool developed by Facebook now known as meta that watches files and triggers actions when 05:56.990 --> 05:59.450 they change in React Native development. 05:59.480 --> 06:06.740 Watchman plays a crucial role in monitoring file changes and efficiently updating the app during development. 06:06.740 --> 06:12.050 It significantly speeds up the development process by automating repetitive tasks. 06:12.050 --> 06:18.080 It tracks what changes you make to your application while you have your simulators up and running, 06:18.080 --> 06:24.530 and makes sure that it updates your simulator and application as you're making changes to the files 06:24.530 --> 06:30.230 without actual need to rebuild the whole project to see your changes appear in the simulator. 06:30.230 --> 06:34.730 So watch my significantly will improve the time you need for development. 06:34.760 --> 06:39.260 Now let's wait for this to finish up and you can come back to the video once you're ready. 06:39.290 --> 06:39.800 Great. 06:39.800 --> 06:41.660 So it actually finished up right now. 06:41.660 --> 06:48.140 The next step is going to be installing the Xcode, which is Apple's integrated development environment 06:48.140 --> 06:49.310 or IDE. 06:49.520 --> 06:55.670 It provides a comprehensive set of tools including a code editor, debugger and simulator, which is 06:55.670 --> 07:02.630 necessary for iOS app development to run and test iOS applications created with React Native, we need 07:02.630 --> 07:05.060 to have Xcode installed on our system. 07:05.060 --> 07:08.780 So to do that, we're going to need to open up the App Store. 07:08.810 --> 07:11.690 You're going to search for Xcode. 07:14.120 --> 07:19.760 You're going to go here, and we're going to have to make sure before we do this that we can actually 07:19.760 --> 07:21.680 download the latest Xcode. 07:21.680 --> 07:26.900 If you cannot download the latest Xcode and you get a warning here, it means that you have outdated 07:26.900 --> 07:27.830 macOS. 07:27.860 --> 07:33.260 First, you're going to need to update your operating system, and then you're going to need to download 07:33.260 --> 07:34.130 Xcode. 07:34.130 --> 07:41.180 So now I am running on the latest macOS, so I can download Xcode, and I'm going to click on here, 07:41.180 --> 07:43.520 and the download process is going to start. 07:43.520 --> 07:49.520 I'd expect it to take around 20 to 40 minutes depending on the speed of your internet and your computer. 07:49.520 --> 07:52.910 So just wait for a couple of minutes and come back to the video. 07:52.910 --> 07:55.550 Once your Xcode installation has been completed. 07:55.550 --> 07:58.310 And then we're going to continue on together. 07:58.340 --> 08:03.920 Now that our Xcode has been installed, we're ready to open it up and finish up all the installation 08:03.950 --> 08:07.520 processes that might come with opening it for the first time. 08:07.520 --> 08:09.560 So let's just click on open. 08:12.020 --> 08:17.120 I'm going to close down this App Store window because we're not going to need it anymore. 08:19.550 --> 08:22.370 Let's agree to the terms and conditions. 08:22.370 --> 08:24.920 You might need to enter your password. 08:27.050 --> 08:27.560 Great. 08:27.560 --> 08:30.080 And now we see that macOS has been checked. 08:30.080 --> 08:34.190 But we also need the iOS to be checked. 08:34.820 --> 08:39.200 We don't really need watchOS or tvOS, so I'm not going to check those. 08:39.200 --> 08:45.890 You can check those if you want to create any applications later, connect it to watchOS and tvOS or 08:45.920 --> 08:47.720 even the vision OS. 08:47.720 --> 08:50.900 So now let's just click on download and Install. 08:50.930 --> 08:54.110 Some additional components are going to be downloaded. 08:54.110 --> 08:55.760 This is just going to take a minute. 08:55.760 --> 09:02.540 And after that all we have to do is verify that our command line tools is installed and selected in 09:02.540 --> 09:03.800 the locations panel. 09:03.800 --> 09:06.370 So I'm going to click on continue here. 09:06.520 --> 09:08.650 And then we're going to go to Xcode. 09:08.650 --> 09:10.420 We're going to click on settings. 09:10.420 --> 09:12.640 And we're going to go to locations. 09:12.640 --> 09:15.460 And here you will see command line tools. 09:15.460 --> 09:18.940 And you're going to see that something is selected and shown here. 09:18.940 --> 09:22.390 But below it it will say no Xcode selected. 09:22.390 --> 09:24.610 We have to make sure that this is not appearing. 09:24.610 --> 09:30.430 So just click on it and select it one more time and enter your password. 09:32.470 --> 09:33.700 Click on enter. 09:33.700 --> 09:36.100 And now we're going to see this appear here. 09:36.100 --> 09:40.210 Which means that we did select the CLI that we needed. 09:40.210 --> 09:43.540 So now the simulators are being downloaded. 09:43.540 --> 09:45.310 So we're going to have to wait for that. 09:45.340 --> 09:46.840 It's going to take some time. 09:46.840 --> 09:49.960 So come back to the video once you're ready. 09:49.990 --> 09:50.470 Great. 09:50.470 --> 09:53.350 So this is all we needed to do actually with Xcode. 09:53.350 --> 09:55.750 So we can just get out of here. 09:57.220 --> 10:02.650 And the last thing that we're going to need to do is make sure we have Cocoapods installed. 10:02.650 --> 10:09.040 And this cocoa pods are actually something that depends on Ruby, and there are two ways of installing 10:09.040 --> 10:09.580 it. 10:09.610 --> 10:16.300 One way is using the gem which is given here, but it depends on the ruby version that you're running. 10:16.330 --> 10:21.370 And another way is with homebrew, which we're going to be using today. 10:21.400 --> 10:28.600 So to check which Ruby version you're running, you can just do Ruby Dash V and you're going to see 10:28.600 --> 10:29.200 your version. 10:29.200 --> 10:32.320 Right now I'm running on 2.6.1. 10:32.350 --> 10:39.700 This is the default version that comes with macOS, so we're all good to install Cocoapods using brew. 10:39.730 --> 10:45.910 I'm going to clear my terminal and I'm going to do brew install Cocoapods. 10:46.600 --> 10:49.870 So I do want to explain a bit what Cocoapods is. 10:49.870 --> 10:51.250 So let's talk about that. 10:51.280 --> 10:57.130 Cocoapods is a dependency manager for Swift or Objective-C that is used when creating iOS applications, 10:57.130 --> 10:58.660 only using Xcode. 10:58.660 --> 11:05.620 So in React Native development, Cocoapods is used to integrate third party libraries and dependencies 11:05.620 --> 11:07.900 into your iOS applications. 11:07.960 --> 11:13.720 If you do not know what dependencies and third party libraries are, you will get to know to it during 11:13.720 --> 11:14.350 this course. 11:14.350 --> 11:15.190 So no worries. 11:15.190 --> 11:21.220 But just to give you an idea, it simplifies the process of adding, updating and managing these dependencies 11:21.220 --> 11:27.190 created by other people and developers that you can use for your applications, saving you time and 11:27.190 --> 11:29.680 effort to create various features. 11:29.710 --> 11:32.590 Now our Cocoapods has been installed successfully. 11:32.590 --> 11:39.130 If you want to check on that, you can do pod to dashes and then version, and then you're going to 11:39.130 --> 11:43.750 see that you have latest version of Cocoapods. 11:43.780 --> 11:44.260 Great. 11:44.260 --> 11:46.450 So I'm going to clear my terminal. 11:46.450 --> 11:53.470 And now what we've got to do is make sure that our React Native CLI installation went smoothly. 11:53.470 --> 11:56.770 And we're going to create a new project for this. 11:56.770 --> 11:59.710 So my terminal is already cleared. 11:59.710 --> 12:06.820 And what we need to do for creating new project is MPX React Native latest. 12:06.820 --> 12:09.130 And then we're going to do initialize. 12:09.130 --> 12:11.410 And we're just going to write init for this. 12:11.410 --> 12:12.880 And then the project name. 12:12.880 --> 12:16.180 So let's call this awesome project and click on enter. 12:16.870 --> 12:20.200 Now we do want to install all of these packages. 12:20.200 --> 12:22.090 So I'm going to say why. 12:22.090 --> 12:23.830 And then click on enter. 12:23.980 --> 12:30.730 And now the initial React Native template downloading process is going to start. 12:30.970 --> 12:34.840 And you're going to see the react logo appear in your terminal. 12:34.840 --> 12:38.980 And we're going to start downloading the initial template for our application. 12:38.980 --> 12:44.830 This template is actually going to be good for both Android and iOS, but since we're only setting up 12:44.830 --> 12:50.200 the development environment for iOS right now, we're just going to download this template and run it 12:50.200 --> 12:54.340 to make sure that everything went smoothly for iOS. 12:54.370 --> 12:57.850 Now this is asking if we want to install Cocoapods. 12:57.880 --> 13:00.490 Now let's just say yes. 13:00.520 --> 13:05.980 For that, you are going to need to click on Y and we're going to install the Cocoapods. 13:05.980 --> 13:07.870 and then we can run the project. 13:07.870 --> 13:12.250 So wait for this process to complete and come back to the video once you're ready. 13:12.280 --> 13:12.700 Great. 13:12.700 --> 13:17.650 So now this is done, and we have specific instructions on how to run this for iOS. 13:17.680 --> 13:24.550 The first instruction will get us to the awesome project folder, where our project files are going 13:24.550 --> 13:25.480 to be located. 13:25.480 --> 13:28.510 So we can just copy this and paste it here. 13:28.510 --> 13:32.320 And now we're going to see that we are inside of awesome project. 13:32.320 --> 13:37.840 And the next thing to do is do MPX React Native run iOS. 13:37.870 --> 13:40.420 This is going to launch the simulator. 13:40.420 --> 13:46.180 And inside that simulator our initial application template is going to appear. 13:46.180 --> 13:49.420 And this way we're going to make sure that everything worked fine. 13:49.420 --> 13:57.730 Now if you do not get to this step and you have some problems before getting to this step, this means 13:57.730 --> 14:03.280 that something went wrong with your installation, and there might be many reasons of why this happened. 14:03.280 --> 14:06.490 So if you do have any issues. 14:06.490 --> 14:14.500 Please copy the whole output inside your terminal and paste it in the Q&A section, and I will try to 14:14.530 --> 14:15.940 help you out. 14:16.180 --> 14:17.140 Okay, great. 14:17.140 --> 14:22.180 So now I'm going to copy this and paste it here and click on enter. 14:24.340 --> 14:27.760 And now the Metro Bundler terminal has started up. 14:27.760 --> 14:32.410 I'm not going to pay attention to this error because this is just a React Native error. 14:32.410 --> 14:36.820 And I don't want to talk about what the Metro bundler exactly is. 14:36.850 --> 14:43.570 This is going to pop up anytime you're going to be running your application, and this is going to be 14:43.570 --> 14:50.260 needed to be opened anytime you're making changes to your application, even when building the app, 14:50.290 --> 14:52.330 automatically your files are changing. 14:52.330 --> 14:58.090 This means that Metro Bundler needs to be running, and if you close down the Metro Bundler terminal, 14:58.090 --> 15:04.420 your watchman, which we installed, is not going to be taking a look at your files and basically your 15:04.420 --> 15:11.470 simulator, which is this one is going to stop communicating with your file system that you might be 15:11.470 --> 15:12.190 changing. 15:12.190 --> 15:17.080 So anytime you're developing and you're actually trying to change things in your application, please 15:17.080 --> 15:20.110 make sure that Metro bundler is open and it's not closed down. 15:20.110 --> 15:25.660 And then if you want to stop the development for the day, you can close down your Metro bundler and 15:25.660 --> 15:28.000 just open it up once more. 15:28.000 --> 15:34.510 Whenever you start working on your application, it should open up automatically anytime you run this 15:34.510 --> 15:35.170 command. 15:35.200 --> 15:42.820 However, if it does not, you can always use npm start which is going to look like this. 15:43.690 --> 15:51.520 So you would basically go to your awesome project and CD here stands for Change Directory. 15:51.520 --> 15:57.550 And then you would do npm start and the metro bundler would automatically get started. 15:57.550 --> 16:04.840 And then you would need to open up another terminal and type in npm react native run iOS. 16:04.840 --> 16:06.580 And this will run your application. 16:06.580 --> 16:10.870 But usually if you just do this, the terminal should pop up on its own. 16:12.070 --> 16:16.750 Okay, so we're just now going to wait for the application to get built. 16:16.750 --> 16:22.630 And once this is done, you're going to see your application template appear inside the terminal. 16:22.630 --> 16:27.370 So let's wait for this to complete and come back to the video once you're ready. 16:27.400 --> 16:27.850 Great. 16:27.880 --> 16:31.510 The build was successful and now our application is launching. 16:31.510 --> 16:34.930 We're going to see how the initial application looks in the simulator. 16:34.930 --> 16:36.160 So this is how it looks. 16:36.160 --> 16:37.510 You can scroll here. 16:37.510 --> 16:40.360 And we have successfully completed all the steps. 16:40.360 --> 16:43.480 We have installed the latest React Native environment setup. 16:43.480 --> 16:48.490 And because we did everything successfully you're able to see this running in the simulator. 16:48.520 --> 16:54.400 Now I do want to say that if you have any questions or run into any issues during the installation process, 16:54.430 --> 16:57.340 don't hesitate to ask the question in the Q&A section. 16:57.340 --> 17:04.030 And don't forget to copy paste the output from your terminal there, because that way I'm going to be 17:04.060 --> 17:05.650 able to help you quicker. 17:05.680 --> 17:08.500 Thanks so much for watching and I'll see you in the next video.