Hi everyone, and welcome back.
In this video, we're going to get started with installing all the necessary tools to work with React
Native CLI.
Before we begin, it's important to note that the installation process may change over time as React
Native releases newer versions.
I will always try to update these videos.
However, it is always best to refer to the official documentation for the most up to date instructions.
If this video differs from the documentation, always follow the documentation as your primary resource.
I'm going to place a link to the documentation in the resources folder with this video.
And today we're going to be focusing on setting up the CLI environment for macOS.
It is recommended to have around ten gigabytes of free space.
And please make sure that you have the latest macOS version for smooth installation.
If your macOS is not the latest, you might face issues because of the latest React Native releases.
While I believe this video will guide you through the process without any issues.
It's worth mentioning that everyone's computer usage can be different if you have prior development
experience, or have already installed some tools for Expo, Flutter or React Native.
Please note that there might be some clashes.
We are not going to be using Expo in this course, and we already went through the reasons of why in
the previous videos.
If you want to use Expo, you can always get a refund and choose the course that best fits your needs.
If you encounter any issues during the installation, you can always ask your questions in the Q&A section
below.
Now, let's jump right into the documentation and find out how to get macOS ready for iOS development.
So first things first.
As I mentioned, we're going to go to the React Native documentation.
So for that we're going to go to React native.dev website.
And here we're going to find the development tab.
We're going to click on guides Environment setup and then set up your environment.
We're going to see that automatically.
Mac OS will be selected as development OS and the target OS will be iOS.
This is exactly what we want.
We're going to have to start with installing node watchman, React Native, CLI, Xcode, and Cocoapods.
For this we're going to need a terminal.
And if you've never used a terminal on your Mac OS, just click on Command Space, then type in terminal
and just click on the first software that appears here.
I would suggest for you to drag this over here just because we're going to be using it a lot.
Great.
So the first thing that I want to try is to install homebrew.
We're going to be using homebrew to install a bunch of other things that we need for React Native CLI.
To do that, we're going to need to go to this website, and we're going to copy this command and paste
it here.
click on enter.
Then you're going to be asked for your password.
Please enter it.
You might not see it being written, but know that you are writing it.
So just enter your password and click on enter and then click on enter.
One more time and it's going to start the installation process.
Meanwhile I'm going to tell you a bit about homebrew.
So homebrew is a package manager for macOS that allows you to easily install and manage various software
packages.
It simplifies the process of installing tools that we need mentioned in the documentation, such as
node, watchman, and other dependencies required for React Native CLI.
With homebrew, you can conveniently keep your development environment up to date, and that is why
we're installing this in the first place.
So once yours is installed as well, you can come back to this video and continue watching it so that
we get into installing the other tools that we need for React Native CLI iOS development.
Great.
Now that this is installed, we are given next steps to finish the installation process.
Please do not skip this.
This is super important.
If you disregard this, your environment is not going to be working correctly.
So just select this, copy it and paste it here and click on enter.
And you're going to be all set with homebrew.
If you want to make sure that homebrew is installed, you can just type in brew and then dash V and
click on enter.
And you're going to see that now you're using new homebrew version.
Great.
The next thing that we're going to need to do is actually install the node.
So for that we're going to be using the same brew command.
And we're going to do brew install node.
So let's just select this and copy it.
Paste it here click on enter.
And now I'm going to talk about what node is exactly.
Node is a JavaScript runtime built on Chrome's JavaScript engine.
It allows you to execute JavaScript code outside of a web browser, making it essential for running
React Native CLI, as React Native is dependent on JavaScript.
Node provides the necessary environments to build, test, and run your React Native applications,
so that is why we need to install it.
Once this is installed for you, please come back to the video and we're going to continue the installation
process.
Great.
Now that node is installed we're going to start installing watchman.
So let's just copy this and paste it here and click on enter.
And Watchman.
Installation is going to begin.
And I'm going to tell you a bit about watchman as well.
Watchman is a tool developed by Facebook now known as meta that watches files and triggers actions when
they change in React Native development.
Watchman plays a crucial role in monitoring file changes and efficiently updating the app during development.
It significantly speeds up the development process by automating repetitive tasks.
It tracks what changes you make to your application while you have your simulators up and running,
and makes sure that it updates your simulator and application as you're making changes to the files
without actual need to rebuild the whole project to see your changes appear in the simulator.
So watch my significantly will improve the time you need for development.
Now let's wait for this to finish up and you can come back to the video once you're ready.
Great.
So it actually finished up right now.
The next step is going to be installing the Xcode, which is Apple's integrated development environment
or IDE.
It provides a comprehensive set of tools including a code editor, debugger and simulator, which is
necessary for iOS app development to run and test iOS applications created with React Native, we need
to have Xcode installed on our system.
So to do that, we're going to need to open up the App Store.
You're going to search for Xcode.
You're going to go here, and we're going to have to make sure before we do this that we can actually
download the latest Xcode.
If you cannot download the latest Xcode and you get a warning here, it means that you have outdated
macOS.
First, you're going to need to update your operating system, and then you're going to need to download
Xcode.
So now I am running on the latest macOS, so I can download Xcode, and I'm going to click on here,
and the download process is going to start.
I'd expect it to take around 20 to 40 minutes depending on the speed of your internet and your computer.
So just wait for a couple of minutes and come back to the video.
Once your Xcode installation has been completed.
And then we're going to continue on together.
Now that our Xcode has been installed, we're ready to open it up and finish up all the installation
processes that might come with opening it for the first time.
So let's just click on open.
I'm going to close down this App Store window because we're not going to need it anymore.
Let's agree to the terms and conditions.
You might need to enter your password.
Great.
And now we see that macOS has been checked.
But we also need the iOS to be checked.
We don't really need watchOS or tvOS, so I'm not going to check those.
You can check those if you want to create any applications later, connect it to watchOS and tvOS or
even the vision OS.
So now let's just click on download and Install.
Some additional components are going to be downloaded.
This is just going to take a minute.
And after that all we have to do is verify that our command line tools is installed and selected in
the locations panel.
So I'm going to click on continue here.
And then we're going to go to Xcode.
We're going to click on settings.
And we're going to go to locations.
And here you will see command line tools.
And you're going to see that something is selected and shown here.
But below it it will say no Xcode selected.
We have to make sure that this is not appearing.
So just click on it and select it one more time and enter your password.
Click on enter.
And now we're going to see this appear here.
Which means that we did select the CLI that we needed.
So now the simulators are being downloaded.
So we're going to have to wait for that.
It's going to take some time.
So come back to the video once you're ready.
Great.
So this is all we needed to do actually with Xcode.
So we can just get out of here.
And the last thing that we're going to need to do is make sure we have Cocoapods installed.
And this cocoa pods are actually something that depends on Ruby, and there are two ways of installing
it.
One way is using the gem which is given here, but it depends on the ruby version that you're running.
And another way is with homebrew, which we're going to be using today.
So to check which Ruby version you're running, you can just do Ruby Dash V and you're going to see
your version.
Right now I'm running on 2.6.1.
This is the default version that comes with macOS, so we're all good to install Cocoapods using brew.
I'm going to clear my terminal and I'm going to do brew install Cocoapods.
So I do want to explain a bit what Cocoapods is.
So let's talk about that.
Cocoapods is a dependency manager for Swift or Objective-C that is used when creating iOS applications,
only using Xcode.
So in React Native development, Cocoapods is used to integrate third party libraries and dependencies
into your iOS applications.
If you do not know what dependencies and third party libraries are, you will get to know to it during
this course.
So no worries.
But just to give you an idea, it simplifies the process of adding, updating and managing these dependencies
created by other people and developers that you can use for your applications, saving you time and
effort to create various features.
Now our Cocoapods has been installed successfully.
If you want to check on that, you can do pod to dashes and then version, and then you're going to
see that you have latest version of Cocoapods.
Great.
So I'm going to clear my terminal.
And now what we've got to do is make sure that our React Native CLI installation went smoothly.
And we're going to create a new project for this.
So my terminal is already cleared.
And what we need to do for creating new project is MPX React Native latest.
And then we're going to do initialize.
And we're just going to write init for this.
And then the project name.
So let's call this awesome project and click on enter.
Now we do want to install all of these packages.
So I'm going to say why.
And then click on enter.
And now the initial React Native template downloading process is going to start.
And you're going to see the react logo appear in your terminal.
And we're going to start downloading the initial template for our application.
This template is actually going to be good for both Android and iOS, but since we're only setting up
the development environment for iOS right now, we're just going to download this template and run it
to make sure that everything went smoothly for iOS.
Now this is asking if we want to install Cocoapods.
Now let's just say yes.
For that, you are going to need to click on Y and we're going to install the Cocoapods.
and then we can run the project.
So wait for this process to complete and come back to the video once you're ready.
Great.
So now this is done, and we have specific instructions on how to run this for iOS.
The first instruction will get us to the awesome project folder, where our project files are going
to be located.
So we can just copy this and paste it here.
And now we're going to see that we are inside of awesome project.
And the next thing to do is do MPX React Native run iOS.
This is going to launch the simulator.
And inside that simulator our initial application template is going to appear.
And this way we're going to make sure that everything worked fine.
Now if you do not get to this step and you have some problems before getting to this step, this means
that something went wrong with your installation, and there might be many reasons of why this happened.
So if you do have any issues.
Please copy the whole output inside your terminal and paste it in the Q&A section, and I will try to
help you out.
Okay, great.
So now I'm going to copy this and paste it here and click on enter.
And now the Metro Bundler terminal has started up.
I'm not going to pay attention to this error because this is just a React Native error.
And I don't want to talk about what the Metro bundler exactly is.
This is going to pop up anytime you're going to be running your application, and this is going to be
needed to be opened anytime you're making changes to your application, even when building the app,
automatically your files are changing.
This means that Metro Bundler needs to be running, and if you close down the Metro Bundler terminal,
your watchman, which we installed, is not going to be taking a look at your files and basically your
simulator, which is this one is going to stop communicating with your file system that you might be
changing.
So anytime you're developing and you're actually trying to change things in your application, please
make sure that Metro bundler is open and it's not closed down.
And then if you want to stop the development for the day, you can close down your Metro bundler and
just open it up once more.
Whenever you start working on your application, it should open up automatically anytime you run this
command.
However, if it does not, you can always use npm start which is going to look like this.
So you would basically go to your awesome project and CD here stands for Change Directory.
And then you would do npm start and the metro bundler would automatically get started.
And then you would need to open up another terminal and type in npm react native run iOS.
And this will run your application.
But usually if you just do this, the terminal should pop up on its own.
Okay, so we're just now going to wait for the application to get built.
And once this is done, you're going to see your application template appear inside the terminal.
So let's wait for this to complete and come back to the video once you're ready.
Great.
The build was successful and now our application is launching.
We're going to see how the initial application looks in the simulator.
So this is how it looks.
You can scroll here.
And we have successfully completed all the steps.
We have installed the latest React Native environment setup.
And because we did everything successfully you're able to see this running in the simulator.
Now I do want to say that if you have any questions or run into any issues during the installation process,
don't hesitate to ask the question in the Q&A section.
And don't forget to copy paste the output from your terminal there, because that way I'm going to be
able to help you quicker.
Thanks so much for watching and I'll see you in the next video.