In response to numerous requests,
I'm thrilled to present
a comprehensive walkthrough of setting up
React Native CLI on your Windows machine.
To begin this journey,
we're setting our course for
React Native's official documentation.
For this, you're going to need to open up
your browsers and go to reactnative.
dev.
Once you get here, you're going to click
on the Development tab and then Guides.
Here you're going to find
Environment Setup.
Click on this and go
to Set up your Environment.
We already discussed what Expo
is and why we are not using it
in the previous videos.
Therefore, if you're planning
on using Expo, this course
is not going to be useful for you.
There's a bunch of other courses on Udemy
where you can use Expo if you want.
You can always get a refund
and purchase those courses.
If you want to test your applications
in the iOS environment as your target OS,
you're going to have to have macOS,
and I blame this disadvantage
for Windows users on Steve Jobs.
One more thing I want to mention here
is that instead of looking at this video
to write the commands in the terminal,
I as you go to the documentation
yourself as well.
It's going to be easier for you to copy
those commands from the documentation
that we're going to be using.
This will also make sure that you do not
have any typos for the commands
that you're going to run,
and therefore, you're not
going to face with any unexpected issues.
Other than that, the React Native
documentation updates very frequently.
I always try to stay on top of these
updates, and I try to release new videos
as the newer instructions come out.
But just in case you're watching
this video when the new version
is still fresh, you might see
outdated information on my screen.
The installation process is probably
going to be the same, but you
might need to run newer version commands.
I recommend to follow me and
the documentation at the same time.
Now that that's clear, I want to get into
the dependencies that we're going
to be installing for React Native.
Let's go to the Android tab here,
and we're going to see that we need
React Native command line interface,
a JDK, and an Android Studio.
Now, I don't want to mention that in order
to install Node, we're going
to have to install chocolatey,
which is an installation assistant.
Basically, it is a package manager
for Windows that simplifies
the installation of softwares and tools.
Think of it as a tool that would help you
install every other dependency for React
Native applications to run smoothly.
It is going to help us in installing JDK
and Node, which is required
for React Native development.
Now, for experienced developers who
might already have set up Node and JDK
on their computers, please pay attention
that your Node is hired than version 18.
Also, make sure that your JDK version
is 17, as with higher JDK versions,
you might encounter problems.
If you do not have these versions
available, you're going
to have to install or update them.
Now, if you already have Node installed,
you want to have multiple versions of it,
then you're most welcome to use Nvm,
which stands for Node Version Manager,
and it would allow you to have multiple
multiple versions of node
and switching between them.
I will also place a link
to the Nvm documentation inside
the resources folder for this video.
Otherwise, if you're totally new
to React Native and have none
of these tools installed, just
follow me and we're going to
install everything together from scratch.
As we discussed, the first thing that
we're going to install is the chocolatey.
For that, you can just
click on this link here.
As the first step, we're going
to see the subscription here,
and I'm not going to subscribe.
I'm going to close this tab,
and I'm going to go to the step 2.
After that, please make sure that you have
the individual tab selected here.
The first thing that we're going
to need to do is make sure
that we are not restricted and all
of our permissions are set correctly.
For that, you're going to
need to look for Windows PowerShell.
You can just look for it
through the search bar, and you need
to run this as an administrator.
Make sure to click on this.
Now that this is opened, let's
move this out of the way and get started
with the permission check.
Let's copy this and paste it here
and see what it outputs.
Here, we're seeing that
we're getting restricted value.
The documentation says that if it returns
restricted, then we should run this here.
Let's just copy this,
paste it in our PowerShell,
and we're going to say yes to all.
To say yes to all, you need to click on A
on your keyboard and then press Enter.
Now we can rerun this command again
to make sure that everything
went smoothly for us.
Copy this again, paste it here,
click on Enter, and we
see that everything is signed.
Now that we're all set,
we want to run this command.
Just copy this command and paste I
paste it here and click on Enter.
Here we see that we are running
the Chocolatey version
2.4.1. We should be all set.
We don't need this window anymore,
and we can just continue with
the React native installation process.
I'm going to close this window
and we can continue from here.
Right now, we're going to use
this chocolatey that we just
installed to install node and open JDK
through this command presented here.
In order to do this, we are going
to need to run command prompt
as an administrator as written here.
If you are looking for command prompt,
you can just go to the search bar,
type in command prompt, and make sure
to run it as an administrator.
You're going to need
the command prompt a lot.
If you already don't have it
pinned to your taskbar,
make sure to pin it like this.
Now we can get this out of the way
and get started with our installation.
Just copy this command
and paste it here and click on Enter.
Now, while this is completing,
I do want to say what node is.
Think of node as the engine
that powers your React Native projects.
React Native is based on JavaScript,
and Node allows you to run JavaScript
outside of a web browser, making it ideal
for building cross-platform applications.
We're installing node to ensure React
Native journey is off to a solid start.
Now, we're also installing JDK, which is
the toolkit for Java-based applications,
and we need it because it's
pivotal component for Android.
If you're new to development,
you should know that Java and JavaScript
are completely different languages.
Installing JDK ensures
compatibility between your code
and the Android platform.
By installing this, we
are laying the foundation
for seamless Android development.
Now, let's wait for this
to complete and you can come back
to the video once this is done.
Right now, we can see that
this is already completed,
so we can move on to the next steps.
There were some environment changes
with this, and I suggest that
you close your command prompt, actually,
and you reopen it to not face any issues.
Let's just search for command prompt again
and make sure to run it
as an administrator.
Now, we can continue with the next steps.
The next step is
Android development environment setup.
Let's just do this.
Let's click here
to download and install Android Studio.
Just click on Download Android Studio
and make sure to go through
the steps of terms and conditions,
click on Agree and click on Download.
Now, this might take a while,
so just come back to the video
once the download is done for you.
Great.
The download process has finished
for me, so we can just go here
and and click on the Android Studio file
to begin our installation process.
Here we can just click on Next,
Next, Next, and Install.
This will also take some time,
so just come back to the video
once your installation is done.
Now, let's click on Next and Finish.
This will start up the Android Studio.
I don't want to send any
statistics to Google.
If you want to do so,
you're free to do so.
We're going to have to follow this wizard,
so let's just click on Next
and then Next here again,
and then let's click on Next again.
We're going to accept
all of these licenses, and then
we can click on Finish.
Now, it's going to start
downloading your components.
It's going to take a while,
so you can just come back to the video
once this is done for you as well.
Great.
All the components have been downloaded
as of now, so let's just
click on Finish here, and we're welcomed
to the Android Studio.
That's great.
Let me just I'm going to close
this command, prompt to move this here.
We don't need this window
anymore, so let's just close it
and follow the next steps,
which is installing the Android SDK.
To do that, we need to click on
More Actions and then SDK Manager.
More Actions is right here.
Let's click on SDK Manager,
and we're redirected to the screen.
Here we need to find the Android 15
vanilla ice cream entry.
If the documentation differs,
please follow that and not my video.
And we can see that this
is actually already checked off.
We need to make sure that
the following items are selected.
To see those, we need to click on Show
Package Details, which is right here.
Let's click on this.
And now we can see the details.
And we need Android SDK platform 35.
And that's already selected here,
so I don't need to click here.
And we need the Intel System Image
or Google API System Image.
I'm actually going I'm
going to check both.
I'm going to click here
and I'm going to click here.
Then we need to click on SDK Tools tab and
go to Show Package Details as well here.
Let's do that first.
Show details, and we need to find
35.0.0 here and we need to select it.
Make sure to do what
the documentation says.
We're going to click on Apply.
This is going to some
time to get installed.
Wait for this to complete and come back
to the video after that.
This has been completed.
Just make sure to click on Apply
after hitting the Finish button
on your installation process,
and then click on OK.
And now we can move on to the third
step, which is configuring
the Android Home Environment variable.
Now, we have all the directions
that we need here.
The only thing that you could do to
save some time is just go to More Actions
one more time Click on SDK Manager
and make sure to copy this address.
Let's just copy this
and click on OK one more time.
We're going to go to the
Windows Control Panel.
To go there, you can
just search for it here.
Open that and then go to User Accounts.
Then click on User Accounts one more time.
Then we're going to change
our environment variables.
Go here and we need to add
the Android Home variable here.
Click on New, and then we can paste
the value that we had here,
and we can call this Android Home.
Let's just type it ourselves,
Android Home.
Just make sure that you don't have
any typos here, and then click on OK.
And once you do that, another thing
we need to do is make sure
to add platform tools to our path
variable, which is located here.
Click on this path variable,
click on Edit, and then New,
and then paste this value again.
If you lost it, just go back
to more actions, SDK manager,
and copy it from here.
And once you do that, we're just going to
go here and add platform tools to this.
Let's copy this, go here,
click on Edit, and add the rest.
Oops, I missed the slash.
Great.
Now, let's click on OK.
We have the path variable,
we have the Android home variable,
and now all we need to do is click
on OK, and this should be saved.
To ensure that everything went well,
you can just copy this command
and then go to PowerShell
and then run it as an administrator.
Here we're going to paste this command
and we can see
the Android Home variable is here.
We should be all set.
We can just close this.
Now we're ready to prepare
our Android device.
We're going to use that device
to actually run our React Native project
that we're about to create.
You can just click on more actions here,
go to Virtual Device Manager, and here
we're going to create a new device.
We're going to use this device
throughout our whole course.
Click on Create New Device.
We're going to search for Pixel 4A
because that's my favorite phone.
I actually had it and owned it.
Now we're going to click on Next.
Vanilla ice cream is
automatically selected.
If something's missing for you,
just make sure that you get
the same version that's mentioned here.
So match it with this one
and match it with this one.
Then click Next.
Now We can just click on Finish.
Now we can just launch this
from the Start icon here.
Then if you face any issues
with running this emulator, just
close Android Studio and reopen it.
It should solve it for you.
Great.
So this has been opened.
I don't need this window anymore,
nor do I need this window.
I can close it.
I'm going to move this here.
Now we are ready to install
our first React Native project.
For that, open the command prompt, and
let's go to the desktop here by changing
our directory cd, and then desktop.
Here we want to use the React Native
Create command that goes like this,
npx @react-native-community/cli
init AwesomeProject let's click on Enter,
and you might be asked
if you want to proceed.
If you're asked that question,
just click on Y on your keyboard
and then click on Enter.
Then you should see this huge React Native
logo pop up in your terminal.
This means that everything's going well
and we're downloading the template.
Again, this might take some time,
so you need to wait for this to complete.
Once this is done, you can come back
to the video and we're going
to actually run this.
Great.
Now my emulator is open.
As you can see, I have the instructions
to run the application on Android.
The first thing that we see here
is that they're asking us
to have an Android emulator running.
We already run this device,
but if you ever need to just
rerun it somehow, what you need to do is
go to Android Studio on your computer,
and then you're going to go
to More Actions, Virtual Device Manager,
and just click on the Start button here,
and it should start your emulator.
Great.
So since we have this step completed,
we can change our directory from desktop
now and go and run this command, which
basically runs your project on Android.
Just copy this and then paste it here.
Click on Enter.
So this This is called Metro
Bundler, and I'm going to mention it
in other videos as well.
Please do not turn this off
when you're working on your application.
What this terminal does
is it constantly checks on
any file updates in your project.
If any of them changes, it will update
your application in the emulator.
If you turn this off when you're
working on your app, the changes
that you're going to make are not
going to be reflected in the emulator.
Definitely make sure this is on at all
times when you're working on the project.
Now, we just got an error here,
and I wanted you to see this error
because React Native actually
has an issue with Gradle.
If you're having issues with the Gradle,
you're going to see it in that terminal.
I'm not sure exactly why they haven't
updated their code and why they don't
keep up with the Gradle versions.
If you don't have this issue,
then great, they might have already
They updated everything they needed to.
But just in case you see this,
currently for React Native version 0.76,
which is what we installed,
the Gradle version is going to be 8.11.1.
If you're having issues with this,
please do comment on the video and we can
get you the Gradle version that you need.
I'm actually updating this video
because of this issue.
To fix this, just open your Awesome
project and then go to Android, then go
to Gradle, Rapper, and then Gradle Rapper
file that is properties file.
Click on Edit, and then And here,
you're going to change this to 8.11.1.
Then you're going to save this.
Don't forget to save it.
We can just close this and we can rerun
the same that we ran before.
To rerun the same command,
by the way, you can click on up arrow
on your keyboard and then click on Enter.
This should rerun, and I think it
will be successful now.
As a recommendation, if you
need other Gradle versions
and 8.11.1 is also not sufficient, you
can go and google Gradle Distributions.
You can go to the GitHub link right here.
This is going to have information
about all of the releases they did.
You don't want any pre-release items.
Maybe the latest version
could work, but it didn't
work for me now, so I didn't use it.
We're skipping the ones
that say pre-release.
Then I just checked this version
and it worked out, so that's great.
I'm sorry that it's a pain.
If it's not a pain anymore, that's great.
But if it is, you can just check it
out here and see which one works out.
Let's wait for this to be completed
and you can come back to
the video once that's done.
Great.
You see that our build was successful
and our application actually
loaded already in the emulator.
You can scroll and see how
the initial application looks like.
We completed our first project
and installed the application
and got it running on Android.
Now, you're going to see me working with
macOS, mainly in the following videos.
And if there are going to be
any differences that are very important
to mention, I will mention them
for Windows specifically.
Otherwise, most of the commands that I'm
going to use are going to be the same.
So don't worry.
Just follow the videos.
You're going to have no issues.
Just make sure that if I go
into the terminal and I'm trying
to do something in the iOS folder,
you don't do the same because you don't
have Xcode, which is a tool on macOS
that cannot be installed on Windows.
I'm going to this in the notes as well
for Windows, and I will attach
those notes to every video in the course
just in case you need to look at it
when viewing specific videos.
So don't ever do anything
for iOS folder inside your project
and just worry about Android.
In the next video, we're going
to go over the differences between macOS
and Windows, so please do watch that,
and it will save you a lot of time.
Follow the course, and I
hope that you're going to love it.
If you have any questions,
certainly reach out.
If you encounter any issues
with the Windows in the course,
please do let me know or
write a question in the Q&A section.
I'm here to support you,
and we have also a huge community
that can answer your questions.
I'll try to do my best to help you
resolve your issues as well.
So thank you so much for watching, and
I hope you have a great rest of the day.