Setup Your First React Native App on VS Code ! | Expo

hey there welcome back to this channel so in this video i'm going to show you how you can install react native and just get up and running with your first app and i'll show you how you can just live reload your app and see it on both on web and your phone real time using expo so let's just jump on to my screen cool so i'll be using vs code to build react native things so i'll be using that and i'll show you now the um so before you get into that you just have to make sure that you have installed node.js in your computer if you haven't you just you can just go to this site node.js.org and download the lts version and just install it it's pretty easy and after install it to just check that you have installed you can just uh go to your command prompt and just do node dash v now this will show you if you have installed it will show you the version of the node and if you haven't it will show you some errors so you can just do that now after you've done that that means that your computer is ready to run javascript so now you can just open the terminal by using the control plus the character under your escape it's called tilde i guess else you can just go to view and do terminal so this is what you have to do to so this is the shortcut i used but you can just tap here and it will open the terminal now you have to install the xposed cli or the expo command line interface in your pc so that you can use expo right so to do that uh you have to do npm uh install uh dash g so this g means global right so once you do this command then next time you have to make a reactive app you don't have to install xposed cli again because it will be installed globally in your pc right so dash g and then expo dash cli so this will install the export thing here cool so we have installed now as you can see plus xposed cli added packages and stuff so we have install it now you have the xposed cli in your pc so we'll see it doing its work now okay so imagine so everything is set up now i want to make an app right how to make a react native app right so to do that the expo cli does that for us so now that you've installed expo this will now work okay expo in it so you remember how we do uh get in it right so then a git is actually installed in a computer so git is doing work now expo is installed so you can use expo right so expo in it now here you have to add the name of your app i'll say learning or react native right um you can see it right all right just make it bigger cool so exponent the name of your app here and then if you press enter um you'll see that it will just give you a full boilerplate it will ask you some things i guess uh we'll see that cool yeah it asks you things here you can just use your keyboard up down keys and just see so if you want a blank just minimal app as clean as empty canvas just empty app it will give you that if you select this one it will give you the typescript uh configured version of the app so you don't use javascript that you will use typescript i guess let's see minimal just bare minimal let's see what it does now here i'll just type enter and sorry tap enter cool now as this thing gets installed you can just go to play store and just search for expo expo and you will just get this expo app which i'll be showing it in the screen now if i am not lazy so then you can just tap install and install that app in your mobile phone and i will be showing how your app will live reload as you control plus s like save on your editor it will live reload on your phone which is pretty awesome cool so now you can see your project is ready react native is set up the app is set up um now you what you can do is that so you can see here the folder this wasn't there now everything is set up now and now you can just go ahead here in the terminal you can just write you can just get into the folder by cd and your app's name learning rn and and here to start the app what you can do is just do expo start right now it will just go ahead and start the project for you and it will give you uh and there we go here we have things happening also it is starting a bundler it will the app that you have will be running here now you must be wondering what is this big qr code here right so this is something you can scan with your phone to just live reload your app like like you can reload your app on your computer on your editor coder and the app will just live reload on your phone so that you can just test as you go as you could write which is pretty awesome that expo offers if you go this is the local host on it which it is running um so i just tapped in here and yeah cool so if i just do run in a web browser here right uh attempting to open the project in a web browser and it will just i guess it will just open in another tab here cool there we go this is our app and if i just go back to my uh editor oh app.js and here you can see this is the text you see in here right so if i just uh i guess just change it let's do the typical hello world right from where everything started and i just save it and go back here you'll see that boom hello world right i guess you can see it right yeah hello world now let me just show you that in the phone after you open your expo app you will see a scan qr code at the top here and if you just uh tap that it will ask you to use your camera then just allow it so just scan it and after you just scan it you will see that your app will just start kind of loading in here and you should be seeing your app in some time now cool so as you can see here it is building the javascript bundle right end of the screen and it's 98 and it's now downloading the javascript bundle i guess it's the first run that's why it is happening boom there we go hello world a little bit of fix here so if you're so at default when you run the effort first it will be at lan here but the problem is that it is kind of showing this error with lan so i just tag overflow this error and um and just turning it into tunnel uh just fixed everything so just do that if your app is not running and then just quit or expo and just start again and just scan the qr it will definitely run because it worked for me and now let me just show you the live reload feature here so the thing is that now i'm currently recording this with my phone and if i just uh change this thing to just hello and just control plus s you will see that immediately it will change in your phone so it'll say refreshing and boom there we go so by this you can just you know test your app as you code it which is pretty awesome cool so that's all i wanted to show you in this video just getting started with react native and running the app for the first time on mobile and web and if you're watching till now do let me know in the comments and do let me know your thoughts in the comments and if you love this obviously do smash that subscribe button that means a lot and also in the next one till then have a great day and keep building [Music] you

Channel: Saumya Nayak

Views: 67,086

Keywords:

Id: 1_WXNvK_tjs

Length: 8min 2sec (482 seconds)

Published: Sat Sep 18 2021