Expo Dev Environment Setup for your first React Native project (Windows)

what's up node.js developers in this video we're gonna set up our windows environment for expo cli we're gonna cover installing windows terminal installing node.js with npm installing expo and also visual studio code 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.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 all right 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 power shell 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 alright 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 because we will use it to install packages in our application so let's get started and we're gonna go to node.js.org and here 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 checkbox 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 uh closed 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 all right so we have installed all the dependencies of expo now let's go ahead and install expo itself so let's open windows terminal and using npm install npm install global because we want it to be installed globally expo cli all right so it seems that xbox has been installed successfully let's try to initialize a project and see if everything works so i'm going to clear the screen and i'm going to create a new directory make dear projects and let's go inside this directory and here i can initialize an expo project using expo init now expo will ask us what would you like to name our application so my first app and for the template i'm gonna choose the blank the first one as default just to know that it runs and it installed everything okay all right so the application has been initialized now let's go inside the folder of our app so cd my first up and from here let's run npms to start the development server the metra server yeah let's allow access and it will open a new browser here a new browser window with expo developer tools if everything works so far that means that everything is is installed successfully before running this application on our device let's first of all create an expo account in order to be able to play the application on our device yeah i'm going to open a new terminal here and let's do expo register you can do it from the terminal and also you can do it from their website i think it will redirect us to the website directly here i already have an account but for you go ahead and create a new account and after that come back to your terminal and write expo login and here provide your username and your password okay so after the success message we can write expo who am i and it will tell you if you are logged in successfully logged in as medium 7 perfect so the next step now is on our mobile phone we should download the expo go from market it's available both on android on play market and on ios on the app store so just search for go and you'll find the application there so going to app store we can write expo go and here is the application you can install it and then open up i will open it again so if i look at our project here in the development tools yeah everything is running so yeah no projects are currently open let's try to run the project again the expo project because we we're not logged in at that time so going back to that terminal i'm gonna do ctrl c to stop the server and npm start again to start it back and it should automatically show us the running project in our expo go application on the device because we are logged in with the same account also don't forget to log in with your account here on in expo go application now in the recently in development i see a new application there so if i open it here it took some time to load but now i see opening project so let's see if it will build now in back in our development tools here we see building javascript bundle alright so we see our beautiful application our first react native uh application with expo and it says open up the jest to start working on your app so for example let's have a look at the application let's try to do a very small change and to see that it automatically updates in our expo goal at that point we can say that we are done so here is my application let's open it with some default editor we're gonna handle the id later for example notepad is okay so here if instead of this text we will write hello world and if we save a file let's have a look in our application yes it updated successfully automatically so in our case if everything worked congratulation you are set and ready to get started building application using expo [Applause] 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 and let's start the installation i accept agreement next that's okay next 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 this will do the same it will start our expo project and we will be able to run it from here so if everything is installed we are good to go we have all the dependencies installed we have our ide so let's continue and let's start actually building so now we have everything installed all the dependencies we have expo cli installed we have our ide visual studio code all right so we have everything set up yeah maybe this part was more boring especially for me i hate installing environments and setting up everything so it's good that we have it ready and we will be able to start working and learning react native using expo if you are interested in how to farfer customize visual studio code with themes extension and plugins i will include somewhere a bonus video which will show you what settings do i have but for now let's continue our learning journey that's it for today guys if you enjoyed this video hit the like button and i'm also considering doing react native environment setup so if you're interested in that as well hit the subscribe button and the notification bell not to miss that video take care stay hydrated and write clean code bye bye

Channel: notJust․dev

Views: 2,499

Keywords: vadim savin, notjustdev, not just development, react native, react, react native tutorial, expo, expo developer tools, git, git bash, windows terminal setup, node js, npm install, visual studio code, programming for beginners, node.js, getting started with expo, getting started with react native expo, web development, expo go, mobile development for beginners, react native expo setup windows, windows react native expo, expo cli

Id: f6TXEnHT_Mk

Length: 14min 38sec (878 seconds)

Published: Tue Oct 26 2021