How To Install React Native with Expo & Setup Your First Project ✅ |Expo go | Android & IOS Emulator

hi everyone welcome back to a new video and in today's video we are going to see that how to set up react native in your machine so that you can build uh start building applications like in react native so that you can publish apps in app store in Apple Store and in Play Store both right so react native is a Closs crossplatform so you can see that I have opened the documentation so we are going to install this through Expo so I have opened the documentation you can see you can go through the documentation link will be provided below so Expo is a lightweight uh uh use of react native through which you can uh build and deploy your application so we are going to use Expo for building that now before uh building that we need some runtime environment nodejs is important because it is based on reactjs so nodejs is the environment which is required so you may need to install uh nodejs if you have mac and windows but my one is Linux so I don't have to install because denux it comes pre uh installed right so yeah so you need to Simply download the nodejs and simply install it very pretty simple steps so I have opened my terminal you can see so if you uh type the command that my version is currently the U2 version so I don't have to download this one right but uh you can follow the steps you can simply download click on the download button if you are on Windows and then you can go through that and just simply install that one so I have uh pasted my uh version to see and you can see that my version is currently U to 22.0 4.4 right so I don't have to install this one because for Linux it is not available and once you're done with the node CH the next thing is simply you have to copy the code that is quick start that it was given so that is simply npx uh that command create react T that one but before that you can create any folder so I am creating a new folder so so I am going to CD react native project so no directory is present so I will create a new folder mkd then I will give the folder name so I have written react native project and after that one uh I will be like pasting the command simply so I have I am going inside to that folder cdac native project and then I will go inside that one npx create Expo app but instead of my app go for the template so you can see the different templates that will be provided so I have written D Das template it will take a little bit of time and it will provide you all the templates that it have it have four different kinds of template so one is blank then we have blank typescript then we have navigation then we have blank beer uh so we will go with the blank first of all because we are going to start with this one right or you can go also with the navigation so just give your name of the application then it will start locating the project files and it will start npm install so it will install all the dependencies so in the meantime the things are getting installed I would like to share you something that has significantly enhanced my projects if you're looking to elevate your app with Superior live audio and video chats and live streaming capabilities then you have to go to check out the zigo cloud so the apis of the zigo cloud are not only powerful but they are also incred incredibly userfriendly making realtime communication and the seamless integration process is very easy with your react native application so if you want a video of how to integrate zoc Cloud that also I will be providing just comment it down let me show you why zoc cloud is a go-to solution for real-time interactive features and it is Love by the developers so you can see you can go through their website the link will be provided in the description box you can go through their website so they provides you the SDK version or uh the minimal version of using any of their uh video chat API or video chat SDK and integrating them and also they have the UI kit so that you can integrate them in your application and you can use them so I have also used them personally and it is one of the biggest uh uh platform and trusted by more than 4,000 plus businesses and you can see many of the startups and companies use that like Star maker and all right so you can see and go through their website like they provide inapp chat then video call then whiteboard then virtual background then all the stuffs right and you can see build for developers out of the the box it comes readymade with the UI component you can simply install the UI and you can use them so they have different features like one to one call group call video call and all and the best thing that I like is the fully customizable SD they have so for video call voice call live streaming and Cloud platforms right so they have all the stuffs so they provide a pretty much uh good thing and they have uh their uh client as a star maker also star maker if you don't know it is a music platform they also use Zol cloud so you can simply use that and in react native that we are setting today that also you can Implement so if you want to know you can just comment down below I will show you how to integrate and then you have uh the UI kit you can see they have a popular UI kit which uh in simply you can use in any of JavaScript uh libraries or Android or anything you can see the code in this UI code you have react native flutter and all the application that you know they provide for all we have the U kit for all of them now in the main features the products that provide a video call voice call live streaming in apppp chat right and many more so these are the main features that zigo cloud provides so you can go through them you can integrate video call so I am showing you video call so we open the video call part you can see that they have direct call group call call invitation live video streaming co-host call Quality monitoring and all those stuffs and which is pretty much good and awesome right so you can Implement zigo cloud with your application and very simply and uh then you can see their steps also they have the documentation well maintained and you can see and go through both the UI kits and the SDK they provide both the things which is a really good thing that you can get fully customizable SDK also and you can get the UI component also right so yeah that's a very good thing about zigo cloud and then you have video call and live streaming so if you open the video call also they have direct as I showed you the direct call and voice calling experience you have the direct call group and all those stuffs then you have live streaming options say uh if you want to add live streaming in your application where multiple people can come and live interaction happen that also you can build through that you have all those stuff then also if you want to build a chat application and all those stuff they also have a powerful chat SDK so which you can integrate one to one chat group chat public Channel chat and all the stuff so it is a pretty much awesome thing allinone thing that zoc cloud provides right so I will just show you quickly how to register in zoud on how to get a free tire right so I will just enter my name and details and then I will verify the code that is provided by zoc cloud and once it is done I will simply uh start my free trial so once you hit the free trial before that click on the check boxes that are provided and once it is done so it will take a little bit of time and then it will take you to the homepage so it has taken you to the homepage so this is the basically the console of the zig Cloud that they provide now once you have logged in you are getting a free tire so I will show you that how to implement that free tire version so it will ask about your company and some of the stuff you can skip that also and now once you're done you can get 100 minutes of free video call or in chat app they provide and you can go Advance also if you want but for trial purpose you can use this 100 minutes free and it will be expiring on you can see after registration it have uh the date right and then you can click on go to the dashboard and it will be started okay and you can see your uh free trial is started and you can simply use that for video call or voice Call Etc and now to create a new project to implement that in your uh application so you have to Simply click on create new project and after that all the steps are given like whichever thing you want to start with like video call voice call video conference you can go through that one and just simply click on next and just create your project and you can simply use that one so this is the good thing about zoc Cloud which they provide all in one and uh you have to set the setup is very simple you have to provide some project name and the steps will be and very simple and you can just continue and it is done so it will take a little bit of time and it will be creating so I have just given a test and you can see it is done right and you can start building the project you can go through the documentation and you can simply Implement them in any of the application like react native so yeah now coming back to our application so that we were running so npm install so you can see now npm install is done so it has successfully installed and set up all our reative code and project and now you have to Simply do is you can see the dependencies and all the stuffs are done now simply the next thing that you have to do here is you have to go inside the directory of the project that was made so you will do simply you can write cdmd my app right and will then take you to the that folder and then you can write code do to open your vs code so vs code is now opened and you can see that all the files and folder structure that is by default created is coming so now you have to Simply run this application to test that whether it is running or not and rest your react uh Native is set up is completed uh now first thing that we have to do here is uh to start this application you have to write the command npm start so let just write that one open your terminal and then after that write npm I will remove this one so yeah simply write npm start and then you will see that uh Expo app is now started now it is run basically on Metro so a QR code will be coming that you can scan through your Expo go Application in your mobile device physical mobile device or you can install the emulator now I will show you the process of uh installing the emulator basically now for emulator you need to install Android Studio so you can see that xoo is currently running and uh for installing the Android studio uh the steps that I we will be following her so first I will open my uh Chrome browser and I will show you the Android Studio documentation you can simply search Android Studio or I will be providing this link you can go and download the Android Studio latest version if you want and once you have downloaded the Android studio uh you can see the features that Android Studio provide you can also build application through Android Studio in my video in my channel already video are provided for Android Studio so and for MacBook user you can download the X code which is required to build the uh emulator for iOS so you can use the X code if you're having a Macbook now coming back to uh the Android Studio because I will show you through Android studio now once you have downloaded and install that one uh if you open it will come like this you can select any of the project and then click on finish and now it will download some of the things that are required and once it has downloaded it will open your project so you just need to install uh create a project and once you have created the project you have to install and download a emulator basically so that you can run your react native application right so in your laptop itself or in your desktop so once the Android Studio will open you have to go to the device manager that thing I will show you so it will take a few minutes of time so yeah it's done so now in the right side you can see there are pretty much some buttons so if you click on the device manager you can see currently I have one device but simply if nothing is there there would be a button for creating so there is a plus icon you select that create a new device and then select any of the device that you want uh my suggestion would be pixel 8 Pro and uh you can select anything and then simply click on next now you have to select the system image basically the operating system say for uh our you can go with audio Sr but I prefer uh you can go with the uh you can go with the r version and now simply once you have selected just click on install and it will start downloading and it will install right it will take 2 GB of some space and once it is done you will see that there will be a finish button and your device will be coming like this only like the same as my one and to run this one you can simply there is a button play button uh in the device manager you can click on that and it will be uh started and now in this coming back to the Expo application how to run this one so simply type A to run on Android you can type uh I for iOS and you can type w for for opening this application in your web right and also in iOS devices you can scan this QR code through the camera app or the scanner app and if Expo goes installed it will uh open the application that you are building currently so now you can see that I have opened my emulator I will take this to take it to the side so now you can see that expoo is installed on our emulator device and it is currently opening that one so it will open this one and you can see that Expo app entry. JS is currently running so it will take a few more minutes and it is now downloading the updates that are present and it will take few minutes and it will show us our application live right so let us just wait and see so now you can see that something went wrong has came in our screen but uh you can close this one and you can just simply rerun this one so I I have opened this one again let's just see so for reloading your application just simply click on R and uh for opening again you can click on a uh in your type in your keyboard in the terminal so it will open that one again now you can see that bundling is completed now in your mobile application you can see it is loading currently right and now our application is live you can see open app to start working all right so now this is the basic app.js file which is present so it is now showing us now your application is ready to go we have completed with the application right so now we can build our react native application so now if you want tutorials about react native you can just simply comment me down I will be providing tutorials on react native also and uh let us just make some changes so that we can see that how it is going to deflect in our application so instead of open up app I will write uh subscribe to my channel so you can subscribe my channel if you have liked this video and uh yeah you can share it with your friends also those who are learning so yeah now you can see that uh the thing is reflected subscribe my channel so that's it for today's video if you have like this video share it with your friends and don't forget to give it a thumbs up and uh you can comment it down and if you have any problem or any doubt

Channel: Rishav Chanda

Views: 4,647

Keywords: reactnative, expo, mobileappdevelopment, javascript, reactjs, frontenddevelopment, uicomponents, crossplatform, appdevelopment, android, ios, developer, facebook, whatsapp, nativeapps, androidstudio, xcode, emulator, reactnavigation, statemanagement, reactcomponents, appdesign, userexperience, programming, tutorial, expositutorial, reactnativetutorial, mobiledevelopment, reactnativeexpo, reactnativedevelopment, react native, react native ui, mobile app development, react native tutorial, flutter vs react native, papa

Id: _sp097GEMSY

Length: 15min 49sec (949 seconds)

Published: Sun Apr 21 2024