React Native Environment FULL Setup (Windows)

what's up node.js developers in this video we're gonna set up react native cli on a windows machine we're gonna cover everything from installing node.js dependencies and other prerequisites also including android studio rack native cli and other tools that we will need in our development process so without further ado let's get started [Music] okay so let's start by installing the windows terminal because we're gonna use it a lot so let's open microsoft store and we can install it from here let's search windows terminal and open it from here let's install it and after that we can launch it let's test it out so if i write ls i see all the folders that they have here the next step is to install git and we will use git both for source control management and also for the git bash that it comes with so let's go to git slash scm scm.com and from here we can download it for windows after that yeah let's open the installation guide all right next next here what changes we should do let's check the last one in order to add git bash profile to the windows terminal that we installed previously yeah let's leave everything else by default next yeah next here let's override the default branch name for new repository with main because this is the new default and the new rule to have like the main branch as main alright so on this screen i'm gonna choose the second one because this one will provide me with some unix tools and it's useful for me because i'm coming from linux and mac os and that's why i will choose this one you can also go with the recommended one it's gonna work as well as expected let's press on the next one let's leave it as default next next next next next next default and we don't need those so let's install it okay let's finish and let's open our windows terminal this will automatically open a powershell but we can go on this arrow and open a git bash so let's see if it opens and here i can write git version yes everything is installed so all good i'll also set the git bash as the default so let's go to settings and default profile will be git bash save and close all tabs and let's open again a windows terminal and it will automatically open git bash here all right so the next step is to install and configure node.js on our machine we will need node.js in order to run our react native application and also we will need the npm which comes with node.js and which is a package manager uh because we will use it to install packages in our application so let's get started and we're gonna go to node.js dot work and here uh i'm gonna install the version 16 that starts with 16 just because this version will have long term support if we look here very soon in october this year so most probably by the time you are watching this the version 16 is already having long term support which means that it is safe to be used in production environments so let's go and download this one and let's open the installer okay so here let's press next let's accept the terms next next very important tick this check box in order to automatically install all the necessary tools in order not to do them manually so next and wait until node.js installs okay let's say finish and this will automatically open a terminal and here let's press on any key to continue because this is the additional tools that node.js automatically installs for us so [Music] all right so after around seven or nine minutes i think it finished and automatically close the terminal so let's have a look if it successfully install it so i'm going to open again windows terminal and from here we can write node minus minus version yeah we see that the version is 16.7 and also we can write npm minus minus version and npm is 7.2 which means that node and npm has been installed successfully let's also set up our environment for react native cli so for that let's go to rec native dot dev and let's follow their documentation for the getting started because my video can get outdated but their documentation will always be up to date so on left panel let's go to the environment setup so setting up development environment from here it's important to select react native cli quick start instead of expo because we already have it and development operation system we have windows and for the target os we can only develop for android for ios we cannot there's the benefit of expo because we can also target the ios so installing dependencies let's start with node node we have it already we installed it and the next step is the java development kit for shortly jdk so we're gonna install it using choco which was installed automatically with our node.js if you don't have it if you didn't follow the node.js installation try to install chalk on your system so let's open it here as administrator and let's paste our code here the only thing is that we don't need node.js because we already installed it we will do only choco install dash y open jdk8 let's do that all right so it seems that the jdk has successfully been installed so let's close our terminal and follow the installation guide further so all right additional development environment so we need android studio in order to have some sdks also android studio comes with emulator that we will use to develop locally without needing an extra device so let's download android studio from their web page let's accept their terms and condition and press download let's now open the installation guide and here based on the documentation it says that we should make sure that the next boxes are checked android sdk sdk platform and virtual device shortly avd next android studio and android virtual device that's the only option for me so i'm gonna accept them install okay so the installation finished let's press next and let's start android studio do not import settings it already asks me to update some plugins okay let's update it i don't think we need it but let's keep everything updated and restarting all right so let's press next choose the type of setup you want for android let's see what custom will provide us next you have a dark theme okay so here we check boxes android sdk so here yeah we have sdk we have a platform and the performance and our avd is already installed so okay let's click next uh let's leave it by default the recommended rom memory for our emulators i can also increase it a bit just because i have enough but two should be enough okay let's press finish all right so it finished let's see so based on the documentation we should install the android sdk and specifically android 10. 10 okay let's see where we can do that all right so let's go here on the more actions and find here the sdk manager we will need as we save android 10.0 so let's select this and let's apply the following will be installed sdk yes so let's accept the terms next and once it is done let's click on the finish and let's go back here okay so android sdk done all right so apparently we need to install uh even more things so let's go back in our android studio uh here in the sdk platforms let's make sure that we check this show package details and as we see in the documentation we need the android sdk platform 29 and the intel atom system image or the google api internal atom let's select both just to to be sure and let's press apply accept all right so here we are done and the next step is to install the sdk tools that we need here as well let's show package details and for the android sdk build tools where they are yeah first one let's make sure that we have 29.2 selected and let's apply again all right so we are done with our android studio setup the next step is to set some environment variables because react native depends on them so before that let's go back to our android studio click on customize here on the left panel and let's see all settings from here let's go to the first one appearance and behavior system settings and then android sdk copy the android sdk path from the top here and then we will open windows control panel user and accounts and then again user and accounts and here let's do change my environment variables let's create a new one and the variable name will be android home make sure it's spelled correctly where you can even copy paste from react native documentation and the value will be the one that we copied the path to our sdk so android home okay and let's press ok again let's close everything and now let's test if our android if the android home has been successfully set so let's open powershell power shell and let's copy paste this code from here powershell paste and let's have a look if android home i can see it here so yeah it is pointing to the right direction while we are still here let's also add the platform tools which is some additional android tools let's press on the path and here let's press new let's paste the value of our sdk and then slash and platform dash tools and then okay okay and let's close it we can also test if the platform tools that we need are added by opening a terminal and here just running adb if you see all the list of adb commands that means that our platform tools has been added successfully all right so that's it with android studio and everything now let's get to setup react native the documentation just not to install a specific version of react native globally but instead use npx react native and by doing that we will also get the latest react native version when setting up a project so let's open a windows terminal where i have it here and we can write npx react native initially npx will ask us to install the react native because we don't have any react native installed yet so let's press yes wait until it installs okay so npx installed rack native for us now we can initialize a new project so let's go into the folder that i have for the project let's clear the screen and now we can write nbx react native init for initialize and here the project name so react native first project this will initialize the project with the latest react native version in order for everyone to be on the same page let's take the latest native version that we have right now and set it using version 0.65 this way we will all work with this rack native version while the project is being initialized let's go back to our android studio and prepare our virtual device emulator so yeah here in android studio let's do more actions and from here avd manager which stands for android virtual devices let's create a new virtual device and let's choose the i don't know pixel xl phone and let's press next the release name q with api level 29 we have it already downloaded it so it should be good to go let's rename the device to uh android 29 in order for easier to remember what android version it has then we can press finish and here we have it let's run it by pressing on this play button so the issue with this device is i didn't see that it doesn't have a play store so that might limit some features that we will need in future so for that reason let's just delete this uh virtual device and create a new one vet has a play store we see which devices has play store and which devices doesn't so let's choose for example pixel 4 which has uh play store installed so let's go next and apparently for the devices with play store we need to download version 29 again so we're gonna have to wait a bit all right so this one finished as well let's select it q from here next let's rename it to android 29 and um if your device is not very powerful you can disable that device frame this will save some um some yeah computational power now let's run the android emulator by pressing on the play button and wait until it sets up and usually the first when it opens the first time it takes a bit more just because it has to set up the android system everything is has been installed so let's go inside that project so i'm gonna do cd i ran first project that's how i called it i can do it like this and again let's run npm start to start the development server and besides starting the development server we should also uh tell react native that it should build and run the application on the device uh in expo that was done from the google chrome page but here for react native cli we do not have that so everything will be managed from here that's why we need to open a new terminal in the first one we have a development server in the second one we will open project and do npm run android all right so after around three and a half minutes our application has finally built and is running on our emulator which means that yeah everything is fine we have installed react native cli successfully it runs the application on our emulator yeah it was a long step but finally we are there let's also make sure that whenever we do some changes to our code our application also will change automatically with hot reload i'm going to open my rack native first project here and i'm going to open the application folder using notepad because everyone has notepad so if i scroll down a bit and see some text for example instead of step 1 we can say hello world and if i save a file refreshing and i see hello world here in on the device yes hot reload working save working perfect [Music] okay and the last step is to install id where we will spend most of our time writing the code my idea of choice is visual studio code so let's go ahead and open visual studio code in order to download edit and install on our system okay let's press download for windows yeah and let's start the installation i accept agreement next that's okay next uh let's add open with code action in windows explorer in directory as well and let's register code as an editor for supported file types okay let's install it okay now yeah let's not launch it uh let's open the folder with a project that we had so here in our my first application project we can go ahead and press open with code not with visual studio code let's press trust the offer and some settings i prefer the dark mode and that's it here we have our application i'm gonna go ahead and zoom in a bit from here we can open the terminal by pressing ctrl and the apostrophe below escape button or you can go here terminal new terminal from here again you can write npm npm start and we will be able to run it from here that's it for today guys our windows machine is ready to get started and build projects if you are interested to learn more about tracknative check out the videos in the description below or on my channel because we have a lot of project tutorials that you might love if you enjoy this video please consider subscribing to my channel and turning on the notification bell and let me know down below what other videos i should make about track native take care guys stay hydrated and write clean code bye bye

Channel: notJust․dev

Views: 6,609

Keywords: react native, react native environment setup for windows 10, react, react native for beginners, react native app, react native tutorial, vadim savin, notjustdev, not just development, react native crash course, react native developer tools, git, git bash, git bash install for windows 10, windows terminal, windows terminal setup, programming for beginners, visual studio code, getting started with react native, mobile development for beginners, react native setup for windows

Id: oorfevovPWw

Length: 22min 35sec (1355 seconds)

Published: Wed Nov 03 2021