Download & Install React Native with Android Studio & Setup Visual Studio Code as IDE Tutorial 2021

hello guys welcome to coding cafe my name is mohammed ali and in this video we will download and install react native on windows os so yes we will be doing the complete react native setup and we will run our first react native app on our phone real smartphone so anyways for this go to your browser and simply search for react native you will see this react native.dev here you will see this setting of the development just click on this setup setting of development and it will redirect you to this page and you can also come here directly by simply typing this url which is react dot dev slash dot slash environment setup and press enter and it will direct you to the same page so anyways here we have the react native cli quick start for the windows and android okay so what we need to do we need to simply install the node get native command line jdk android studio so please follow me step by step okay just open up a new tab okay and google for chocolaty install with cmd okay just search for this cmd.x and you will see this first one which is chocolatey software docs setup slash install you can also see the url let me show it to you which is docs.chocolaty.org here you can see e and dash us slash choco slash setup so anyway that will direct you to this page that i'm install if you scroll a little here and you will see the install with cmd dot x okay just copy this command and then open up your command prompt which is cmd and you have to open it as an administrator so just right click on this okay and click on run as administrator now here we have to simply pass the command which we copied and then press enter and now we have to wait for it it will take some time so please be patient and wait for it yeah that's it so this was the first step now let's go back here to our react native documentation here you can see we have done with the chocolaty the next step is basically to install the node.js so you have to simply copy this command okay so just copy this and and now open up the command prompt press this command and press enter and it will now install the node.js so yeah it has been installed successfully so this was step two okay by running this command we have installed the node.js successfully as well as we have also installed the jdk so not just and jdk is installed successfully which was the step two now the step three is basically to install the react native command line interface so in order to do that we have to open up the terminal again i mean the command prompt and just run this as administrator and now just write the same command which you are seeing on your screen just write here npm install npm install dash g react dash native dash c l i okay so make sure let me tell you open up again the command prompt okay a new command from close the previous one and now here you have to simply write this command which is npm install dash g react dash native dash cli and then press enter so yeah that's it now let's just close the command prompt and the next step is we have to install the android studio now so for that open up a new tab and just go to google and search android studio and then press enter and you will see this developer developer.android.com let's just click on it you can also come to this page by simply typing this url which is developer.android.com studio and press enter so anyways click on download android studio you have to read this once you read this then you have to check this box which is i have read and agree with about terms and condition then click on download android studio for windows i'm going to download it inside the downloads folder so you have to simply click here save so once the download is completed 100 you will get i mean after that you will get this file which is android studio okay once you once it is downloaded successfully you have to simply double click on it in order to install android studio now so yeah welcome to the android studio setup now we have to simply click on next uncheck this android virtual device okay and then click next click next and install so click next now after completion and now click finish and it will start the android studio now click on do not import settings don't send click next click on this standard and click next now which theme you want light or dark i will go i will go with the dark theme so let's just click next and now click next again and let's click on finish and we have to wait for it so it has been completed successfully now simply click on finish button now the next thing is you have to simply click on this create new project and click on this select this no activity and then click next and then click finish because we have to do some setup which is to create an emulator and also some other setup so now click on file and in the file we have settings we have this appearance and behavior inside this we have this system settings let's expand this and inside the system settings we have android sdk and then in here we have this android 11.0 r and android 10.0 queue click on the show packages okay check this and you will see the details about it so inside this android 10.0 queue we have to select this one which is android sdkf platform 29 and then this one which is intel x86 item 64 system image check this also also select this one which is google play intel x 86 atom this one okay atom system image this one okay make sure to check these okay the android sdk platform 29 under the android 10.0 cube okay we have the first one android sdk platform 29 intel x 86 item 64 system image and then google play intel x86 atom system image once you do select this then you can simply click on this sdk tools and here also click on show package details first and then select 29.02 select this one okay 29.0 0.0.2 and then click on apply click ok and yeah click on accept button and since these are not installed so first of all click on this one click accept okay and then click on this one and make sure to click this accept button also okay once you select both of i mean once you accept these okay now you can simply click on next and it is now going to download it now you can simply click on finish click ok now the next thing is basically to set up the path okay so here we can simply say search for edit environment variables and this will open this and now if you go back to the documentation for react native setup then after the installation of android studio we have this configured the android home environment variable so you have to simply copy this okay which is android home as it is i'm going to copy this same name and then come here and click on the environment variables and then click new the variable name will be the same which is android underscore home and then the path which is by default it is at the following location okay so you have to copy this path let's just set this that's it click ok here you can see it has been added successfully now the next thing is let us scroll here we have to set the path for the platform tools so just copy this path this is the default location copy this and come back here and here you can see this path just select this path and click on edit and then click on new and we have to simply paste that here platform dash tools okay that's it and yeah that's it click ok so congratulations our react native setup has been completed now is the time to create our first react native app and to test the app on the mobile phone so we can now create our react native app okay using this command but before doing that we have to do some setup i mean in order to test the app on our phone or if you want to test it on the android emulator so you have to simply go back to the android studio and we have to restart the android studio first so simply click on this file and then you can simply click on this invalidate catches and restart click on inverted and restart so android studio has been restarted now and now here let's just open up the phone you can simply click on this play button in order to open up the android emulator and if you want you can also connect your real smartphone using data cable you can test the app on that also but anyway we will write for the phone as our emulator has been started here you can see it and let's wait for it so the phone has been opened successfully now let's just go back to the document tab and now let's create our brand new react native application so to create a new application you have to remember this command okay just copy this and how we can create our project let's just minimize all these things and now we have to simply open up the command prompt i want to create the project on the desktop so i will simply maybe get to my desktop first okay now i am on the desktop so i will simply pass that command here which is for creating a brand new react network project the project name will be awesome project okay which is our first project so let's just press enter and let's wait for it you can see it is now creating brand new react native project so yeah congratulations our project has been created successfully that you can see and now to run the default app i mean which is our awesome project we have to simply run this uh command the command from our project and our project is awesome project since you know we are on the desktop so we have to simply copy this whole path okay just copy this whole path and then you can simply paste that here and then press enter and let me tell you npx vietnam yet does not have run dash android this will basically install the app our first basic react native app on our this emulator so let's just test it press enter and now it is going to install the app on the android phone that's where for it so this is our first react native basic app or you can say the first hello world app so how we can use vs code via visual studio code as an ide for react native app development for that we have to first download and install the vs code so simple and so easy so just search for vs code and then you will see this download okay we will store your code called.jstudio.com just click on this download you can also come here to this page by simply writing this url and since we are doing it for windows so just click on windows and then click on i mean let's download this file inside the downloads folder so it is now downloading the size of this is not big so it will take some few seconds don't worry so vs code has been downloaded successfully let's just go to the download folder here you can see this is our vs4 file double click on it and it will open the installer in order to install it okay i accept the agreement click next click next click next click next and then install and yeah that's it now you can uncheck this and click finish okay let's just close this also let's close the browser now i will tell you how to open it so you have to simply search for vs core and you will see it okay here it is just write vs and you will see this okay visual studio code or you can simply type here that is visual studio so anyways let's just click on it now before we open our react native project in vs code okay which we are using now as an ide for our react native web development so before doing i mean doing all these things we have to add some important and you can say very important extensions so in order to add or install these extensions you have to simply click on this button okay and then here search for code for matter which is this one prettier code for matter just click on it okay this one and then click on install and it is now installing this code for matter printer code formatter which will make our code you can say beautiful i mean in a best way we can format our code here you can read the description for this extension okay what it will do basically the next extension is material icon theme this one material icon theme okay let's click on install if you see this pop-up you can simply click on it ux and then the next one is basically the error lens this one okay error lens let's just install this also and the last one is which will be automatically installed but we have to confirm which is basically the toggle t of toggle format on save this one toggle format on sale let's just install this also so yeah everything is installed successfully so now is the time to open our react hello world project in the vs code so you have to simply click on this file also you can click here on this icon which will say open folder click on it and then navigate to the desktop on the desktop we have our first react native web project which is awesome project so let's just click on select folder and it will open it in the vs code here you can see it so first of all this is our app.js file if you see this then you can simply click allow everywhere and this file basically contain our code i mean the default code so now let's just test the app from here okay from vs code i will also tell you guys how you can open the android emulator directly from the vs code while you are let's say typing here or doing changes here in the vs code so for that we will add an extension search here for android ios emulator which is this one android ios emulator just click on install and it's now installing it has been installed successfully now the next thing is we have to go to the settings of this android ios emulator extension just click on this gear icon the settings icon and here we have to go to the extension settings now here we have to set this path okay make sure that in the emulator path this is written okay if it is not written you can simply write this which is you can see this library slash android slash sdk simulator okay use i mean there's still design starting from till design okay so anyways the next thing is to set the emulator path windows so for that we have to go to our sdk in my case as you know it is in the c drive users and here when you come here to your username here for example my username is codingcafe your will be let's say john peter or any m i mean whatever your good name is okay so anyways once you come here you will simply click on this view and then click on this hidden files and you will see this data this one inside the app data we have local and inside the local we have android which is this one and then sdk and then we have emulator now this part you have to copy it just copy this path close this come back here and pass this here just past that path here just like this so yes our setting has been completed now we can simply close this come back here and here you can see the mobile icon will appear here okay also the shortcut for this is control alt e okay you can press ctrl alt e button and it will open up the android emulator but anyways you can see here the android emulator icon you can simply click on it okay we view android emulators and this one which is our emulator pixel 3a so let's open it so now let's just go back to our project and inside the app.js we have our basic default code let's first check this so you can simply open up the terminal new terminal and then in the command prompt you have to simply run this command which is npx react dash native run dash android and then press enter now let's wait for it it is now installing our react native application on this android emulator so congratulations our first react native app is running now okay welcome to react native step one see your changes debug learn more here you can see this is basically our default code which comes with the react native by default okay now let's say if you want to do some changes here then inside the return uh just remove this code the default port from here you will simply remove this and then in here i will add text and then inside the i mean in here we can simply write hello world or you can say hello world this is my first pf native app okay and then let's apply some style on it so in order to do it we can simply say here that view we can cut this ending tag view and after the text you can pass it okay just like this and then here we can say style equals to styles dot [Music] container styling so from here we can remove the old styling that we have here okay and now we can apply it on our container styling which is basically our hello world text so here we can simply say that container styling background inside the double quotes let's apply the color code hash for time zero f f so yeah that's it so we have applied just a background color which is blue color all over this text so let's i mean how we can run apply these changes here to our app so you have to simply click on run and click on this run without debugging and it is now refreshing the app here you can see it hello world this is my first react native app and the background color is blue so that's it that is so nice and so great so yeah see you guys in the next video bye for now

Channel: Coding Cafe

Views: 25,847

Keywords: how to install react native in visual studio code, how to install chocolatey on windows 10, how to setup react native environment in windows 10, how to setup react native in visual studio code, how to setup react native in android studio, open react native project in android studio, how to run react native project in android studio, react native app in android studio, build react native app in android studio, react native run android emulator windows, react native tutorial, vs code

Id: f0NhcjCkcG4

Length: 31min 28sec (1888 seconds)

Published: Thu Apr 01 2021