How To Setup & Run React Native App on Android Emulator from Terminal and edit In Visual Studio Code

hey guys in this tutorial I'm going to show you step-by-step instructions from the official react native documentation on how to set up and run your first react native app from terminal on Android emulator in Android Studio or even Visual Studio code we're going to create a react native app from scratch with a Hello World example running on a virtual Android device emulator and before we get started I'm gonna ask for one small favorite from you guys which is to leave a like for the YouTube algorithm it does take several hours to put these videos together so a simple like does help the channel quite a bit okay you can check which version of node you currently have installed by typing node-version Java jdk 11 is ideal for development with react native but if you have a greater jdk later on you'll have to go to your project root folder and under Gradle wrapper properties file you have to change distribution URL value to upgrade your Gradle version the first thing we're going to do is install chocolatey chocolatey is a command line installer for your windows applications so just like on a Mac or a Linux system you have Homebrew mpm yum apt get and all those other command line installers this allows you to install applications without having to go through the GUI installers but the reason it's important for installing react native is that later will use it to install a specific version of node.js LTS and jdk 11 which is the Java development kit both of those are requirements for setting up react native for development with react native CLI or command line interface and yes you can install them by yourself but chocolatey is recommended by official react native documentation because a react native is more stable with node.js LTS and jdk11 to install chocolaty on Windows go ahead and go to your start button and start typing CMD go ahead and hit enter now you will see the command line program running in the taskbar so I'm going to go ahead and close that and what you want to do is right click on CMD then right click on command prompt and click on run as administrator now in the description of this video you're going to find the Powershell command that you need to copy and paste into the command line here so here it is basically we're going to call Powershell and there's a download string for the chocolate installer and this command will also set path to chocolatey bin that means that we'll be able to run the choco command from anywhere on our hard drive so go ahead and hit enter that will install chocolaty on your system but as you can see I already have chocolatey installed and that's why I have this message of warning choco was found at the chocolateybin choco.exe now that choco is installed let's go ahead and go back to our command line and type choco install Dash y node.js Dash LTS space open jdk 11. go ahead and press enter to execute this installation command and basically just wait for the installation to complete so in this next step we're going to download and install Android Studio so let's go ahead and go to Google and type Android Studio download when you develop react native applications on the Windows platform you have to install Android Studio even if it's not your default editor that you want to use to actually develop your react native mobile app so here we're waiting for the Android Studio installer to download from their official website it's gonna take a while but once it's done go ahead and click on the downloaded file and proceed with the installation steps so here I'm installing Android Studio to its default location under program files all you have to do is just click next a bunch of times future Android installations might be different but make sure when you get to the check boxes to check Android SDK Android SDK platform and Android virtual device that's pretty much it and so just wait until Android Studio installation completes now at this point you can launch Android studio and use it as your react native IDE if you want but you can also use any other IDE let's say Visual Studio or Visual Studio code or even a jetbrains IDE for example IntelliJ IDEA now in the next step we need to install the Android SDK specifically for working with react native so open your Android studio and in upper right corner here click on these three dots and select SDK manager now on this screen go to the SDK platforms Tab and in the lower right corner make sure to check the checkbox that says show package details now go ahead and scroll down to where it says Android 12. s and here make sure to check the check box that says Android SDK platform 31 and also check the check box that says Intel x86 atom 64 system image now on top of this window go to SDK tools tab and in the lower right corner make sure to check the check box that says show package details now under Android SDK build tools go ahead and find the check box that says 31.0.0 and go ahead and check that so now we've selected all the correct sdks for react native development so go ahead and click on the apply button here just make sure that you're installing Android SDK platform 31 revision one Intel 86 atom an Android SDK build tools 31 version 31.0.0 now once you click on the OK button the SDK packages we selected are going to start being installed this is going to take a while so I sped up the installation process in this video so we can get going to the next step so now go ahead and click on the Finish button and on the OK button now open your terminal or command line and start typing CD for change directory users CD your username so basically just replace that with your username then CD app data CD local City Android and CD SDK so this is going to be your location for your Android SDK copy this line we're going to need that in the next step so go ahead and go to your start button and start typing environment variables now here just hit enter and on this window here go to environment variables button here go ahead and click on the new button and in variable name input Box start typing all capital letters Android underscore home now go ahead and paste the SDK location from the previous step which was see users username app data local Android SDK click OK and OK again now go back to your desktop and go to the start button and type power shell hit enter and now in the Powershell execute this command get Dash child item Dash path EnV colon backslash and hit enter now scroll all the way up and we will see our environment variable here Android underscore home in our location for the Android SDK now go back to our previous command line and CD into platform Dash tools now go ahead and select this location and we're going to add that to environment variables as well so go to your start button again and type environment variables hit enter and on the next screen go to environment variables button this time go to the second box below and find the PATH variable and go to the edit button now here scroll down and click on the new button now right click and paste that location from the previous step for Android SDK platform tools now go ahead and click OK button okay and okay again now this guys is an important step if you've previously tried to install react native but failed it's important that we uninstall react native command line interface this is recommended by official react native documentation and the reason they have it there if you installed react native command line interface previously and skip the step you're actually going to get an error so go ahead and type npm on install G react native CLI at react native immunity CLI alright guys if you followed all of these step-by-step instructions in this tutorial we are now ready to run your react native app in Android emulator from terminal on the command line in order to do that we need to install and enable Android emulator in Android Studio so go ahead and go to Android studio and go to virtual device manager here click on create virtual device link you can select any device here I'm just going to go with pixel XL and click next now I already have it downloaded but if you don't you have to click on the download button and wait for that device to install on your system so go ahead and click next and then click on the Finish button Now by clicking on the this play button you can actually start this emulator on your Windows 10 or 11 but what we actually need is to run our react native app from the command line in terminal so to to create a new react native app on the command line go ahead and CD into your react native project folder and type npx react Dash native init and followed by the name of your react native app hello world for example and just hit enter now this will create the minimum files required to run your basic bread and butter react native app it's going to take a while so I'm just going to speed up the process okay so at this point what you can do is you can CD into the react native app you've just created and if you display the contents of this folder you'll see that react native created our app.js file or package.json file and all those other files required to run your first react native app from the command line if you have Visual Studio code installed type code space period and you will open this react native app in your Visual Studio code editor and so in the project folder you can open app.js file which will contain your default react native app with the default source code so at this point you want to go back to the command line and type npm start to launch this react native app so go ahead and type npm start now go back to your Visual Studio code editor and what you want to do here is go to terminal menu on top and start a new terminal and here type npm run Android hit enter and if everything goes well you're gonna see the Android emulator physically appear on the same screen now you're going to see a bunch of stuff running in the terminal window but what you really need to worry about is actually turning on the emulator which is a button right over there so go ahead and turn on your Android emulator your Android device emulator should start running your react native app so I'm going to go ahead and delete everything from the default app.js file and replace that with my own simple react native hello world example and also don't forget to export default app or you're going to generate an error then simply hit Ctrl s to save your react app and it will hot reload in the Android emulator so here I'm going to use some basic inline CSS to increase the font size in our react native component so guys in this tutorial I've not done much editing of the actual process of setting up a react native app with a Hello World example on Windows from scratch so if you followed the instructions in this tutorial step by step I see no reason why this shouldn't be working but if you're getting any errors you're welcome to post a comment and by doing that you might have it answered by someone else and hopefully we can help someone setting up their react native app in the future

Channel: Ghost Together

Views: 109,962

Keywords: react, native, vscode, visual studio code, install, setup, run, hello world, react native app, jdk11, nodejs lts, lts, chocolatey, choco, command line, cmd.exe, terminal, vs code, android studio, android emulator, official docs, react native official documentation, reactnative, app, example, set up, run on emulator, device, create react native app, run react native app, windows, 10, 11, sdk, android sdk, step by step

Id: 8ejuHsaXiwU

Length: 15min 4sec (904 seconds)

Published: Mon Dec 26 2022