How to Install React Native in Windows 10 (Getting Started in React Native).

[Music] hello guys welcome back to the channel and in this video we will see how to install react native in windows 10. so here i have created a list view or a 2d list so these are the steps you we will be following in the video so first of all so in the search bar type react native cli click on this second link now in this web page you will see everything is written down but little bit complex maybe so for windows and for android i'll be showing you for android so the most important things are these node and jdks this is a java jdk and this is the node for npm models so first of all we have to check here that if you have already installed node on your system make sure it is node 12 or newer if you have already have a jdk on your system make sure it is version 8 or newer so getting started in react native we need to install node and java jdk first of all install java jdk 15 click here and type java jdk 15 so we will you will see this first link click here and down here there are many links for different os click on windows 64 installer click here it will ask you to accept the terms and condition click ok then click here i have already downloaded it so i will not download it again now again we have to check how to install java jdk so here here i have jdk downloaded already so double click on this so click next then again next then click close so now here we have installed our java jdk so i'll click here now add java home environmental variable so to add this variable press windows key and type edit environmental variables for your account so this will pop up and here you will be able to add these variables you should add in this user variable for your system not for system variables so click new and type java boom so now we have to check where our java is installed so press windows e and then click on this os and then program files java and here it is the folder so inside that this is the java jdk location path copy that click here and copy that and paste it in variable value ctrl v then press ok so it will edit successfully then press ok yeah we have added to our environmental variables click on that now install node.js 14 lts so go and type node.js you can just type node.js and then you can download it the lts version lifetime support version so when you click here the node.js will download automatically but i have already downloaded it and close it so here this is the node software again double click click next agree next next next next and then install click finish and now we will see where have we done so we have installed the node.js 14 lts click here click here npm install hyphen g react native cli so this is the command to install react native module in using node.js open your windows terminal and type here node hyphen v to check whether the node.js is installed or not yes it is installed now type npm install hyphen g react negative dli so type it as it is npm install hyphen g react native cli press enter it will install node.js for global variables you can access it from anywhere and now close the terminal i'll again open this and i have i'm done this task now install vs code so i'll be using vs code for our id project id type vs code you can see this visual studio course and you can install it from here it's i've already installed it so i'm not showing you just download and install as it is so did this also now install android studio so go and type android studio and click on this link and here you can see the android studio click here agree to the returns and condition and click on this download and not download it because i have already did that earlier so this is the android studio so click double click on this click next next next and then install so the installation has been completed click next and we have to [Music] now i think we have to install the sdk so start android studio click finish it will start the android studio so the android studio is starting in the background we will see what have we completed so we have done completed installing android studio now we have to install the android sdk pi version so this is the android studio and from tools click on tools click on sdk manager and click on this pi so so choose whatever version you want to use like i want to use the pie so i want to use all of all three of these i'll click i have selected all three and click ok again tools go to avd manager i have these in already installed in my pc so i don't want this pixel 3 i'll delete it also i don't want the below one i'll also delete and if you want to create a new one you can just click here select your device so this is my pixel 3 i want to use pixel 3 device and choose your version you can download from here this download or you can just choose whatever your version is so i'll click on pi i want to use spy click next and then click finish these two devices have been already added in android studio so you can now close this and close the android studio yes exit so now our remaining task is we have installed android sdk price so now we have to add the android home tool environmental variable so go here and you can see in this installation page you have to add this user then app data local data and then android sdk open c drive and then click on users click on your pc name click on app data so for app data you have to take these hidden items then we'll only show you on the screen so click on app data click on local and this is android after that click on sdk and this is the file location you have to add in environmental variable click here copy the location and then press windows key and type edit environmental variable for your account again we come on this screen click new add android home and then add this location and then click ok so this these both are added successfully click ok so now we have added the android inventory environmental variable now create new react native project using npx react native in it my first step need my first project or my first app whatever go minimize and then click on and then create a new folder you can name it as react open that folder now so now open this folder copy the file location and then open command prompt and then type cd and space right click and it will paste the location click enter so now you are inside the folder now type npx react native init my my first app there is a typo in in it okay so after that press enter it will create this using npm module so wait for some time yeah so our project is created now so minimize the screen open the folder you can see this my first tab all these files so right click here you can open with code here also so we will see what is our next step so now we have created our new project so now we have to start the emulator with these commands and then open the terminal and type this command so first of all we will start the emulator minimize the screen this is our project so you can close it or you can just start the emulator from here only so go to your sdk i'll show it from a click on user then your pc name and then app data then local and android sdk so the path this was the old path so we will see what was this new path from after sdk we have to click on emulator location so you can find this folder emulator and click here and copy the location and open this command prompt type cd and paste the location click enter so if we so now you are in this location okay so after going this ring cmd command type emulator list if it is so type it here so you got these two devices pixel 3 and pixel 4 i'll be using the pixel 4 so select that and right click it will copy the name so now again after listing the avds you can start emulator abd and then you have to paste the name so in this here you have to type emulator avd space now paste the name of this emulator i have pasted this click on press enter so that was my old project in react native we will i'll show you from here this is the app running this is the emulator running on your pc so now we have completed this location emulator everything we click on this so now we are remaining to open terminal in vs code and type npx react native run android so this is the remaining only so inside this folder so inside your first app folder right click and open with code so now you can see this is your project file location and here you if you click on app.js you will see every code and now click on terminal new terminal so from here you can type npx react native android you can see npx react native run android press enter it will take some time to create the gradle bundle these are important don't close them these are the important windows don't close them actually it has started its own emulator yeah so even if you started the commands from terminal it will start around own emulator but if you want to do it on separate emulator then i'll show that too you can see from here this is the node module which is being converted from javascript to android files so this is the gradle bundle of android wait for some time it will run on this device only yeah so even if you close this window it won't be any problem but now this is our code and this is our app you can see this react native app running on our emulator if you change something here so like in step one in step one you can see edit app.js to change the screen so you can type anything here type youtube channel and change this to codex and if you if you can see it's not it's not changing in here so when you save this file by pressing ctrl s it will reflect in your app also so you don't have to worry about starting your emulator again and again you can just hot reload it from here only so this is my so this is the tutorial for getting started in android in react native using android studio so thank you for watching this video like share and subscribe to this channel and i'll see you in the next one

Channel: CodeX

Views: 44,080

Rating: 4.867816 out of 5

Keywords: React Native, How To Install React Native, Windows 10, Getting started, react-native init project, How to install React Native in Windows 10, Android Studio, How to make first hello world app in react native, Hello World React Native, React Native Expo, Expo using react, Hello world in react native using android studio, how to install react native app in android, React, React Native Application Developement, React native, mobile development, facebook react native getting started

Id: oZFCt69Bccc

Length: 19min 53sec (1193 seconds)

Published: Sun Apr 04 2021